Immagini

Immagini decorative, ad esempio sfumature di sfondo sui pulsanti o immagini di sfondo in sezioni dei contenuti o nell'intera pagina sono rappresentativi e devono essere applicati con CSS. Quando un'immagine aggiunge contesto a un documento, questa è un contenuto e dovrebbe essere incorporato con HTML.

Il metodo principale per includere le immagini è il tag <img> con src che fa riferimento a una risorsa immagine e all'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 delle immagini con query supporti associate, ciascuna con un'origine immagine di riserva, che consente di pubblicare il file immagine più appropriato in base al risoluzione, funzionalità del browser e dimensioni dell'area visibile. L'attributo srcset consente di fornire più versioni dell'immagine 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 all'elemento secondario <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 adattabili per le immagini HTML integrati, HTML attiva anche migliorare le prestazioni del rendering tramite vari attributi. Il tag <img> e di conseguenza i pulsanti grafici di invio <input type="image">, può includere gli attributi height e width per impostare le proporzioni dell'immagine e 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 il file <svg>, tramite il formato SVG le immagini con 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 indica 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 ne esegue il rendering nella pagina. Questo attributo è obbligatorio per <img>; senza di esso, non c'è niente per il rendering.

L'attributo alt fornisce un testo alternativo per l'immagine, fornendo una descrizione per gli utenti che non possono vederla schermo (pensa a motori di ricerca e tecnologie per la disabilità e persino Alexa, Siri e Assistente Google) e potrebbe essere visualizzato dal browser se l'immagine non viene caricata. Oltre agli utenti con reti lente o larghezza di banda limitata, il testo alt è estremamente utile in HTML email, poiché molti utenti bloccano le immagini nelle proprie applicazioni di posta elettronica.

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

Se l'immagine è di tipo file SVG, includi anche role="img", che a causa dei bug 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 se omettendo quelle ridondanti rispetto ad altri contenuti del documento o comunque non sono utili. Nello scrivere il testo, il tono deve in modo che riflettano il tono del sito.

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

Solitamente non risponderesti "Questa è l'immagine sgranata di un cane che indossa un cappello rosso". ma devi comunicare cos'è l'immagine comunicare in relazione al contesto del resto del documento; e ciò che trasmetti cambia a seconda del contesto e i contenuti del testo circostante.

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

Se la foto fa parte della pagina di adozione di Fluffy su un sito web di un rifugio per animali, il pubblico di destinazione è il potenziale cane principale. Il testo deve descrivere le informazioni comunicate nell'immagine che siano pertinenti per l'utente che lo adotta e che non siano duplicate nel testo circostante. Una descrizione più lunga, come 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 da adottare. pertanto questa operazione non deve essere ripetuta nel testo alternativo. Ma la biografia scritta del cane probabilmente non include lunghezza del pelo, colori, o preferenze relative ai giocattoli. Tieni presente 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 abbia 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 appare ad esempio una casa con home come testo alternativo. La descrizione dell'icona del floppy da 5 pollici è save. Se vengono usate due icone di Fluffy per indicare best practice e pratiche anti-pattern, per il cane sorridente con un basco verde potrebbe essere impostato alt="good", mentre per il cane che ringhia in un berretto rosso potrebbe leggere alt="bad". Detto questo, utilizza solo icone standard e, se utilizzi icone non standard, come il buono e il cattivo Fluffy, includi una legenda e assicurati che le icone non siano l'unico modo per decifrare il significato degli elementi UI,

Se l'immagine è uno screenshot o un grafico, scrivi cosa hai imparato dall'immagine anziché descriverne l'aspetto. Sebbene un'immagine possa sicuramente valere più di mille parole, la descrizione deve trasmettere in modo conciso tutto ciò che è stato imparato.

Ometti informazioni che l'utente conosce già dal contesto e di cui è altrimenti informato nei contenuti. Ad esempio: Se stai visitando una pagina di tutorial sulla modifica delle impostazioni del browser e la pagina riguarda i clic sulle icone nel browser Chrome, l'URL della pagina nell'acquisizione schermo non è importante. Limita alt all'argomento in questione: come modificare le impostazioni. 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 ha bisogno di sapere che si tratta di uno screenshot e non ha bisogno di sapere dove stava navigando il techwriter quando ha scritto le istruzioni. La descrizione dell'immagine si basa sul contesto per cui l'immagine è stata inclusa in precedenza.

Se l'acquisizione schermo mostra come trovare il numero di versione del browser visitando chrome://version/, includi l'URL nella contenuti della pagina come istruzioni e fornisci una stringa vuota come attributo "alt", poiché l'immagine non fornisce informazioni che non è nel testo circostante.

Se l'immagine non fornisce informazioni aggiuntive o è puramente decorativa, l'attributo dovrebbe essere ancora presente, proprio come una stringa vuota.

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

MachineLearningWorkshop.com ha sette immagini in primo piano, quindi sette con attributi ALT: un interruttore della luce a forma di easter egg, un'icona manuale, due foto biografiche di Hal ed Eva e tre avatar di un frullatore, un aspirapolvere e un tostapane. La un'immagine in primo piano che sembra una rivista è l'unica puramente decorativa. La pagina include inoltre due immagini di sfondo; sono anch'essi decorativi e, poiché vengono aggiunti con CSS, non sono accessibili.

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

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

Nella parte inferiore della pagina ci sono tre recensioni, ciascuna 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 barzelletta, dovresti comunicare ciò che potrebbe non essere evidente agli utenti ipovedenti, in modo che non perdano umorismo; usiamo la funzione della macchina originale come alt anziché utilizzare il nome del carattere:

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

Le foto degli insegnanti non sono solo avatar: sono immagini biografiche e quindi una descrizione più dettagliata.

