Immagini nel web: piccola guida pratica
Martedì 17 Ottobre 2006 - 10:50
di Alessandro Fulciniti
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:
- Immagini spaziatrici (spacer gifs), decorative, prive di contenuto semantico o visuale
effettivo, dovrebbero essere sempre specificate come sfondo CSS e mai con tag<img> - 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 - Dai punti 1) e 2) deriva che immagini con
alt=""oppurealt="immagine"andrebbero riconsiderati: o le immagini vanno nel background, oppure ci va unaltun po’ più esplicativo
- L’attributo
titlesulle immagini è facoltativo, ma consigliato. Se l’altviene mostrato in assenza delle immagini, iltitleviene 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 - Per le immagini veicolate attraverso elementi
imgandrebbero specificate le dimensioni: o attraverso attributiwidtheheightnell’HTML o, ancora meglio, nel CSS esterno. Questo fa si che la pagina non subisca “salti” fintanto che le immagini sono caricate - 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. - Nel CSS, le virgolette dentro l’
urlper specificare il nome dell’immagine di sfondo
non sono indispensabili: è possibile scriverebackground:url(immagine.gif)invece di
background:url("immagine.gif") - 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 stringaurl(
con la stringaurl(Xdi 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 - 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 - 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. - 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 - 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.
Categoria: Web Design | Permalink
Commenti
1
Ottima guida, più pratica delle solite guide sull’acessibilità che di solito si scontrano con chi il sito deve farlo veramente :)
Una recensione sul browser del DS sarebbe benvenuta, c’è chi ne parla bene, chi ne parla molto male…
2
Interessante quadro complessivo, molto utile.
Personalmente mi sono trovato spesso a navigare in siti con immagini di sfondo, ma senza colore del background impostato: leggere i testi con le immagini disabilitate in questi casi diventa impossibile.
3
Questa pagina pesa 64 Kb e ci metto 4 secondi a caricarla col 56 K e nel frattempo sto scaricando i newsgroup intestazione e corpo. Certo uso adblock che mi elimina i seguenti script
http://www.google-analytics.co...../urchin.js
# - postato da Gabriele - 17 Ottobre 2006 - 15:23
4
Andrea, una mini recensione c’è già qui sul blog, ovvero Navigare con il Nintendo DS e Opera, che contiene le mie prime impressioni. Personalmente trovo che sia uno strumento di navigazione comodo, robusto e intuitivo con una buona aderenza ai webstandards: è infatti basato su Opera 8.5, che come browser è addirittura più avanti di IE7.
Gli unici nei sono la velocità di caricamento (che non è quella del PC, soprattutto in siti che fanno uso notevole di immagini o di javascript) e il fatto che non siano supportati flash, java, pdf, audio e video. Per la consultazione e navigazione è comunque davvero pratico.# - postato da Alessandro Fulciniti - 17 Ottobre 2006 - 16:26
5
scusate la domanda 1 po’ cattiva: perchè non la smettiamo di considerare gli utenti col 56kb?. la mia domanda nasce anche dal fatto che è qualche mese che si è passati dalla risoluzione per i 760pixel ad una per i 960px. e allora tutti quegli utenti che avevano le risoluzioni 800×600 ??perchè non fare la stessa cosa?
altra cosa: perchè navigare senza immagini?
si capisco l’usabilità, l’accessibilità e quant’altro… (io stesso mi spacco ogni volta le mani a cercare di fare il codice più XHTML strict possibile) ma credo che il 99,99% navighi scaricando le immagini.
Certo ovviamente bisogna anche prevedere i casi in cui qualche immagine salti non venga caricata, ma perchè allora insistere sugli ALT e sui TITLE?e ancora mi domando: google e relativi spider che ne pensano se cominciamo ad imbottire di alt e title?
Richiesta finale:
come scrivere un decente ALT e TITLE?
1) quanti caratteri al massimo nell’uno e nell’altro?
2) come impostarli? cosa descrivere? l’immagine (anche se parte di un layout) o l’intero sito?
3) meglio scrivere uno e lasciare in bianco o quasi l’altro?mi scuso per esser stato prolisso..
# - postato da PiccoloSocrate - 17 Ottobre 2006 - 18:50
6
PiccoloSocrate garantire la consultabilità a utenti con il 56k o con immagini disabilitate, seppure siano in percentuale bassa, è una questione di sensibilità ma soprattutto di professionalità. Un sito leggero lo sarà ancora di più per gli utenti con l’adsl, e corredato da alt text adeguati, sarà più consultabile anche a screen reader, dispositivi mobili e browser per utenti con disabilità.
In quanto a google e motori di ricerca in genere: alt e title aggiungono valore semantico alle immagini (che è vero vengono indicizzate comunque) ma con alt e title credo che vengano “contestualizzate”. Non credo quindi sia un danno, anzi… aspetto conferme dai SEO comunque, dato che non sono un esperto in materia.
In quanto ad alt e title: entrambi servono a descrivere l’immagine. Il primo è un testo alternativo, mentre l’altro un titolo o una piccola descrizione. Ovviamente devono descrivere l’immagine, e se l’immagine è parte del layout… dovrebbe andare nel CSS come ho detto. L’alt è indispensabile, il title è facoltativo.
Ecco un paio di esempi pratici:
alt=”foto delle vacanze” title=”io e Anna sulla spiaggia di rimini”
alt=”screenshot” title=”ecco come rende il form su Safari”
In quanto alla loro lunghezza massima, non sono sicuro se sia 64 o 256 caratteri, ma in ogni caso una ventina dovrebbero bastare… in caso contrario l’attributo longdesc permette di specificare l’indirizzo su cui è possibile consultare una pagina descrittiva. In generale non dovrebbe essere necessario, e inoltre è poco supportato dai browser.
# - postato da Alessandro Fulciniti - 17 Ottobre 2006 - 23:07
7
Una domanda su questa frase:
Immagini spaziatrici (spacer gifs), decorative, prive di contenuto semantico o visuale effettivo, dovrebbero essere sempre specificate come sfondo CSS e mai con tag img
Ma se metto uno spacer come sfondo non perde appunto la sua funzionalita’ di spacer?# - postato da Grab - 18 Ottobre 2006 - 09:38
8
Sull’uso corretto di alt e title si potrebbe discutere molto, ma secondo me alt e title li usi invertiti. Infatti non mi convince molto il punto 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.
E’ un po’ come dire che il titolo di un post (per rimanere a tema :), dovrebbe essere più descrittivo del post stesso.
# - postato da span - 18 Ottobre 2006 - 09:41
9
Una domanda su questa frase:
Immagini spaziatrici (spacer gifs), decorative, prive di contenuto semantico o visuale effettivo, dovrebbero essere sempre specificate come sfondo CSS e mai con tag img
Ma se metto uno spacer come sfondo non perde appunto la sua funzionalita’ di spacer?# - postato da Grab - 18 Ottobre 2006 - 09:43
10
@Grab, infatti lo spacer come sfondo non ha significato…le immagini per far spazio come background non funzionano: ci vanno margini o padding nel CSS.
@Span, in quanto al punto 4: il paragone che fai non è adeguato: l’alt text è il testo alternativo all’immagine, non l’immagine stessa :) Inoltre il title è supplementare e facoltativo, ed è volto a descrivere meglio l’immagine. Gli esempi che ho fatto nel commento 6 dovrebbero essere d’aiuto.
# - postato da Alessandro Fulciniti - 18 Ottobre 2006 - 23:24