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.