Una dei problemi nell'ottimizzazione delle risorse di un sito web è sicuramente la scelta del formato con cui servire le immagini. Con l'avvento del WebP e del più recente Avif, le scelte degli sviluppatori si sono ampliate ma anche complicate, dovendo cercare il perfetto equilibrio tra fruibilità e performance.

Altro fattore da considerare è il supporto (o meno) dei browser ai nuovi formati, abbastanza testati da essere gia disponibili sui siti di conversione come convertio.co ma non sufficientemente diffusi da essere ritenuti dei veri e propri standard; cosi se da una parte abbiamo i formati di immagine tradizionali (png, jpeg e gif) che sono completamente supportati, dall'altra abbiamo il WebP supportato (diversamente) da quasi tutti i browser e il formato Avif supportato solo da Chrome, Opera e da Firefox (dalla versione 93).

Si rende così necessario creare più formati per la stessa immagine e creare un modo per caricare all'occorrenza il formato più opportuno in base alla banda disponibile e al browser utilizzato. Se cerchi una soluzione veloce in HTML a questo problema, puoi sfruttare il tag <picture> per caricare il miglior formato di immagine:

<picture>

  <!-- carica avif se supportato -->

  <source srcset="img/image.avif" type="image/avif">

  <!-- carica webp se supportato -->

  <source srcset="img/image.webp" type="image/webp">

  <!-- carica formati immagine tradizionali -->

  <img src="img/image.jpg" alt="Titolo alternativo">

</picture>

Da notare che questo snippet carica le immagini in webp o avif quando il browser le supporta. Altrimenti carica un jpeg. Tuttavia non prende in considerazione né la densità dei pixel né le dimensioni del dispositivo o il layout CSS; cosi per evitare di caricare un’immagine di 2000px su un dispositivo mobile (magari con una connessione lenta o a consumo) e sprecare risorse e tempo bisogna necessariamente estendere il parametro srcset con le varie risoluzioni e ottimizzare il comportamento responsive con il parametro sizes:

<picture>

  <!-- carica avif se supportato -->

  <source type="image/avif"

  srcset="

  	img/image_low.avif 320w,

  	img/image.avif 600w,

  	img/image_med.avif 1200w,

  	img/image_high.avif 2000w" 

  sizes="

  	(max-width: 500px) calc(100vw - 2rem), 

  	(max-width: 700px) calc(100vw - 6rem),

  	calc(100vw - 9rem - 200px)

  " />

  <!-- carica webp se supportato -->

  <source type="image/webp"

  srcset="

  	img/image_low.webp 320w,

  	img/image.webp 600w,

  	img/image_med.webp 1200w,

  	img/image_high.webp 2000w" 

  sizes="

  	(max-width: 500px) calc(100vw - 2rem), 

  	(max-width: 700px) calc(100vw - 6rem),

  	calc(100vw - 9rem - 200px)

  " />

  <!-- carica formati immagine tradizionali -->

  <img alt="" 

  src="img/image.jpg" 

  srcset="img/image_low.jpg 320w,

  	img/image.jpg 600w,

  	img/image_med.jpg 1200w,

  	img/image_high.jpg 2000w"

  sizes="

  	(max-width: 500px) calc(100vw - 2rem), 

  	(max-width: 700px) calc(100vw - 6rem),

  	calc(100vw - 9rem - 200px)

  " width="2000" height="1134" />

</picture>

Così facendo, a fronte di un maggior lavoro iniziale di editazione dei contenuti, si otterrà un evidente beneficio in termini di fruizione delle risorse, migliorando non solo la velocità di caricamento delle pagine, ma anche il posizionamento del sito nei risultati sui motori di ricerca dato che questa influisce sul punteggio di Google Pagespeed.