Immagini

Le immagini decorative, come le sfumature di sfondo sui pulsanti o le immagini di sfondo sulle sezioni di contenuti o sull'intera pagina, sono di presentazione e devono essere applicate con CSS. Quando un'immagine aggiunge contesto a un documento, si tratta di contenuti e deve essere incorporata con 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> forniscono un modo per includere più origini immagine con query multimediali associate, ciascuna con un'origine immagine di riserva, consentendo di pubblicare il file immagine più appropriato in base alla risoluzione del dispositivo, alle funzionalità del browser e alle dimensioni del riquadro visibile. L'attributo srcset consente di fornire più versioni dell'immagine in base alla risoluzione e, insieme all'attributo sizes, alle dimensioni della finestra 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 utilizza <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 di immagini reattive HTML integrati, l'HTML consente anche di migliorare il rendimento del 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 lo spostamento del layout dei contenuti. L'attributo lazy consente il caricamento lento.

HTML supporta anche l'inclusione di immagini SVG utilizzando direttamente il tag <svg>, anche se le immagini SVG con estensione .svg (o come data-uri) possono essere incorporate utilizzando l'elemento <img>.

Come minimo, ogni immagine in primo piano deve includere 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 l'asset e lo esegue il rendering nella pagina. Questo attributo è richiesto da <img>. Senza, non c'è nulla da eseguire il rendering.

L'attributo alt fornisce un testo alternativo per l'immagine, fornendo una descrizione dell'immagine per chi non riesce a vedere lo schermo (motori di ricerca e tecnologie assistive, nonché Alexa, Siri e l'Assistente Google) e può essere visualizzato dal browser se l'immagine non viene caricata. Oltre agli utenti con reti lente o larghezza di banda limitata, il testo alt è incredibilmente utile nelle email HTML, in quanto molti utenti bloccano le immagini nelle proprie applicazioni di posta.

<img src="path/filename" alt="descriptive text" />

Se l'immagine è di tipo SVG, includi anche role="img", necessario a causa di VoiceOver .

<img src="switch.svg" alt="light switch" role="img" />

Scrivere descrizioni efficaci delle immagini alt

Gli attributi alt devono essere brevi e concisi e fornire tutte le informazioni pertinenti che l'immagine trasmette, omettendo le informazioni ridondanti rispetto ad altri contenuti del documento o che non sono utili. Nella stesura del testo, il tono deve riflettere quello del sito.

Per scrivere un testo alternativo efficace, immagina di leggere l'intera pagina a una persona che non può vederla. Utilizzando l'elemento semantico <img>, gli utenti di screen reader e i bot vengono informati che l'elemento è un'immagine. È ridondante includere "Questa è un'immagine/uno screenshot/una foto di" in alt. L'utente non deve sapere che c'è un'immagine, ma deve sapere quali informazioni trasmette l'immagine.

Normalmente, non diresti: "Questa è un'immagine granulosa di un cane che indossa un cappello rosso". ma dovresti descrivere il messaggio dell'immagine in relazione al contesto del resto del documento. Ciò che trasmetti cambia a seconda del contesto e del contenuto del testo circostante.

Ad esempio, la foto di un cane viene descritta in modi diversi a seconda del contesto. Se Fluffy è un avatar accanto a una recensione del cibo per cani Yuckymeat, alt="Fluffy" è sufficiente.

Se la foto fa parte della pagina di adozione di Fuffy sul sito web di un rifugio per animali, il pubblico di destinazione è il futuro padrone del cane. Il testo deve descrivere le informazioni trasmesse nell'immagine che sono pertinenti per un utente che adotta la tecnologia assistiva e che non sono duplicate nel testo circostante. Una descrizione più lunga, ad esempio alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth" è appropriata. Il testo di una pagina di adozione in genere include la specie, la razza, l'età e il sesso dell'animale domestico adottabile, pertanto non è necessario ripeterli nel testo alternativo. Ma la biografia scritta del cane probabilmente non include la lunghezza del pelo, i colori o le preferenze per i giocattoli.

È importante sottolineare che non abbiamo descritto l'immagine per intero. Il futuro proprietario del cane non ha bisogno di sapere se il cane si trova in casa o fuori, o che ha un collare rosso e un guinzaglio blu.

Quando utilizzi le immagini per l'iconografia, poiché l'attributo alt fornisce il nome accessibile, trasmetti il significato dell'icona, non una descrizione dell'immagine. Ad esempio, l'attributo alt dell'icona della lente d'ingrandimento è search. L'icona a forma di casa ha home come testo alternativo. La descrizione dell'icona del floppy disk da 5 pollici è save. Se vengono utilizzate due icone di Fluffy per indicare best practice e anti-pattern, il cane sorridente con un basco verde potrebbe avere alt="good" impostato, mentre il cane ringhioso con un basco rosso potrebbe leggere alt="bad". Detto questo, utilizza solo icone standard e, se utilizzi icone non standard come Fluffy buono e cattivo, includi una legenda e assicurati che le icone non siano l'unico modo per decifrare il significato degli elementi della UI.

