Le immagini decorative, come i gradienti di sfondo sui pulsanti o le immagini di sfondo nelle sezioni di contenuti o nell'intera pagina, sono di presentazione e devono essere applicate con CSS. Quando un'immagine aggiunge contesto a un documento, si tratta di contenuto e deve essere incorporato in HTML.
Il metodo principale per includere le immagini è il tag <img> con l'attributo src che fa riferimento a una risorsa immagine e l'attributo alt che descrive l'immagine.
<img src="images/eve.png" alt="Eve">
Sia l'attributo srcset su <img> sia l'elemento <picture> consentono di includere più origini immagine con query supporti associate, ciascuna con un'origine immagine di riserva, consentendo la pubblicazione del file immagine più appropriato in base alla risoluzione del dispositivo, alle funzionalità del browser e alle dimensioni dell'area visibile. L'attributo srcset consente di fornire più versioni delle immagini
in base alla risoluzione e, insieme all'attributo sizes, alle dimensioni dell'area visibile del browser.
<img src="images/eve.png" alt="Eve"
srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
sizes="(max-width: 800px) 400px, 800px" />
Questa operazione può essere eseguita anche con l'elemento <picture>, insieme agli elementi secondari <source>, che utilizzano <img> come origine predefinita.
<picture>
<source src="images/eve.png" media="(max-width: 800px)" />
<source src="images/eve-xl.jpg" />
<img src="images/eve.png" alt="Eve" />
</picture>
Oltre a questi metodi per le immagini adattabili HTML integrati, HTML consente di migliorare le prestazioni di rendering delle immagini tramite vari attributi. Il tag <img> e, di conseguenza, i pulsanti di invio grafici <input type="image">,
possono includere gli attributi height e width per impostare le proporzioni dell'immagine in modo da ridurre la variazione del layout dei contenuti. L'attributo lazy consente il caricamento lento.
Il codice HTML supporta anche l'inclusione di immagini SVG utilizzando direttamente <svg>, anche se le immagini SVG con l'estensione .svg (o come data-uri) possono essere incorporate utilizzando l'elemento <img>.
Ogni immagine in primo piano deve includere almeno gli attributi src e alt.
Il file src è il percorso e il nome file dell'immagine incorporata. L'attributo src viene utilizzato per fornire l'URL dell'immagine.
Il browser recupera quindi l'asset e lo visualizza nella pagina. Questo attributo è richiesto da <img>; senza questo attributo, non c'è nulla da visualizzare.
L'attributo alt fornisce un testo alternativo per l'immagine, fornendo una descrizione dell'immagine a chi non ha la possibilità di vedere lo schermo (ad esempio motori di ricerca e tecnologie per la disabilità, e persino Alexa, Siri e Assistente Google), e può essere mostrato dal browser se l'immagine non viene caricata. Oltre che per gli utenti con reti lente o larghezza di banda limitata, il testo alt è incredibilmente utile nelle email HTML, perché molti utenti bloccano le immagini nelle loro applicazioni email.
<img src="path/filename" alt="descriptive text" />
Se l'immagine è di tipo file SVG, includi anche role="img", che
è necessario a causa di bugs di VoiceOver.
<img src="switch.svg" alt="light switch" role="img" />
Scrivere alt descrizioni delle immagini efficaci
Gli attributi ALT puntano a essere brevi e concisi, fornendo tutte le informazioni pertinenti trasmesse dall'immagine, ma omettendo informazioni ridondanti in altri contenuti del documento o comunque non utili. Il tono nella stesura del testo deve riflettere il tono del sito.
Per scrivere un testo alternativo efficace, immagina di leggere l'intera pagina a una persona che non può vederla. Utilizzando
l'elemento <img> semantico, gli utenti di screen reader e i bot vengono informati
che l'elemento è un'immagine. È ridondante includere l'opzione "Questa è un'immagine/uno screenshot/una foto di" in alt. L'utente non deve necessariamente sapere che esiste un'immagine, ma deve sapere quali informazioni trasmette.
Normalmente non diresti "Questa è l'immagine granulosa di un cane che indossa un cappello rosso". Piuttosto, devi indicare ciò che l'immagine mostra in relazione al contesto del resto del documento e quello che trasmetti cambierà in base al contesto e ai contenuti del testo circostante.
Ad esempio, la foto di un cane verrà descritta in diversi modi, a seconda del contesto. Se Fluffy è un avatar accanto a una
recensione di cibo per cani Yuckymeat, alt="Fluffy" è sufficiente.
Se la foto fa parte della pagina di adozione di Fluffy nel sito web di un rifugio per animali, il pubblico di destinazione è il potenziale genitore del cane. Il testo deve descrivere le informazioni contenute nell'immagine pertinenti per l'utente e non duplicate nel testo circostante. È appropriata una descrizione più lunga, ad esempio alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her
mouth". Il testo di una pagina sull'adozione in genere include la specie, la razza, l'età e il genere dell'animale domestico da adottare,
pertanto non è necessario ripeterlo nel testo alternativo. Tuttavia, la biografia scritta del cane probabilmente non include
la lunghezza del pelo, i colori o le preferenze per i giocattoli. Nota che non abbiamo descritto l'immagine: il potenziale proprietario del cane non ha bisogno di sapere se il cane è al chiuso o all'aperto o che ha un collare rosso e un guinzaglio blu.
Quando utilizzi immagini per l'iconografia, poiché l'attributo alt fornisce il nome accessibile, comunica il significato dell'icona,
non una descrizione dell'immagine. Ad esempio, l'attributo ALT dell'icona della lente d'ingrandimento è search. L'icona che sembra
una casa ha home come testo alternativo. La descrizione dell'icona a forma di disco floppy da 5 pollici è save. Se ci sono due icone di Fluffy utilizzate per indicare best practice e anti-pattern, per il cane sorridente con un berretto verde potrebbe essere impostata la lingua alt="good", mentre per il cane ringhiante con un berretto rosso potrebbe essere scritto alt="bad". Detto questo, usa solo icone standard e, se usi icone non standard, come
Fluffy buona e cattiva, includi una legenda e assicurati che le icone non siano gli unici modi per decifrare il significato degli elementi dell'interfaccia utente.
Se l'immagine è uno screenshot o un grafico, scrivi quanto appreso dall'immagine invece di descriverne l'aspetto. Sebbene un'immagine possa sicuramente valere più di mille parole, la descrizione deve comunicare concisamente tutto ciò che si è appreso.
Omettere dal contesto informazioni che l'utente già conosce e di cui è altrimenti informato nei contenuti. Ad esempio, se sei nella pagina di un tutorial sulla modifica delle impostazioni del browser e se la pagina riguarda la possibilità di fare clic sulle icone nel browser Chrome, l'URL della pagina nell'acquisizione schermo non è importante. Limita il alt all'argomento in questione: come modificare le impostazioni. L'alt potrebbe essere
"L'icona delle impostazioni si trova nella barra di navigazione sotto il campo di ricerca". Non includere "screenshot" o "machinelearningworkshop"
in quanto l'utente non ha bisogno di sapere che si tratta di uno screenshot e non ha bisogno di sapere dove ha navigato
l'autore tecnico quando ha scritto le istruzioni. La descrizione dell'immagine si basa sul contesto del motivo per cui l'immagine è stata inclusa nella prima posizione.
Se l'acquisizione dello schermo mostra come trovare il numero di versione del browser andando su chrome://version/, includi l'URL nel contenuto della pagina come istruzioni e fornisci una stringa vuota come attributo alt, poiché l'immagine non fornisce informazioni che non siano nel testo circostante.
Se l'immagine non fornisce informazioni aggiuntive o è puramente decorativa, l'attributo dovrebbe essere ancora presente, come una stringa vuota.
<img src="svg/magazine.svg" alt="" role="none" />
MachineLearningWorkshop.com ha sette immagini in primo piano, quindi sette con attributi alternativi: un interruttore della luce a forma di uovo di Pasqua, un'icona manuale, due foto biografiche di Hal ed Eva e tre avatar di un frullatore, un aspirapolvere e un tostapane. L'immagine in primo piano che sembra una rivista è l'unica che è puramente decorativa. La pagina ha anche due immagini di sfondo; anche queste sono decorative e, poiché aggiunte con CSS, non sono accessibili.
La rivista, puramente decorativa, ha un attributo alt vuoto e un valore role pari a none in quanto l'immagine è un SVG puramente rappresentativo. Se significative, le immagini SVG devono includere il role="img".
<img src="svg/magazine.svg" alt="" role="none" />
In fondo alla pagina sono presenti tre recensioni, ognuna con un'immagine del poster. Di solito, il testo alt è il nome
della persona raffigurata.
<img src="images/blender.svg" alt="Blendan Smooth" role="img" />
Poiché questa è una pagina di scherzi, devi comunicare ciò che potrebbe non essere evidente agli utenti ipovedenti, in modo che non perdano l'umorismo. Utilizziamo la funzione di macchina originale come alt anziché il nome del personaggio:
<img src="images/blender.svg" alt="blender" role="img" />
Le foto degli insegnanti non sono solo avatar: sono immagini biografiche e di conseguenza ricevono una descrizione più dettagliata.
Se si trattasse di un sito reale, dovresti fornire una descrizione minima di come appare l'insegnante, in modo che i potenziali studenti possano riconoscerlo quando entrano in classe.
<img src="svg/hal.svg" role="img"
alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />
Poiché questo è un sito di scherzi, fornisci le informazioni pertinenti al contesto della barzelletta:
<img src="svg/hal.svg" role="img"
alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />
Se stessi leggendo la pagina a un amico al telefono, a loro non interesserebbe come appare il punto rosso. In questo caso, la cronologia del riferimento del film è importante.
Quando scrivi un testo descrittivo, considera quali informazioni trasmettere dall'immagine sono importanti e pertinenti per l'utente e includile. Ricorda che i contenuti dell'attributo alt di un'immagine variano in base al contesto. Tutte le informazioni trasmesse in un'immagine a cui un utente vedente può accedere e che sono pertinenti al contesto sono ciò che deve essere comunicato, nient'altro. Deve essere breve, preciso e utile.
Gli attributi src e alt sono requisiti minimi per le immagini incorporate. Ci sono altri attributi di cui dobbiamo parlare.
Immagini adattabili
Esistono una miriade di dimensioni dell'area visibile. Esistono anche diverse risoluzioni dello schermo. Non vuoi sprecare la larghezza di banda degli utenti di dispositivi mobili offrendo loro un'immagine sufficientemente larga per uno schermo grande, ma ti consigliamo di utilizzare immagini con risoluzione maggiore per i piccoli dispositivi con una risoluzione dello schermo quattro volte superiore. Esistono diversi modi per pubblicare immagini diverse a seconda delle dimensioni dell'area visibile e della risoluzione dello schermo.
<img> srcset attributo
L'attributo srcset consente di suggerire più file immagine e il browser seleziona l'immagine da richiedere in base a più query multimediali, tra cui le dimensioni dell'area visibile e la risoluzione dello schermo.
Può esserci un singolo attributo srcset per ogni elemento <img>, ma questo srcset può rimandare a più immagini. L'attributo srcset accetta un elenco di valori separati da virgole, ciascuno contenente l'URL dell'asset seguito da uno spazio seguito da descrittori per l'opzione immagine in questione. Se viene utilizzato un descrittore di larghezza, devi includere anche l'attributo sizes con una query multimediale o una dimensione di origine per ogni opzione srcset diversa dall'ultima. Ti consigliamo di leggere le sezioni di apprendimento che trattano le immagini adattabili con srcset e le sintassi descrittive.
In caso di corrispondenza, l'immagine srcset avrà la precedenza sull'immagine src.
<picture> e <source>
Un altro metodo per fornire più risorse e consentire al browser di visualizzare l'asset più appropriato è l'elemento <picture>. L'elemento <picture> è un elemento contenitore per più opzioni immagine elencate in un numero illimitato di elementi <source> e in un singolo elemento <img> obbligatorio.
Gli attributi <source> includono srcset, sizes, media, width e height.
L'attributo srcset è comune a img, source e link, ma in genere viene implementato in modo leggermente diverso nell'origine, poiché le query supporti possono essere elencate nell'attributo multimediale di <srcset>. <source> supporta anche i formati delle immagini definiti nell'attributo type.
Il browser prenderà in considerazione ogni elemento <source> secondario e sceglierà la corrispondenza migliore. Se non vengono trovate corrispondenze, viene selezionato l'URL
dell'attributo src dell'elemento <img>. Il nome accessibile proviene dall'attributo alt della proprietà <img> nidificata.
Ti consigliamo di leggere anche le sezioni di apprendimento relative all'elemento <picture> e alle sintassi prescrittivi.
Ulteriori funzionalità per il rendimento
Caricamento lento
L'attributo loading indica al browser abilitato per JS come caricare l'immagine. Il valore predefinito di eager indica che l'immagine viene caricata immediatamente dopo l'analisi del codice HTML, anche se l'immagine si trova all'esterno dell'area visibile visibile. Se imposti loading="lazy", il caricamento dell'immagine viene posticipato fino a quando è probabile che entri nell'area visibile. Lo "probabile" è definito dal browser in base alla distanza
dell'immagine dall'area visibile. Questo valore viene aggiornato man mano che l'utente scorre. Il caricamento lento consente di risparmiare larghezza di banda e CPU, migliorando le prestazioni
per la maggior parte degli utenti. Se JavaScript è disattivato, per motivi di sicurezza, tutte le immagini verranno impostate automaticamente su eager.
<img src="switch.svg" alt="light switch" loading="lazy" />
Formato
I browser iniziano a eseguire il rendering del codice HTML quando questo viene ricevuto, effettuando richieste per gli asset quando lo incontrano. Ciò significa che il browser sta già eseguendo il rendering del codice HTML quando rileva il tag <img> ed esegue la richiesta. Inoltre, il caricamento delle immagini può richiedere un po' di tempo.
Per impostazione predefinita, i browser non riservano spazio per immagini diverse dalle dimensioni necessarie per visualizzare il testo in alt.
L'elemento <img> ha sempre supportato gli attributi height e width senza unità. Queste proprietà non sono più utilizzate
a favore di CSS. Il CSS può definire le dimensioni delle immagini, spesso impostando una sola dimensione, ad esempio max-width: 100%;, per garantire che le proporzioni vengano mantenute.
Poiché il CSS di solito viene incluso in <head>, viene analizzato prima che venga rilevato qualsiasi <img>. Tuttavia, senza elencare esplicitamente height o le proporzioni, lo spazio riservato corrisponde all'altezza (o larghezza) del testo alt. Poiché la maggior parte degli sviluppatori dichiara solo una larghezza,
la ricezione e il rendering delle immagini comporta una variazione del layout cumulativa che danneggia i web Vitals.
Per risolvere questo problema, i browser supportano le proporzioni delle immagini. L'inclusione degli attributi height e width in <img> funge da suggerimenti per le dimensioni, informando il browser delle proporzioni e consentendo di riservare la giusta quantità di spazio per l'eventuale rendering delle immagini. Se includi un valore di altezza e larghezza su un'immagine, il browser riconosce le proporzioni dell'immagine. Quando il browser rileva una singola dimensione, come l'esempio del 50%, risparmia spazio
per l'immagine che aderisce alla dimensione CSS e con l'altra dimensione mantiene le proporzioni larghezza-altezza.
<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />
Le immagini continueranno a essere adattabili se il CSS è stato configurato correttamente per renderle adattabili. Sì, i valori senza unità
height e width inclusi verranno sostituiti con CSS. Lo scopo dell'inclusione di questi attributi è prenotare lo spazio
con le proporzioni corrette, migliorando le prestazioni riducendo la variazione del layout. Il caricamento della pagina richiederà comunque all'incirca la stessa quantità di tempo, ma l'interfaccia utente non salterà quando l'immagine viene visualizzata sullo schermo.
Altre caratteristiche dell'immagine
L'elemento <img> supporta anche gli attributi crossorigin, decoding, referrerpolicy e, nei browser basati su Blink,
fetchpriority. Utilizzata raramente, se l'immagine fa parte di una mappa lato server, includi l'attributo booleano ismap
e nidifica <img> in un link per gli utenti senza dispositivi di puntamento.
L'attributo ismap non è necessario o neanche supportato su <input type="image" name="imageSubmitName"> poiché le coordinate x e y della posizione del clic vengono inviate durante l'invio del modulo, aggiungendo eventuali valori all'eventuale nome di input. Ad esempio,
qualcosa come &imageSubmitName.x=169&imageSubmitName.y=66 verrà inviato con il modulo quando l'utente fa clic sull'immagine,
inviandola. Se l'immagine non ha un attributo name, vengono inviate x e y: &x=169&y=66.
Verifica le tue conoscenze
Verifica la tua conoscenza delle immagini.
Quali due attributi deve avere sempre un'immagine in primo piano?
sizealtsrc