Nel web moderno, le immagini rappresentano mediamente oltre il 50% del peso totale di una pagina. Con la varietà di dispositivi che gli utenti utilizzano — dagli smartphone con schermi da 4 pollici ai monitor 4K da 32 pollici — servire la stessa immagine a tutti è uno spreco enorme di banda e un danno alle performance. HTML offre strumenti nativi potenti per gestire le immagini responsive: gli attributi <srcset> e <sizes>, e il tag <picture>. In questa guida completa vedremo come utilizzarli al meglio per creare siti web veloci e ottimizzati.
Perché le Immagini Responsive sono Essenziali
Un’immagine pensata per uno schermo desktop da 1920 pixel di larghezza può pesare 500 KB o più. Servire questa stessa immagine a uno smartphone con uno schermo da 375 pixel è inutile: l’utente scarica dati che non potrà mai apprezzare visivamente. Le immagini responsive risolvono questo problema permettendo al browser di scegliere automaticamente la versione più adatta dell’immagine in base alle caratteristiche del dispositivo.
I vantaggi sono molteplici. Innanzitutto, le performance migliorano drasticamente: meno dati da scaricare significano pagine più veloci. Questo impatta direttamente sui Core Web Vitals, in particolare sulla metrica LCP (Largest Contentful Paint). In secondo luogo, il risparmio di banda è significativo, soprattutto per gli utenti con connessioni mobili limitate. Infine, un sito veloce offre una migliore esperienza utente e viene premiato dai motori di ricerca nel posizionamento.
L’Attributo srcset: Descrittori di Larghezza e Densità
L’attributo <srcset> si aggiunge al tradizionale tag <img> e permette di specificare una lista di immagini alternative tra cui il browser può scegliere. Esistono due tipi di descrittori: quelli basati sulla larghezza (w) e quelli basati sulla densità di pixel (x).
I descrittori di larghezza (w) indicano la larghezza reale dell’immagine in pixel. Ecco un esempio pratico:
<img src="foto-800.jpg"
srcset="foto-400.jpg 400w,
foto-800.jpg 800w,
foto-1200.jpg 1200w,
foto-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw,
(max-width: 1024px) 50vw,
33vw"
alt="Descrizione dell'immagine">In questo codice, il browser conosce le dimensioni di ogni file e, grazie all’attributo <sizes>, sa quanto spazio occuperà l’immagine nel layout. Combinando queste informazioni con la densità di pixel del dispositivo e la larghezza della viewport, il browser seleziona automaticamente il file più appropriato.
I descrittori di densità (x) sono più semplici ma meno flessibili. Si usano principalmente per distinguere tra schermi standard e schermi Retina:
<img src="logo.png"
srcset="logo.png 1x,
logo@2x.png 2x,
logo@3x.png 3x"
alt="Logo aziendale">Questo approccio è ideale per immagini a dimensione fissa come loghi e icone, dove la larghezza non cambia ma la risoluzione sì. Per immagini che si adattano al layout, i descrittori w sono la scelta migliore.
L’Attributo sizes: Guidare la Scelta del Browser
L’attributo <sizes> è fondamentale quando si usano i descrittori di larghezza. Senza di esso, il browser assume che l’immagine occupi l’intera larghezza della viewport (100vw), il che porta a scelte subottimali. L’attributo accetta una lista di media condition seguite dalla larghezza che l’immagine occuperà in quella condizione.
La sintassi segue un pattern preciso: ogni condizione viene valutata nell’ordine in cui appare, e la prima che corrisponde determina la larghezza usata. L’ultimo valore, senza condizione, funge da default. Ad esempio, sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 33vw" indica che su schermi fino a 600px l’immagine occupa il 100% della viewport, fino a 1024px il 50%, e oltre il 33%.
È importante notare che le dimensioni specificate in <sizes> non impostano effettivamente la larghezza dell’immagine — quello è compito del CSS. L’attributo serve esclusivamente a informare il browser prima che il CSS sia stato scaricato e analizzato, permettendo una scelta anticipata del file da caricare. Per questo motivo, i valori in sizes devono riflettere accuratamente ciò che il CSS definirà.
Il Tag picture: Controllo Totale e Art Direction
Mentre <srcset> e <sizes> permettono al browser di scegliere la risoluzione migliore della stessa immagine, il tag <picture> offre un controllo molto più granulare. Con <picture> possiamo specificare immagini completamente diverse per diverse condizioni — un concetto noto come art direction.
Il tag <picture> funziona come un contenitore che avvolge uno o più elementi <source> seguiti da un elemento <img> di fallback. Ecco un esempio di art direction:
<picture>
<source media="(max-width: 599px)" srcset="foto-mobile.jpg">
<source media="(max-width: 1023px)" srcset="foto-tablet.jpg">
<img src="foto-desktop.jpg" alt="Panorama cittadino">
</picture>In questo caso, su mobile viene mostrato un ritaglio ravvicinato dell’immagine, su tablet una versione intermedia e su desktop la versione panoramica completa. Non è una questione di risoluzione ma di composizione dell’immagine: la versione mobile potrebbe mostrare solo il soggetto principale, eliminando lo sfondo che non sarebbe visibile su uno schermo piccolo.
Formato Switching: WebP, AVIF e Fallback
Un altro uso fondamentale del tag <picture> è il format switching, ovvero la possibilità di servire formati moderni come WebP e AVIF ai browser che li supportano, mantenendo un fallback in JPEG o PNG per i browser più datati.
<picture>
<source type="image/avif" srcset="foto.avif">
<source type="image/webp" srcset="foto.webp">
<img src="foto.jpg" alt="Foto prodotto">
</picture>Il browser legge gli elementi <source> dall’alto verso il basso e utilizza il primo formato che supporta. AVIF offre una compressione superiore del 50% rispetto al JPEG, mentre WebP offre circa il 30%. Combinando il format switching con il responsive design, possiamo ottenere risultati straordinari:
<picture>
<source type="image/avif"
srcset="foto-400.avif 400w, foto-800.avif 800w, foto-1200.avif 1200w"
sizes="(max-width: 600px) 100vw, 50vw">
<source type="image/webp"
srcset="foto-400.webp 400w, foto-800.webp 800w, foto-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 50vw">
<img src="foto-800.jpg"
srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Foto del prodotto in alta qualità">
</picture>Questa combinazione garantisce che ogni utente riceva il formato più efficiente nella risoluzione più appropriata per il proprio dispositivo, ottimizzando al massimo i tempi di caricamento.
Best Practice e Impatto sulle Performance
Per ottenere il massimo dalle immagini responsive, è fondamentale seguire alcune best practice. Prima di tutto, specificate sempre gli attributi <width> e <height> sul tag <img>: questo permette al browser di calcolare l’aspect ratio prima del caricamento, evitando il layout shift (CLS). In secondo luogo, utilizzate l’attributo loading="lazy" per le immagini below-the-fold, in modo che vengano caricate solo quando l’utente si avvicina ad esse durante lo scroll.
Per le immagini critiche above-the-fold, considerate l’uso di fetchpriority="high" per indicare al browser di darle la massima priorità nel caricamento. Al contrario, immagini decorative o meno importanti possono ricevere fetchpriority="low". Per approfondire queste tecniche di ottimizzazione del caricamento, vi consigliamo la nostra guida dedicata.
Ricordate inoltre di generare le varianti delle immagini durante il processo di build o tramite un servizio CDN di image processing. Strumenti come Sharp (Node.js), ImageMagick o servizi cloud come Cloudinary e Imgix possono automatizzare completamente la generazione delle diverse risoluzioni e formati. Non dimenticate di utilizzare sempre l’attributo <alt> con descrizioni significative per garantire l’accessibilità delle vostre immagini.
L’impatto sulle performance è notevole: implementando correttamente le immagini responsive, è possibile ridurre il peso delle immagini del 40-70% senza alcuna perdita di qualità percepita dall’utente, migliorando significativamente l’esperienza di navigazione su ogni dispositivo.
Hai bisogno di aiuto con l’ottimizzazione delle immagini responsive? G Tech Group offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.