Introduzione
Quando si parla di compatibilità cross-browser in HTML, uno degli obiettivi più importanti è offrire contenuti affidabili anche quando il browser dell’utente non supporta tutte le funzionalità moderne. Il principio del progressive enhancement aiuta proprio in questo: costruire una base solida che funzioni ovunque, e aggiungere miglioramenti solo dove il browser li supporta.
Un sotto-argomento molto pratico, spesso sottovalutato, è l’uso del tag <picture> per gestire immagini con formati e dimensioni diverse. Questo approccio è utile per migliorare prestazioni, qualità visiva e compatibilità, perché consente di fornire un’immagine di fallback semplice e versioni più avanzate per browser moderni.
In questo tutorial vedremo come usare <picture> in modo corretto, come progettare un fallback robusto e come applicare davvero il progressive enhancement in un caso reale: una card prodotto con immagine ottimizzata per browser diversi e schermi diversi.
Codice completo
<article class="product-card">
<picture>
<!-- Formato moderno per browser compatibili -->
<source
type="image/avif"
srcset="images/prodotto-640.avif 640w, images/prodotto-1280.avif 1280w"
sizes="(max-width: 768px) 100vw, 50vw" />
<source
type="image/webp"
srcset="images/prodotto-640.webp 640w, images/prodotto-1280.webp 1280w"
sizes="(max-width: 768px) 100vw, 50vw" />
<!-- Fallback universale: funziona quasi ovunque -->
<img
src="images/prodotto-1280.jpg"
alt="Scarpe da trekking nere su sfondo chiaro"
width="100%"
height="960"
loading="lazy"
decoding="async" />
</picture>
<h2>Scarpe da trekking Alpine X</h2>
<p>
Modello leggero e resistente, pensato per escursioni in montagna e terreni misti.
</p>
</article>Spiegazione
Il tag <picture> permette di definire più risorse immagine, lasciando al browser la scelta della migliore in base al supporto dei formati e alle caratteristiche del dispositivo. È un caso perfetto di progressive enhancement: il contenuto base è l’elemento <img>, che rimane sempre presente come soluzione di fallback.
1. Il ruolo di <img> come base universale
L’elemento <img> è il cuore della compatibilità. Anche se un browser non supportasse i formati moderni come AVIF o WebP, leggerà comunque il file JPEG indicato in src. Questo significa che l’utente vedrà comunque un’immagine corretta, senza errori di rendering o contenuti mancanti.
Il testo alternativo in alt è fondamentale: non serve solo all’accessibilità, ma anche come fallback informativo se l’immagine non viene caricata. In ottica cross-browser, questo è importante perché problemi di rete, restrizioni del browser o supporto incompleto possono impedire il caricamento dell’immagine.
2. I tag <source> come miglioramento progressivo
Gli elementi <source> non sostituiscono <img>, ma lo arricchiscono. Il browser valuta i type dichiarati e sceglie il primo formato supportato. In questo esempio:
- AVIF viene preferito se supportato, perché offre spesso una compressione migliore.
- WebP è il secondo livello di miglioramento, utile per browser moderni ma meno recenti.
- JPEG resta il fallback finale, compatibile con quasi tutti i browser.
Questa gerarchia è un esempio concreto di progressive enhancement: chi ha un browser moderno riceve un’esperienza migliore, ma nessuno resta escluso.
3. srcset e sizes per immagini responsive
Nel codice, srcset e sizes permettono di servire la risorsa più adatta in base alla larghezza del viewport. Non si tratta solo di compatibilità, ma anche di efficienza: un browser mobile non deve scaricare un file enorme se ne basta uno più piccolo.
La regola:
- srcset elenca più versioni della stessa immagine con la loro larghezza.
- sizes dice al browser quanto spazio occuperà l’immagine nel layout.
Nel nostro esempio, su schermi piccoli l’immagine occupa il 100% della viewport, mentre su schermi più grandi può occupare il 50%. Questo aiuta il browser a scegliere il file più adatto prima ancora di scaricarlo.
4. Perché width e height sono importanti
Attributi come width e height migliorano la stabilità del layout, riducendo i salti di contenuto durante il caricamento. È una buona pratica moderna, ma anche utile per la compatibilità perché evita comportamenti visivi diversi tra browser.
In particolare, alcuni browser gestiscono meglio il calcolo dello spazio riservato all’immagine se le dimensioni sono dichiarate esplicitamente. Questo riduce il rischio di layout instabile, soprattutto in pagine con molte immagini.
5. loading e decoding: miglioramenti graduali
Gli attributi loading="lazy" e decoding="async" sono ottimi esempi di enhancement progressivo. Se il browser li supporta, migliorerà il caricamento. Se non li supporta, l’immagine verrà comunque caricata normalmente.
- loading="lazy" rimanda il caricamento delle immagini fuori viewport.
- decoding="async" aiuta il browser a decodificare l’immagine senza bloccare il rendering.
Questi attributi non sono obbligatori, ma aggiungono valore senza compromettere la compatibilità.
Best practice
- Usa sempre un fallback in <img>: è la base della compatibilità cross-browser.
- Ordina i formati dal più moderno al più universale: AVIF, WebP, poi JPEG o PNG se necessario.
- Inserisci un alt descrittivo: migliora accessibilità e robustezza del contenuto.
- Definisci width e height: aiuta il browser a riservare spazio corretto e riduce i layout shift.
- Usa srcset e sizes solo quando servono davvero: evita complessità inutile su immagini che non cambiano dimensione.
- Testa su browser diversi: soprattutto su versioni meno recenti e su dispositivi mobili reali.
- Non fare affidamento solo sui formati moderni: il fallback deve essere sempre valido e leggibile.
Una buona regola mentale è questa: prima assicurati che il contenuto funzioni ovunque, poi ottimizza per i browser migliori. È il cuore del progressive enhancement.
Riepilogo
Il tag <picture> è uno strumento molto efficace per unire compatibilità cross-browser e progressive enhancement. Ti permette di offrire immagini moderne e ottimizzate ai browser recenti, senza abbandonare quelli che supportano solo formati più tradizionali.
Il punto chiave è che il fallback non è un ripiego, ma una parte progettata del sistema. Con <img> garantisci il contenuto base; con <source> aggiungi miglioramenti progressivi; con srcset, sizes e attributi moderni migliori prestazioni e qualità dell’esperienza.
In pratica, questo approccio ti aiuta a costruire interfacce più resilienti, più veloci e più corrette su browser diversi, senza complicare troppo il codice.
Approfondisci con risorse ufficiali
- MDN Web Docs - <picture>: documentazione completa sull’elemento e sui casi d’uso.
- MDN Web Docs - Responsive images: guida pratica su srcset, sizes e selezione delle immagini.
- WHATWG HTML Living Standard: specifica ufficiale del comportamento degli elementi HTML.
- web.dev - Responsive images: esempi moderni e consigli di ottimizzazione.
- Can I use: utile per verificare rapidamente il supporto dei formati immagine e degli attributi nei browser.
Se vuoi, nel prossimo passo posso scrivere anche un tutorial complementare su responsive images con <picture> e art direction, oppure su fallback HTML per video e media seguendo lo stesso stile didattico.