Usa l'elemento HTML '<'picture> per fornire formati moderni con fallback automatico — i browser scelgono il primo formato supportato:
<picture> <!-- Best compression (AVIF) — ~95% browser support --> <source srcset="image.avif" type="image/avif" /> <!-- Excellent fallback (WebP) — ~97% browser support --> <source srcset="image.webp" type="image/webp" /> <!-- Universal fallback (JPEG) — 100% support --> <img src="image.jpg" alt="Product photo" width="800" height="600" /> </picture>
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>
srcset per diverse larghezze del viewportloading="lazy" per le immagini below-the-foldPer approfondire l'ottimizzazione, consulta la nostra guida all'Ottimizzazione delle Immagini.
AVIF offre la migliore compressione (20-50% migliore di WebP, 50-80% migliore di JPEG) ma ha un supporto browser leggermente inferiore a WebP. WebP è supportato da tutti i browser moderni (95%+ a livello globale). Usa l'elemento '<'picture> con AVIF come sorgente principale, WebP come fallback e JPEG/PNG come fallback finale.
Usa PNG quando hai bisogno di: (1) trasparenza/canale alfa, (2) qualità senza perdita per screenshot o immagini ricche di testo, (3) immagini con bordi netti come loghi o diagrammi. Usa JPEG per le foto dove alcuni dati colore possono essere scartati.
SVG è ideale per loghi, icone e illustrazioni. Basato su vettori significa nitido a qualsiasi risoluzione e piccola dimensione file. Se SVG non è possibile, usa WebP o PNG con trasparenza.
Usa l'elemento <picture>: prima <source type='image/avif'>, poi WebP e infine JPEG/PNG come elemento <img>. I browser selezionano automaticamente il formato supportato.