Immagini nel web: piccola guida pratica

Recentemente mi è capitato diverse volte di navigare senza immagini, in particolare con il Nintendo DS Browser, per velocizzare il caricamento delle pagine. Le immagini sono un aspetto fondamentale di un sito, ma alcuni web designer dimenticano alcuni principi o accorgimenti fondamentali. Ho così pensato di preparare dodici consigli pratici riguardanti le immagini da tenere presente nella codifica di HTML e CSS. Eccoli:

1. Immagini spaziatrici (spacer gifs), decorative, prive di contenuto semantico o visuale
   effettivo, dovrebbero essere sempre specificate come sfondo CSS e mai con tag <img>
2. L'attributo alt, necessario ai fini della validazione del codice, non è un supplemento solo per il validatore: è infatti il testo alternativo che verrà  visualizzato se l'immagine non è reperibile oppure l'utente ha le immagini disabilitate
3. Dai punti 1) e 2) deriva che immagini con alt="" oppure alt="immagine" andrebbero riconsiderati: o le immagini vanno nel background, oppure ci va un alt un po' più esplicativo

4. L'attributo title sulle immagini è facoltativo, ma consigliato. Se l'alt viene mostrato in assenza delle immagini, il title viene mostrato come tooltip quando il puntatore del mouse viene "posato" su un'immagine presente. In tal senso il title dovrebbe
   essere più descrittivo dell'alt
5. Per le immagini veicolate attraverso elementi img andrebbero specificate le dimensioni: o attraverso attributi width e height nell'HTML o, ancora meglio, nel CSS esterno. Questo fa si che la pagina non subisca "salti" fintanto che le immagini sono caricate
6. Per le immagini di sfondo attraverso la proprietà  background è importante specificare anche il colore di sfondo, soprattutto in casi in cui si inverte la cromaticità  testo/sfondo: il testo deve essere sempre leggibile anche con immagini disabilitate. Casi con testo e sfondo a immagini disabilitate con poco o niente contrasto sono da riconsiderare.
7. Nel CSS, le virgolette dentro l'url per specificare il nome dell'immagine di sfondo
   non sono indispensabili: è possibile scrivere background:url(immagine.gif) invece di
   background:url("immagine.gif")
8. Un piccolo trucco per disabilitare tutte le immagini di sfondo nel CSS in un colpo solo:
   con l'editor che usate di solito, basterà  sostituire temporaneamente la stringa url(
   con la stringa url(X di modo da aggiungere una "X" a tutti i nomi delle immagini
   nel CSS. Basterà  visualizzare la pagina con il CSS modificato per rendersi conto di come renderebbe
   la pagina senza le immagini di sfondo. L'operazione di sostituzione inversa ripristinerà  ovviamente
   tutte le immagini nel CSS
9. Le immagini di sfondo dovrebbero essere adattabili al loro contenuto, sia in larghezza
   che in altezza, soprattutto se il testo è dimensionato relativamente o si sta usando un approccio
   di design liquido
10. Le varie tecniche di image replacement che nascondono definitivamente il testo in favore
    del suo equivalente grafico andrebbero ben ponderate: se possibile, meglio adottare una tecnica
    come la cover-up span che lascia il testo visibile anche a immagini disabilitate.
11. Le immagini JPG troppo compresse risultano spesso sgranate e possono dare un'aspetto poco
    curato al sito: anche se non c'è necessita di trasparenza, le PNG si rivelano fedeli, ben definite e spesso più leggere. Con una palette limitata si possono anche considerare le GIF
12. Il peso totale di una pagina è fondamentale, e il più delle volte le immagini ne rivestono la maggioranza. Anche se gli utenti che navigano con il modem 56k sono sempre meno... non vanno trascurati, soprattutto per evitar loro tempi di caricamento epici. Una stima piuttosto precisa è che per questa fascia di utenza sono necessari circa 10 secondi per caricare 35 Kb di dati. E oltre alle immagini c'è da considerare il peso di HTML, CSS e Javascript.