Il modulo precedente ha dimostrato in che modo l'attributo srcset consente di fornire versioni di dimensioni diverse della stessa immagine. Il browser può quindi decidere quale è la versione giusta da utilizzare. Se vuoi cambiare completamente l'immagine, devi avere l'elemento picture.
Allo stesso modo in cui srcset si basa sull'attributo src, l'elemento picture si basa sull'elemento img. L'elemento picture viene aggregato a un elemento img.
<picture>
<img src="image.jpg" alt="A description of the image.">
</picture>
Se non ci sono elementi img nidificati all'interno dell'elemento picture, l'elemento picture non funzionerà.
Come l'attributo srcset, anche l'elemento picture aggiornerà il valore dell'attributo src nell'elemento img. La differenza è che, laddove l'attributo srcset fornisce suggerimenti al browser, l'elemento picture fornisce comandi. Questo ti offre il controllo.
source
Puoi specificare più elementi source all'interno di un elemento picture, ognuno con il proprio attributo srcset. Il browser esegue quindi la prima opzione possibile.
Formati dell'immagine
In questo esempio sono presenti tre immagini in tre formati diversi:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="A description of the image."
width="300" height="200" loading="lazy" decoding="async">
</picture>
Il primo elemento source rimanda a un'immagine nel nuovo formato AVIF. Se il browser è in grado di eseguire il rendering delle immagini AVIF, scegliamo il file immagine. In caso contrario, si passa all'elemento source successivo.
Il secondo elemento source rimanda a un'immagine nel formato WebP. Se il browser è in grado di eseguire il rendering delle immagini WebP, utilizzerà quel file immagine.
In caso contrario, il browser utilizzerà il file immagine nell'attributo src dell'elemento img. L'immagine è in formato JPEG.
Ciò significa che puoi iniziare a utilizzare nuovi formati di immagine senza sacrificare la compatibilità con le versioni precedenti.
In questo esempio, l'attributo type indicava al browser quale tipo di formato dell'immagine era specificato.
Dimensioni delle immagini
Oltre a cambiare il formato dell'immagine, puoi scegliere tra le diverse dimensioni. Utilizza l'attributo media per indicare al browser quanto verrà visualizzata l'immagine. Inserisci una query supporti all'interno dell'attributo media.
<picture>
<source srcset="large.png" media="(min-width: 75em)">
<source srcset="medium.png" media="(min-width: 40em)">
<img src="small.png" alt="A description of the image."
width="300" height="200" loading="lazy" decoding="async">
</picture>
In questo caso, indichi al browser che se la larghezza dell'area visibile è superiore a 75em, deve utilizzare l'immagine grande. Tra 40em e 75em il browser deve utilizzare l'immagine media. Sotto 40em, il browser deve utilizzare l'immagine piccola.
Questa operazione è diversa dall'utilizzo degli attributi srcset e sizes nell'elemento img. In questo caso, fornisci dei suggerimenti al browser. L'elemento source è più simile a un comando che a un suggerimento.
Puoi utilizzare il descrittore della densità di pixel anche all'interno dell'attributo srcset di un elemento source.
<picture>
<source srcset="large.png 1x" media="(min-width: 75em)">
<source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
<img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async"
srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>
In questo esempio, indichi ancora al browser cosa fare in corrispondenza di diversi punti di interruzione, ma ora il browser ha la possibilità di scegliere l'immagine più appropriata in base alla densità dei pixel del dispositivo.
Ritaglio
Se devi pubblicare solo versioni della stessa immagine con dimensioni diverse, srcset è l'opzione migliore. Tuttavia, se un'immagine non ha un aspetto ottimale con dimensioni inferiori, puoi provare a crearne una versione ritagliata.
Le diverse immagini potrebbero avere rapporti di larghezza e altezza diversi per adattarsi meglio al contesto. Ad esempio, su un browser mobile potresti voler pubblicare un ritaglio stretto e uno alto, mentre su un browser per desktop potresti voler pubblicare un ritaglio largo e corto.
Ecco un esempio di immagine hero che cambia i contenuti e la forma in base alla larghezza dell'area visibile. Aggiungi gli attributi width e height a ogni elemento source.
<picture>
<source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
<source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
<img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
</picture>
Ricorda che non puoi modificare l'attributo alt a seconda dell'origine dell'immagine. Devi scrivere un attributo alt che descriva sia l'immagine a grandezza originale sia l'immagine ritagliata.
Probabilmente non dovrai utilizzare l'elemento picture per la maggior parte delle tue immagini adattabili perché gli attributi srcset e sizes nell'elemento img sono adatti a molti casi d'uso. Tuttavia, per quelle situazioni in cui hai bisogno di un controllo più granulare, l'elemento picture è uno strumento efficace.
È disponibile un tipo di immagine per cui potresti non aver bisogno di nessuna delle due soluzioni: le icone. Ecco i passaggi successivi.
Verifica le tue conoscenze
Verifica le tue conoscenze dell'elemento immagine
Dove l'attributo srcset indica ________ al browser, l'elemento <picture> fornisce ________.
Alcune funzionalità dell'elemento <picture> sono:
avif o webp più piccoli e più facili da scaricare, se possibile.