Immagini responsive. Cosa sono e come funzionano gli attributi srcset e sizes del tag img?

La presenza di dispositivi con diverse dimensioni, risoluzioni e densità di pixel ha reso la progettazione web una sfida sempre più complessa. Da smartphone compatti a tablet, passando per desktop ad alta risoluzione, ogni dispositivo offre un’esperienza di visualizzazione diversa. Ecco dove entrano in gioco gli attributi srcset e sizes del tag img che permettono al browser di utilizzare l’immagine più adatta in base a vari parametri del dispositivo. Non ha senso scaricare un’immagine di grandi dimensioni su uno smartphone ma ha senso scaricare una versione più piccola in termini di pixel e più leggera in termini di dimensioni.

In questo articolo, esploreremo il funzionamento di srcset e sizes, fornendo una guida su come funzionano e come utilizzarli.

srcset: che cos’è e a cosa serve?

L’attributo srcset permette di definire diverse versioni di un’immagine, ciascuna ottimizzata per diverse larghezze. In pratica, ciò significa che puoi fornire immagini ad alta risoluzione per dispositivi ad alta densità di pixel e versioni più leggere per dispositivi con risoluzioni inferiori, garantendo tempi di caricamento rapidi.

Utilizzando srcset, puoi elencare diverse sorgenti per un’immagine, insieme alla larghezza in pixel di ciascuna versione. Ad esempio:

<img srcset="immagine-320w.jpg 320w, immagine-480w.jpg 480w, immagine-800w.jpg 800w" 
     src="immagine-default.jpg" alt="Descrizione dell'immagine">

In questo esempio, sono fornite tre versioni dell’immagine, ognuna ottimizzata per una larghezza specifica. Il nome del file immagine-320w.jpg è seguito dalla sua larghezza in pixel e dalla lettere w. Per esempio 320w.

L’attributo src serve come fallback. Se il browser non supporta srcset o non riesce a trovare un’immagine appropriata nell’elenco, utilizzerà l’immagine specificata nell’attributo src.

sizes: che cos’è e come funziona?

Mentre l’attributo srcset fornisce al browser una serie di immagini tra cui scegliere, l’attributo sizes guida il browser nella decisione di quale immagine utilizzare in base alle dimensioni effettive in cui l’immagine verrà visualizzata sulla pagina.

In altre parole, mentre srcset dice “Ecco le immagini disponibili”, sizes dice “Ecco quanto spazio l’immagine occuperà sulla pagina in vari scenari”.

Le dimensioni in cui un’immagine viene visualizzata possono variare in base alla larghezza del viewport o ad altre condizioni CSS. L’attributo sizes consente di definire queste variazioni, fornendo al browser le informazioni necessarie per selezionare l’immagine più appropriata dal srcset.

L’attributo sizes utilizza una sintassi simile alle media queries di CSS. Consente di definire diverse dimensioni dell’immagine in base a diverse condizioni del viewport.
Ad esempio:

<img srcset="immagine-320w.jpg 320w, immagine-480w.jpg 480w, immagine-800w.jpg 800w"
     sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
     src="immagine-default.jpg" alt="Descrizione dell'immagine">

In questo esempio, l’attributo sizes dice al browser che:

• Se la larghezza del viewport è al massimo di 320px, l’immagine occuperà 280px di larghezza.
• Se la larghezza del viewport è al massimo di 480px, l’immagine occuperà 440px di larghezza.
• In tutti gli altri casi, l’immagine occuperà 800px di larghezza.

Il browser utilizza queste informazioni per selezionare l’immagine più adatta dal srcset.
La dimensione dell’immagine può essere specificata anche con l’unità vw ed è possibile utilizzare anche la funzione calc.
Esempio:

<img srcset="immagine-320w.jpg 320w, immagine-480w.jpg 480w, immagine-800w.jpg 800w"
     sizes="(max-width: 320px) 100vw, (max-width: 480px) 50vw, calc( 50vw - 10rem )"
     src="immagine-default.jpg" alt="Descrizione dell'immagine">

