Come ottimizzare le immagini per il tuo sito web: guida completa
Le immagini rappresentano circa il 40% del peso totale di una pagina web media. Ottimizzale correttamente e puoi dimezzare le dimensioni della pagina, raggiungere un LCP inferiore a 2,5 secondi e migliorare il posizionamento nei motori di ricerca. Ecco i quattro passi da seguire.
Perché l'ottimizzazione delle immagini è fondamentale
Secondo HTTP Archive, la pagina web mediana pesa circa 2,5 MB su mobile, di cui circa 1 MB per le immagini. Il LCP di Google misura la velocità del caricamento dell'elemento visibile più grande — spesso un'immagine hero. Un LCP superiore a 2,5 secondi è classificato come "scarso" e penalizza il posizionamento.
Passo 1: scegliere il formato giusto
Il formato è il fattore con l'impatto maggiore sulla dimensione finale. Ecco l'albero decisionale consigliato:
- Fotografia / immagine hero → WebP lossy (qualità 80-85) o AVIF (qualità 65-75)
- Logo / icona vettoriale → SVG (scalabile, piccolo, nessuna perdita)
- Grafica con trasparenza → WebP lossless o PNG
- Screenshot con testo → PNG (il JPEG sfuoca il testo)
- Animazione → WebP animato o AVIF animato (molto più leggeri del GIF)
Puoi convertire JPG in WebP o convertire in AVIF con Vizua.
Passo 2: ridimensionare alle dimensioni di visualizzazione
Non servire mai un'immagine più larga del suo contenitore. Se il contenitore è 800px e l'immagine è 2400px, stai trasferendo 9 volte più dati del necessario. Ridimensiona prima di comprimere con lo strumento di ridimensionamento di Vizua.
Per siti responsive, considera gli attributi srcset e sizes in HTML: permettono al browser di scegliere automaticamente la versione dell'immagine più adatta alla viewport corrente.
Passo 3: comprimere con la qualità giusta
Una volta scelto il formato e ridimensionato, comprimi:
- JPEG / WebP lossy: qualità 75-85 per uso web
- AVIF: qualità 60-75 (la scala è diversa da JPEG)
- PNG: comprimi senza perdita con Comprimi PNG
Il compressore JPEG di Vizua include anteprima in tempo reale — puoi vedere la qualità prima di scaricare.
Passo 4: consegnare in modo efficiente
Anche con immagini ottimizzate, il modo in cui le carichi nel HTML fa la differenza:
fetchpriority="high"sull'immagine hero — segnala al browser di priorizzzarne il downloadloading="lazy"sulle immagini sotto la piega — rimanda il download fino al momento in cui servonowidtheheightsu ogni immagine — previene il layout shift (CLS)altdescrittivo su ogni immagine — accessibilità e SEO
Strumenti Vizua per l'ottimizzazione
Vizua offre tutti gli strumenti necessari: comprimi JPEG, comprimi PNG, comprimi WebP, ridimensiona, converti in WebP, converti in AVIF. Tutto elaborato localmente nel browser.
Qual è il miglior formato immagine per i siti web?
WebP è la scelta predefinita migliore nel 2026. Produce file del 25-35% più piccoli rispetto a JPEG a parità di qualità, supporta la trasparenza e funziona in oltre il 97% dei browser. Per la massima compressione, AVIF riduce ulteriormente del 20-30% rispetto a WebP.
Quanto rallentano le immagini non ottimizzate?
Le immagini rappresentano circa il 40% del peso totale di una pagina web. Una singola immagine hero non ottimizzata può portare il LCP (Largest Contentful Paint) oltre i 4 secondi — Google classifica un LCP sopra 2,5 secondi come "scarso" e lo penalizza nel ranking.
Devo usare il lazy-loading su tutte le immagini?
No. Usa loading="lazy" solo per le immagini sotto la piega (not above the fold). Per l'immagine hero e le immagini visibili immediatamente al caricamento, usa invece fetchpriority="high" — il lazy-loading sulle immagini above-the-fold peggiora il LCP.
Ottimizza le tue immagini ora
Gratuito, privato, senza registrazione. Tutto funziona nel tuo browser.