L'elemento dell'immagine

Il modulo precedente ha mostrato come l'attributo srcset consente di fornire versioni di dimensioni diverse della stessa immagine. Il browser può quindi decidere quale sia la versione giusta da utilizzare. Se vuoi cambiare completamente l'immagine, devi utilizzare 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 racchiude un elemento img.

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

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

Come l'attributo srcset, l'elemento picture aggiornerà il valore dell'attributo src nell'elemento img. La differenza è che l'attributo srcset fornisce suggerimenti al browser, mentre l'elemento picture fornisce comandi. In questo modo, hai 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 che riesce a eseguire.

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">
</picture>

Il primo elemento source punta a un'immagine nel nuovo formato AVIF. Se il browser è in grado di eseguire il rendering delle immagini AVIF, sceglie questo formato. In caso contrario, passa all'elemento source successivo.

Il secondo elemento source indirizza a un'immagine in formato WebP. Se il browser è in grado di eseguire il rendering delle immagini WebP, utilizzerà questo 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 indica al browser il tipo di formato immagine specificato.

Dimensioni delle immagini

Oltre a passare da un formato immagine all'altro, puoi passare da una dimensione immagine all'altra. Utilizza l'attributo media per indicare al browser la larghezza con cui verrà visualizzata l'immagine. Inserisci una media query 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">
</picture>

In questo caso, indichi al browser che se la larghezza dell'area visibile è maggiore di 75em, deve utilizzare l'immagine grande. Tra 40em e 75em il browser deve utilizzare l'immagine media. Di seguito 40em il browser deve utilizzare l'immagine piccola.

Questa operazione è diversa 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 della densità di 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"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

In questo esempio, stai ancora dicendo al browser cosa fare in corrispondenza di diversi punti di interruzione, ma ora il browser ha la possibilità di scegliere l'immagine più appropriata per la densità di pixel del dispositivo.

Ritaglia

Se devi pubblicare solo versioni di dimensioni diverse della stessa immagine, srcset è l'opzione migliore. Tuttavia, se un'immagine non ha un bell'aspetto a dimensioni più piccole, puoi provare a creare una versione ritagliata.

Le diverse immagini potrebbero avere proporzioni diverse in 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 largo e basso.

Ecco un esempio di immagine hero che cambia i suoi contenuti e la sua 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" fetchpriority="high">
</picture>

Ricorda che non puoi modificare l'attributo alt a seconda dell'origine dell'immagine. Dovrai scrivere un attributo alt che descriva sia l'immagine a grandezza naturale sia l'immagine ritagliata.

Probabilmente non dovrai utilizzare l'elemento picture per la maggior parte delle immagini adattabili. Gli attributi srcset e sizes dell'elemento img coprono molti casi d'uso. Tuttavia, per le situazioni in cui hai bisogno di un controllo più granulare, l'elemento picture è uno strumento potente.

Esiste un tipo di immagine per cui potresti non aver bisogno di nessuna delle due soluzioni: le icone. Ecco cosa succederà ora.

Mettiti alla prova

Metti alla prova le tue conoscenze sull'elemento immagine