Se l'immagine è uno screenshot o un grafico, scrivi cosa si apprende dall'immagine anziché descriverne l'aspetto. Anche se un'immagine può valere mille parole, la descrizione deve trasmettere in modo conciso tutto ciò che viene appreso.

Ometti le informazioni che l'utente già conosce dal contesto e di cui è altrimenti informato nei contenuti. Ad esempio, se ti trovi in una pagina di tutorial su come modificare le impostazioni del browser e la pagina riguarda il clic sulle icone nel browser Chrome, l'URL della pagina nella schermata non è importante. Limita l'alt all'argomento in questione: come modificare le impostazioni.

Il alt potrebbe essere "L'icona delle impostazioni si trova nella barra di navigazione sotto il campo di ricerca". Non includere "screenshot" o "machinelearningworkshop" perché l'utente non deve sapere che si tratta di uno screenshot e non deve sapere dove navigava il tecnico della documentazione quando ha scritto le istruzioni. La descrizione dell'immagine si basa sul contesto del motivo per cui l'immagine è stata inclusa.

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, in quanto l'immagine non fornisce informazioni che non siano nel testo circostante.

Se l'immagine non fornisce informazioni aggiuntive o è puramente decorativa, l'attributo deve comunque essere presente, anche se come stringa vuota.

<img src="svg/magazine.svg" alt="" role="none" />

MachineLearningWorkshop.com ha sette immagini in primo piano, quindi sette immagini con attributi alt: un interruttore della luce a forma di uovo di Pasqua, un'icona manuale, due foto biografiche di Hal ed Eve e tre avatar di un frullatore, un aspirapolvere e un tostapane. L'immagine in primo piano che sembra una rivista è l'unica puramente decorativa. La pagina ha anche due immagini di sfondo. Queste immagini sono decorative e sono state aggiunte con CSS, pertanto non sono accessibili.

La rivista, essendo puramente decorativa, ha un attributo alt vuoto e un role di none poiché l'immagine è un SVG puramente di presentazione. Se significative, le immagini SVG devono includere role="img".

<img src="svg/magazine.svg" alt="" role="none" />

Nella parte inferiore della pagina sono presenti tre recensioni, ognuna con un'immagine del poster. Di solito, il testo alt è il nome della persona nella foto.

<img src="images/blender.svg" alt="Blendan Smooth" role="img" />

Poiché si tratta di una pagina di scherzi, devi comunicare ciò che potrebbe non essere evidente agli utenti con problemi di vista, in modo che non perdano l'umorismo. Utilizziamo la funzione originale della macchina come alt anziché il nome del personaggio:

<img src="images/blender.svg" alt="blender" role="img" />

Le foto degli istruttori non sono semplici avatar: sono immagini biografiche e quindi ricevono una descrizione più dettagliata.

Se questo fosse un sito reale, forniresti la descrizione minima dell'aspetto dell'insegnante, in modo che un potenziale studente possa riconoscerlo quando entra 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é si tratta di un sito di barzellette, fornisci le informazioni pertinenti nel 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, non gli importerebbe l'aspetto del punto rosso. In questo caso, la storia del riferimento al film è importante.

Quando scrivi un testo descrittivo, considera quali informazioni trasmette l'immagine che sono importanti e pertinenti per l'utente e includile. Ricorda che il contenuto dell'attributo alt per un'immagine varia 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 trasmesso; nient'altro. Mantienila breve, precisa 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 e risoluzioni dello schermo. Non vuoi sprecare la larghezza di banda di un utente mobile pubblicando un'immagine abbastanza ampia per un monitor di grandi dimensioni, ma potresti voler pubblicare immagini a risoluzione più elevata per dispositivi minuscoli che hanno una risoluzione dello schermo quattro volte superiore al normale. Esistono diversi modi per pubblicare immagini diverse in base alle dimensioni dell'area visibile e alla risoluzione dello schermo.

<img> srcset attributo

L'attributo srcset consente di suggerire più file immagine, con il browser che seleziona l'immagine da richiedere in base a più query supporti, tra cui le dimensioni dell'area visibile e la risoluzione dello schermo.

Può esserci un solo attributo srcset per elemento <img>, ma questo srcset può collegarsi a più immagini. L'attributo srcset accetta un elenco di valori separati da virgole, ognuno contenente l'URL dell'asset seguito da uno spazio e poi dai descrittori per l'opzione di immagine. Se viene utilizzato un descrittore di larghezza, devi includere anche l'attributo sizes con una query multimediale o una dimensione dell'origine per ogni opzione srcset diversa dall'ultima. Le sezioni Learn che trattano le immagini adattabili con srcset e le sintassi descrittive meritano di essere lette.