Se si trattasse di un sito reale, forniresti una semplice descrizione minima di come appare l'insegnante, in modo che un potenziale studente possa riconoscerli 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 battute, fornisci le informazioni pertinenti nel contesto dello scherzo:

<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 importa che aspetto abbia il punto rosso. In questo caso, la storia dei riferimenti del film sia importante.

Quando scrivi un testo descrittivo, pensa a quali informazioni trasmette l'immagine che sono importanti e pertinenti per l'utente. includilo. Ricorda che i contenuti dell'attributo alt per un'immagine variano in base al contesto. Tutte le informazioni trasmesse in un'immagine a cui un utente vedente possa accedere e che sia pertinente al contesto è ciò che deve essere comunicato; nient'altro. Mantieni un titolo breve, preciso e utili.

Gli attributi src e alt sono requisiti minimi per le immagini incorporate. Occorre discutere di alcuni altri attributi.

Immagini adattabili

L'area visibile può avere una miriade di dimensioni. Ci sono anche risoluzioni dello schermo diverse. Non vuoi sprecare la memoria di un utente di larghezza di banda pubblicando un'immagine sufficientemente larga per un monitor con schermi di grandi dimensioni, ma potresti voler pubblicare una risoluzione più alta per dispositivi piccoli con una risoluzione dello schermo quattro volte superiore a quella 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, e il browser seleziona l'immagine da richiedere in base a più query supporti, tra cui dimensioni dell'area visibile e risoluzione dello schermo.

Può essere presente un singolo attributo srcset per elemento <img>, ma questo srcset può rimandare a più immagini. srcset accetta un elenco di valori separati da virgole, ciascuno contenente l'URL della risorsa seguito da uno spazio seguito da per quell'opzione dell'immagine. Se viene utilizzato un descrittore di larghezza, devi includere anche l'attributo sizes con un elemento multimediale dimensione della query o dell'origine per ogni opzione srcset diversa dalla precedente. Ti consigliamo di leggere le sezioni di apprendimento relative alle immagini adattabili con srcset e alle 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 consiste nell'utilizzare la Elemento <picture>. L'elemento <picture> è un contenitore per più opzioni immagine elencate in un numero illimitato di <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 nell'origine poiché le query supporti possono invece 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 tra loro. Se non vengono trovate corrispondenze, l'URL dell'attributo src dell'elemento <img> è selezionato. Il nome accessibile proviene dall'attributo alt dell'elemento <img> nidificato. Vale la pena leggere anche le sezioni di apprendimento che riguardano l'elemento <picture> e le sintassi prescrittive.

Ulteriori funzionalità per le prestazioni

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 durante l'analisi del codice HTML, anche se l'immagine si trova fuori dall'area visibile. Impostando loading="lazy" il caricamento dell'immagine viene differito fino a quando è probabile che entri nell'area visibile. "Probabile" è definita dal browser in base alla distanza l'immagine proviene dall'area visibile. Il valore viene aggiornato man mano che l'utente scorre la pagina. Il caricamento lento aiuta a 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 sul valore eager per impostazione predefinita.

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

Proporzioni

I browser iniziano a eseguire il rendering dell'HTML quando questo viene ricevuto, effettuando richieste di asset quando vengono rilevati. Ciò significa che il browser sta già eseguendo il rendering del codice HTML quando rileva il tag <img> ed effettua la richiesta. Inoltre, il caricamento delle immagini può richiedere un po' di tempo. Per impostazione predefinita, i browser non riservano spazio per immagini diverse da quelle 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ù utilizzabili di CSS. CSS può definire le dimensioni dell'immagine, spesso impostando una singola dimensione, ad esempio max-width: 100%;, per garantire che le proporzioni vengano mantenute. Poiché solitamente CSS viene incluso nell'intervallo <head>, viene analizzato prima che venga rilevato qualsiasi <img>. Ma senza elencare esplicitamente i height o proporzioni, lo spazio riservato è l'altezza (o larghezza) del testo alt. Poiché la maggior parte degli sviluppatori dichiara solo una larghezza, la ricezione e il rendering delle immagini comportano 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> agisce come suggerimenti per le dimensioni, che indicano al browser le proporzioni, abilitano il della quantità di spazio da riservare per il rendering finale dell'immagine. Se includi un valore di altezza e larghezza su un'immagine, il browser conosce le proporzioni dell'immagine. Quando il browser incontra una sola dimensione, come l'esempio del 50%, consente di risparmiare spazio per l'immagine che rispetta la dimensione CSS e con l'altra dimensione mantenendo le proporzioni larghezza-altezza.

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

Le immagini saranno comunque adattabili se il CSS è stato configurato correttamente per renderle adattabili. Sì, il modello senza unità incluso Verrà eseguito l'override dei valori height e width con CSS. Lo scopo dell'inclusione di questi attributi è prenotare lo spazio le proporzioni corrette, migliorando le prestazioni riducendo la variazione del layout. La pagina richiederà ancora circa lo stesso importo ma la UI non salta quando l'immagine viene visualizzata sullo schermo.

Altre funzionalità delle immagini

L'elemento <img> supporta anche 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 nidificare <img> in un link per gli utenti senza dispositivi di puntamento.

L'attributo ismap non è necessario e non è nemmeno supportato in <input type="image" name="imageSubmitName"> come x e y le coordinate del punto del clic vengono inviate durante l'invio del modulo, aggiungendo i valori al nome dell'input, se presente. Ad esempio: quando l'utente fa clic sull'immagine, con il modulo verrà inviato un codice simile a &imageSubmitName.x=169&imageSubmitName.y=66. inviandolo. Se l'immagine non ha un attributo name, x e y vengono inviati: &x=169&y=66.

Verifica le tue conoscenze

Verifica le tue conoscenze in materia di immagini.