Come ottimizzare le immagini per i siti web
Le immagini costituiscono solitamente la maggior parte del peso di una pagina. Cinque decisioni risolvono la maggior parte del problema.
Aggiornato il 1 settembre 2026
Le immagini sono il maggior contributo al peso della pagina sulla maggior parte dei siti, e l'elemento Largest Contentful Paint è un'immagine sulla maggior parte delle pagine. Ottimizzarle è il lavoro di performance con il più alto impatto disponibile, e la maggior parte di esso riguarda decisioni piuttosto che strumenti.
Questo è l'ordine che conta, dal maggiore al minore effetto.
Passaggi
- 1
1. Servi le dimensioni corrette
Misura la larghezza CSS massima che l'immagine occupa ed esporta a circa il doppio per display ad alta densità. Un'immagine hero a 1200 pixel CSS necessita di una sorgente di 2400px, non di un originale della fotocamera di 6000px. Questo singolo passaggio di solito supera tutto il resto combinato.
- 2
2. Usa WebP, con AVIF dove possibile
WebP è il 25–35% più piccolo di JPEG a parità di qualità ed è supportato ovunque. AVIF va ancora oltre ma codifica più lentamente. Mantieni un fallback JPEG se hai bisogno di supportare client molto vecchi.
- 3
3. Imposta la qualità in base al contenuto, non all'abitudine
75–85 per le fotografie. Più alto per la grafica con bordi netti, dove gli artefatti di compressione sono più visibili. Controlla il risultato alla dimensione di visualizzazione reale.
- 4
4. Imposta sempre larghezza e altezza
Le dimensioni esplicite consentono al browser di riservare spazio prima che l'immagine si carichi, il che previene lo spostamento del layout. Questa è una correzione del Cumulative Layout Shift che non costa nulla.
- 5
5. Caricamento lazy sotto la piega, mai sopra
Aggiungi loading="lazy" alle immagini più in basso nella pagina. Non caricare in lazy-load l'immagine LCP, ciò ritarda esattamente ciò che viene misurato.
Rimuovi i metadati all'esportazione
I profili colore EXIF e incorporati aggiungono peso senza alcun beneficio di rendering sul web.
Usa SVG per loghi e icone
Un logo vettoriale è solitamente di pochi kilobyte e rimane nitido a ogni dimensione e densità.