L'immagine srcset ha la precedenza sull'immagine src se c'è una corrispondenza.

<picture> e <source>

Un altro metodo per fornire più risorse e consentire al browser di eseguire il rendering dell'asset più appropriato è l'elemento <picture>. L'elemento <picture> è un contenitore per più opzioni di immagine elencate in un numero illimitato di elementi <source> e 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 nella sorgente, in quanto le media query possono essere elencate nell'attributo media di <srcset>. <source> supporta anche i formati immagine definiti nell'attributo type.

Il browser prende in considerazione ogni elemento secondario <source> e sceglie la corrispondenza migliore tra questi. Se non vengono trovate corrispondenze, viene selezionato l'URL dell'attributo src dell'elemento <img>. Il nome accessibile deriva dall'attributo alt dell'elemento <img> nidificato. Ti consigliamo di leggere anche le sezioni Learn che trattano l'elemento <picture> e le sintassi prescrittive.

Funzionalità aggiuntive per le prestazioni

Esistono diverse funzionalità aggiuntive per le immagini che possono migliorare le prestazioni del tuo sito.

Caricamento lento

L'attributo loading indica al browser abilitato per JavaScript come caricare l'immagine. Il valore predefinito eager indica che l'immagine viene caricata immediatamente durante l'analisi dell'HTML, anche se l'immagine si trova al di fuori dell'area visibile. Impostando loading="lazy" il caricamento dell'immagine viene posticipato fino a quando non è probabile che entri nell'area visibile. "Probabile" è definito dal browser in base alla distanza dell'immagine dalla finestra. Questo valore viene aggiornato man mano che l'utente scorrono. 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 vengono impostate su eager per impostazione predefinita.

<img src="switch.svg" alt="light switch" loading="lazy" />

Proporzioni

I browser iniziano il rendering dell'HTML quando lo ricevono, effettuando richieste di asset quando vengono rilevati. Ciò significa che il browser sta già eseguendo il rendering dell'HTML quando incontra il tag <img> ed effettua la richiesta. E il caricamento delle immagini potrebbe richiedere un po' di tempo. Per impostazione predefinita, i browser non riservano spazio per le immagini diverse dalle dimensioni richieste per il rendering del testo alt.

L'elemento <img> ha sempre supportato gli attributi height e width senza unità. Queste proprietà sono state abbandonate a favore di CSS. Il CSS può definire le dimensioni dell'immagine, spesso impostando una singola dimensione come max-width: 100%; per assicurarsi che le proporzioni vengano mantenute.

Poiché il CSS è in genere incluso in <head>, viene analizzato prima di qualsiasi <img>. Tuttavia, senza elencare esplicitamente height o le proporzioni, lo spazio riservato è l'altezza (o la larghezza) del testo alt.

Quando gli sviluppatori dichiarano solo una larghezza, la ricezione e il rendering delle immagini comportano uno spostamento cumulativo del layout che danneggia le Vitals web. Per risolvere il problema, i browser supportano le proporzioni delle immagini. L'inclusione degli attributi height e width nel <img> funge da suggerimenti per il dimensionamento, comunicando al browser le proporzioni, in modo che venga riservato lo spazio giusto per il rendering finale dell'immagine. Quando il browser rileva una singola dimensione, come nel nostro esempio del 50%, riserva spazio per l'immagine rispettando la dimensione CSS e mantenendo le proporzioni tra larghezza e altezza.

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

Le immagini sono adattabili se il CSS è stato configurato correttamente per renderle adattabili. Sì, i valori height e width senza unità inclusi vengono sovrascritti con CSS. Lo scopo dell'inclusione di questi attributi è quello di riservare lo spazio con le giuste proporzioni, migliorando il rendimento riducendo lo spostamento del layout. La pagina impiegherà comunque circa lo stesso tempo per caricarsi, ma l'interfaccia utente non salterà quando l'immagine viene visualizzata sullo schermo.

Altre funzionalità delle immagini

L'elemento <img> supporta anche gli attributi crossorigin, decoding, referrerpolicy e, nei browser basati su Blink, fetchpriority. Utilizzato 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 addirittura 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 i valori al nome dell'input, se presente. Ad esempio, un valore come &imageSubmitName.x=169&imageSubmitName.y=66 viene inviato con il modulo quando l'utente fa clic sull'immagine, inviandola. Se l'immagine non ha un attributo name, vengono inviati x e y: &x=169&y=66.

Verifica la tua comprensione

Metti alla prova le tue conoscenze sulle immagini.