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.
Quali attributi deve avere sempre un'immagine in primo piano?
sizealtsrc