L'elemento dell'immagine

Il modulo precedente ha dimostrato come l'attributo srcset ti consenta di fornire versioni della stessa immagine di dimensioni diverse. Il browser può quindi decidere quale è la versione giusta da utilizzare. Se vuoi cambiare completamente l'immagine, avrai bisogno dell'elemento picture.

Nello stesso modo in cui srcset si basa sull'attributo src, l'elemento picture si basa sull'elemento img. L'elemento picture è disposto attorno a un elemento img.

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

Se all'interno dell'elemento picture non è nidificato alcun elemento img, l'elemento picture non funzionerà.

Come l'attributo srcset, l'elemento picture aggiorna il valore dell'attributo src in quell'elemento img. La differenza è che quando l'attributo srcset dà suggerimenti al browser, l'elemento picture fornisce comandi. Questo ti dà il controllo.

source

Puoi specificare più elementi source all'interno di un elemento picture, ciascuno con il proprio attributo srcset. Il browser quindi esegue il primo che riesce.

Formati immagine

In questo esempio sono presenti tre immagini diverse 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 visualizzare immagini AVIF, viene scelto il file immagine. In caso contrario, si passa all'elemento source successivo.

Il secondo elemento source rimanda a un'immagine in 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 ha indicato al browser il tipo di formato dell'immagine specificato.

Dimensioni delle immagini

Oltre a passare da un formato di immagine all'altro, puoi passare da un formato dell'immagine all'altro. Utilizza l'attributo media per indicare al browser la larghezza di visualizzazione dell'immagine. Inserisci una query multimediale 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 di medie dimensioni. Sotto 40em il browser deve utilizzare l'immagine di piccole dimensioni.

Questo è diverso dall'utilizzo degli attributi srcset e sizes nell'elemento img. In questo caso, stai fornendo suggerimenti al browser. L'elemento source è più simile a un comando che a un suggerimento.

Puoi anche utilizzare il descrittore di densità dei pixel 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 stai indicando al browser le operazioni da eseguire in corrispondenza dei 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 solo pubblicare versioni della stessa immagine di dimensioni diverse, srcset è l'opzione migliore. Tuttavia, se un'immagine non viene visualizzata correttamente in dimensioni ridotte, puoi provare a crearne una versione ritagliata.

Le diverse immagini potrebbero avere proporzioni diverse di larghezza e altezza per adattarsi meglio al contesto. Ad esempio, su un browser mobile potresti voler pubblicare un ritaglio stretto e alto, mentre su un browser desktop potresti voler pubblicare un ritaglio ampio e corto.

Di seguito è riportato un esempio di immagine hero che cambia i contenuti e la forma in base alla larghezza dell'area visibile. Aggiungi 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 della fonte 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 immagini adattabili: gli attributi srcset e sizes nell'elemento img coprono molti casi d'uso. Tuttavia, nei casi in cui hai bisogno di un controllo più granulare, l'elemento picture è uno strumento efficace.

Esiste un solo tipo di immagine per cui potrebbe non essere necessaria nessuna delle due soluzioni: le icone. Ecco i passaggi successivi.

Verifica le tue conoscenze

Verifica le tue conoscenze sull'elemento grafico