Introduzione
Quando si parla di compatibilità cross-browser in HTML, spesso il primo pensiero va a form, componenti interattivi o JavaScript. In realtà, anche la gestione delle immagini può creare differenze importanti tra browser, dispositivi e condizioni di rete. Un approccio molto efficace per migliorare l’esperienza utente è il progressive enhancement applicato alle immagini responsive: si parte da un contenuto base che funziona ovunque, e si aggiungono miglioramenti solo dove il browser li supporta.
Questo approccio è particolarmente utile per siti editoriali, e-commerce e landing page, dove le immagini hanno un ruolo centrale. L’obiettivo non è solo “far vedere un’immagine”, ma consegnare la versione giusta nel modo più affidabile possibile: dimensione corretta, formato adeguato, caricamento efficiente e fallback sicuro.
In questo tutorial vedremo come costruire una soluzione robusta usando img, srcset, sizes e picture, mantenendo sempre un fallback compatibile. L’idea chiave è semplice: il browser più moderno riceve il meglio, mentre quello meno evoluto continua a mostrare un contenuto corretto senza errori.
Codice completo
<article class="card-prodotto">
<h2>Scarpe da trekking Alpine X</h2>
<picture>
<!-- Formato moderno per browser che lo supportano -->
<source
type="image/avif"
srcset="
immagini/alpine-x-480.avif 480w,
immagini/alpine-x-960.avif 960w,
immagini/alpine-x-1440.avif 1440w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px">
<source
type="image/webp"
srcset="
immagini/alpine-x-480.webp 480w,
immagini/alpine-x-960.webp 960w,
immagini/alpine-x-1440.webp 1440w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px">
<!-- Fallback universale: funziona anche senza picture/srcset -->
<img
src="immagini/alpine-x-960.jpg"
srcset="
immagini/alpine-x-480.jpg 480w,
immagini/alpine-x-960.jpg 960w,
immagini/alpine-x-1440.jpg 1440w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px"
alt="Scarpe da trekking Alpine X nere e arancioni su sfondo roccioso"
width="960"
height="320"
loading="lazy">
</picture>
<p>
Modello tecnico per escursioni lunghe, pensato per offrire stabilità e aderenza su terreni misti.
</p>
</article>Spiegazione
Il cuore della soluzione è il tag picture, che consente al browser di scegliere tra più sorgenti in base al supporto dei formati e alle caratteristiche del dispositivo. Nel nostro esempio, il browser prova prima a usare AVIF, poi WebP e infine il classico JPEG tramite l’elemento img.
Questo è un ottimo esempio di progressive enhancement: il contenuto base è sempre disponibile, ma i browser più moderni possono caricare un file più efficiente. AVIF e WebP spesso offrono un peso minore rispetto al JPEG, con benefici concreti su tempi di caricamento e consumo dati.
1. Il fallback con img
L’elemento img è fondamentale perché rappresenta il fallback più compatibile. Anche se un browser non supportasse picture o srcset, avrebbe comunque un’immagine da mostrare grazie all’attributo src. Questo è il principio base della compatibilità cross-browser: non sostituire mai il comportamento essenziale con una funzionalità che potrebbe mancare.
2. srcset e sizes per immagini responsive
L’attributo srcset indica al browser più versioni della stessa immagine, ciascuna con una larghezza diversa. L’attributo sizes aiuta il browser a capire quanto spazio occuperà l’immagine nel layout. In questo modo il browser non scarica un file troppo grande per uno schermo piccolo.
Per esempio, nella nostra scheda prodotto l’immagine occupa:
- 100% della larghezza su schermi piccoli;
- 50% su schermi medi;
- 600px su schermi grandi.
Questa informazione consente una scelta più intelligente della risorsa da caricare. È un vantaggio pratico sia per l’usabilità sia per le prestazioni.
3. Il ruolo di width e height
Gli attributi width e height servono a riservare spazio prima che l’immagine venga scaricata. Questo riduce gli spostamenti del layout, migliorando la stabilità visiva. Anche se il browser potrebbe ridimensionare l’immagine via CSS, fornire le dimensioni intrinseche resta una best practice importante per la compatibilità e per l’esperienza utente.
4. loading="lazy"
L’attributo loading="lazy" dice al browser di caricare l’immagine solo quando sta per entrare nell’area visibile. È una funzionalità utile, ma non va considerata obbligatoria: se un browser non la supporta, l’immagine verrà comunque caricata in modo tradizionale. Anche qui il progressive enhancement funziona bene: il comportamento base resta intatto.
5. Perché questo approccio è cross-browser
La compatibilità nasce dal fatto che ogni livello ha un fallback chiaro:
- se il browser supporta picture, seleziona il formato migliore;
- se non supporta un formato moderno, passa al successivo;
- se non supporta srcset o sizes, usa comunque src;
- se supporta tutto, ottimizza al massimo il download.
Questo è molto diverso da una soluzione “tutto o niente”. Invece di dipendere da una sola tecnologia, costruiamo una catena di compatibilità.
Best practice
- Metti sempre un src valido nell’elemento img: è il fallback più importante.
- Usa formati moderni con criterio: AVIF e WebP sono utili, ma conserva JPEG o PNG come alternativa universale.
- Definisci width e height per prevenire layout shift e migliorare la stabilità della pagina.
- Scrivi alt descrittivi, brevi ma informativi: aiutano accessibilità e comprensione del contenuto.
- Non abusare di picture: usalo quando hai davvero bisogno di cambiare formato o immagine in base al contesto.
- Testa su browser diversi, inclusi quelli mobili e versioni non recentissime, per verificare il comportamento dei fallback.
- Non affidarti solo al supporto moderno: una pagina ben progettata deve restare utile anche senza le ultime API o i formati più recenti.
Un errore comune è pensare che il progressive enhancement serva solo a “migliorare la resa grafica”. In realtà è una strategia di robustezza: riduce i rischi di incompatibilità e rende il contenuto più resiliente nel tempo.
Riepilogo
Le immagini responsive sono un ottimo caso d’uso per il progressive enhancement in HTML. Con picture, srcset e sizes puoi offrire file diversi in base al supporto del browser e alle esigenze del dispositivo, senza rinunciare a un fallback semplice e affidabile.
Il punto fondamentale è progettare partendo dal minimo garantito: un’immagine base che funziona ovunque. Da lì aggiungi ottimizzazioni per i browser moderni, migliorando prestazioni e qualità visiva senza compromettere la compatibilità cross-browser.
Se applichi questo metodo con costanza, otterrai pagine più veloci, più stabili e più facili da mantenere. E soprattutto eviterai che un singolo limite del browser rovini l’esperienza dell’utente.
Approfondisci con risorse ufficiali
- MDN Web Docs - picture: documentazione completa sull’elemento picture e sul suo comportamento.
- MDN Web Docs - img: riferimento ufficiale per attributi, fallback e best practice.
- MDN Web Docs - srcset: guida dettagliata alla selezione delle immagini responsive.
- MDN Web Docs - sizes: spiegazione dell’attributo sizes e del suo impatto sul download delle risorse.
- Can I use: utile per verificare rapidamente il supporto cross-browser di picture, srcset, loading e formati immagine.
- HTML Living Standard: specifica ufficiale del comportamento degli elementi HTML.