Perché le immagini rallentano i siti
Le immagini rappresentano mediamente il 60-70% del peso totale di una pagina web. Un'immagine da 3MB caricata su mobile con connessione lenta può far aspettare l'utente 10+ secondi. Google penalizza i siti lenti nei risultati di ricerca attraverso i Core Web Vitals, in particolare il Largest Contentful Paint (LCP) che misura il tempo di caricamento dell'elemento più grande nella viewport — quasi sempre un'immagine.
Step 1: scegli il formato giusto
La scelta del formato è la decisione più impattante:
- WebP: usa questo per default nel 2026. È 25-35% più leggero di JPG con qualità equivalente, supporta trasparenza come PNG e ha supporto del 97%+ dei browser
- AVIF: ancora più efficiente di WebP (30-50% più leggero), ma supporto browser ancora in crescita. Ottimo come formato principale con WebP come fallback
- JPG: per fotografie quando WebP non è disponibile
- PNG: solo quando serve trasparenza e WebP non è un'opzione
- SVG: sempre per loghi, icone e grafiche vettoriali — scala perfettamente a qualsiasi dimensione
- GIF: evita quando possibile. Un video MP4 o WebM è 5-10x più leggero per le stesse animazioni
💡 Consiglio pratico: usa l'elemento HTML <picture> per servire AVIF con WebP come fallback e JPG per browser molto vecchi — tutto in un unico tag.
Step 2: comprimi senza perdere qualità
La qualità di un JPG o WebP non deve necessariamente essere al 100%. Test visivi mostrano che:
- Qualità 80-85%: indistinguibile dalla qualità 100% per la maggior parte degli utenti, con file 3-4x più leggeri
- Qualità 65-75%: piccola perdita percettibile solo su sfondi piatti o testi — ottimo per foto
- Qualità 50-60%: perdita visibile, da usare solo quando il peso è critico
Usa ToolsCove per comprimere immagini nel browser senza caricarle su server esterni.
Step 3: ridimensiona alle dimensioni reali
Uno degli errori più comuni: caricare un'immagine 3000×2000 pixel in un contenitore che la mostra a 600×400. Il browser scarica comunque l'immagine intera e poi la ridimensiona via CSS.
Regola: le dimensioni dell'immagine sul disco devono corrispondere alle dimensioni massime con cui viene visualizzata, moltiplicato per 2 per gli schermi Retina/HiDPI. Un'immagine mostrata a 600px deve essere 1200px × il suo rapporto d'aspetto.
Step 4: usa il lazy loading
Il lazy loading carica le immagini solo quando stanno per entrare nel viewport dell'utente, risparmiando banda e accelerando il caricamento iniziale. Si attiva con un solo attributo HTML:
<img src="foto.webp" loading="lazy" alt="descrizione">
Non applicare il lazy loading all'immagine hero o al logo — queste devono caricarsi subito. Applicalo a tutte le immagini che si trovano below the fold.
Step 5: specifica sempre width e height
Aggiungere le dimensioni ai tag img previene il Cumulative Layout Shift (CLS): il fastidioso "salto" del contenuto quando le immagini finiscono di caricarsi. Il browser riserva lo spazio corretto prima che l'immagine arrivi.
Step 6: ottimizza il testo alternativo per la SEO
Ogni immagine deve avere un attributo alt descrittivo. Serve all'accessibilità (screen reader) e aiuta Google a capire il contenuto. Non riempire di keyword: descrivi semplicemente cosa mostra l'immagine. Le immagini puramente decorative possono avere alt="".
Checklist rapida
- ✅ Formato WebP (o AVIF) per tutte le nuove immagini
- ✅ Compressione qualità 80-85% per foto, lossless per grafica
- ✅ Dimensioni corrette: mai più grandi del necessario × 2 per Retina
- ✅
loading="lazy"su tutte le immagini below the fold - ✅
widtheheightspecificati su ogni tag img - ✅ Attributo
altdescrittivo su tutte le immagini - ✅ SVG per loghi e icone
FAQ
WebP è la scelta migliore per la maggior parte delle immagini web: file 25-35% più leggeri di JPG con qualità equivalente. AVIF è ancora più efficiente ma ha supporto browser ancora in crescita.
Per immagini nel corpo di un articolo: sotto i 150-200 KB. Per immagini hero: sotto i 300-400 KB. Per thumbnail: sotto i 30 KB. Usa Google PageSpeed Insights per analisi specifiche del tuo sito.
Il lazy loading ritarda il caricamento delle immagini fino a quando non entrano nel viewport. Si attiva con l'attributo loading="lazy" sui tag img. È supportato nativamente da tutti i browser moderni.
Sì, indirettamente. Le immagini pesanti rallentano il sito peggiorando i Core Web Vitals (LCP in particolare), che sono un fattore di ranking. Il testo alternativo contribuisce anche alla comprensione dei contenuti da parte di Google.