Video esplicativo

Nel video qui sotto, al minuto 21:07, il bravo Kevin Powell mi mostra con un esempio come le media query presenti nell’attributo sizes influenzino la scelta del browser.

Attenzione quando si specificano gli attributi width ed height

Tutti gli esempi mostrati precedentemente, non contengono gli attributi width ed height nel tag <img>.
Le dimensioni dell’immagini visualizzate sono quelle specificate nell’attributo sizes

<img 
  src="https://placehold.co/1024x682"
  alt="placeholder"
  srcset="https://placehold.co/1024x682 1024w,
	  https://placehold.co/800x533 800w,
	  https://placehold.co/600x400 600w,
	  https://placehold.co/300x200 300w"
  sizes="(max-width: 2000px) 50px, 100vw">

Quando la viewport è più piccola di 2000px l’immagine avrà una dimensione di 50px.

Le cose cambiano completamente quando andiamo a specificare gli attributi width ed height

<img
  width="1024"
  height="682"
  src="https://placehold.co/1024x682"
  alt="placeholder"
  srcset="https://placehold.co/1024x682 1024w,
	  https://placehold.co/800x533 800w,
	  https://placehold.co/600x400 600w,
	  https://placehold.co/300x200 300w"
  sizes="(max-width: 2000px) 50px, 100vw">

Quando la viewport è più piccola di 2000px l’immagine avrà una dimensione di 1024px e non più di 50px. Inoltre dobbiamo inserire la regola css:

img{
  max-width:100%;
  height:auto;
}

per far in modo che l’immagine venga ridimensionata dinamicamente rispettando la dimensione della viewport. Sarà il browser a scegliere dall’attributo srcset l’immagine da visualizzare più adatta.

Perché specificare width ed height?

Specificare width e height può migliorare le prestazioni della pagina, poiché aiuta il browser a eseguire un layout più efficiente. Questo è particolarmente utile per i dispositivi mobili e le connessioni lente inoltre risolve il problema Cumulative Layout Shift (CLS).

Debug immagini responsive attraverso Firefox

Il debug delle immagini responsive in Firefox, specialmente quando si tratta di densità dei pixel, può essere fatto utilizzando gli strumenti di sviluppo integrati nel browser. Ecco come puoi procedere:

1. Apertura degli Strumenti di Sviluppo

• Premi F12 o fai clic destro su un elemento della pagina e seleziona “Ispeziona elemento” per aprire gli Strumenti di sviluppo di Firefox.

2. Utilizzo della Scheda “Rete”

• Vai alla scheda “Rete” (Network) e ricarica la pagina per vedere tutte le risorse caricate.
• Puoi filtrare le risorse per “Immagini” per concentrarti solo sulle immagini caricate.

3. Simulazione di Diverse Densità dei Pixel

• Nella scheda “Responsive Design Mode” (accessibile tramite l’icona che assomiglia a un piccolo schermo di telefono e tablet), puoi impostare manualmente la densità dei pixel. Questo ti permette di testare come le diverse densità dei pixel influenzano la scelta dell’immagine.

4. Utilizzo della Console

• Puoi utilizzare la console JavaScript per eseguire comandi come document.querySelector('img').currentSrc; per vedere quale sorgente è stata effettivamente utilizzata per un’immagine.

5. Esaminare le Proprietà dell’Immagine

• Fai clic destro sull’immagine e seleziona “Ispeziona elemento” per vedere gli attributi come srcset e sizes nel pannello “Elements”.
• Questo ti darà un’idea di come il browser sta interpretando questi attributi.

Utilizzando una combinazione di questi metodi, dovresti essere in grado di debuggare efficacemente le tue immagini responsive in Firefox, tenendo conto anche della densità dei pixel.