Come far caricare più velocemente le immagini del tuo sito (senza sfocature)

Perché il peso delle immagini conta

La cosa più lenta di una pagina è di solito la sua immagine più grande, ed è spesso ciò che il browser misura come Largest Contentful Paint (LCP). I Core Web Vitals di Google considerano buono un LCP sotto i 2,5 secondi. Una foto principale da 3 MB su una connessione mobile può consumare da sola tutto quel budget.

1. Servi le immagini alla dimensione con cui vengono mostrate

Non ha senso inviare una foto da 4000 pixel a uno spazio che la mostra larga 800 pixel. Come regola pratica, un'immagine dovrebbe essere al massimo larga circa il doppio di quanto viene mostrata, il che la mantiene nitida sugli schermi ad alta densità. Larghezze tipiche: 1600–2000 px per un'immagine principale a tutta larghezza, 800–1200 px per le immagini di un articolo, 300–400 px per le miniature.

2. Usa un formato moderno

I file WebP sono in genere più leggeri del 25–35% rispetto al JPG a qualità simile, e tutti i browser attuali li supportano. Usa il PNG solo dove servono grafica senza perdita o trasparenza. Se devi supportare software più vecchio, tieni una versione JPG di riserva. Vedi JPG vs PNG vs WebP per i dettagli.

3. Comprimi a un peso ragionevole

Questi sono obiettivi indicativi, non regole: un'immagine principale sotto circa 200 KB, le immagini negli articoli sotto circa 100 KB e le miniature sotto circa 30 KB. Imposta l'obiettivo e lascia che lo strumento trovi la qualità più alta che lo rispetta, invece di andare a tentativi con un cursore.

4. Carica in modo differito le immagini sotto la piega

<img src="photo.webp" alt="Describe the image"
     width="800" height="600" loading="lazy">

Il caricamento differito (lazy loading) rimanda le immagini finché il visitatore non scorre vicino a loro. Non applicarlo all'immagine principale in cima alla pagina — quella deve caricarsi subito, perché di solito è l'elemento LCP.

5. Imposta sempre larghezza e altezza

Con le dimensioni nell'HTML, il browser riserva la quantità giusta di spazio prima che l'immagine arrivi, così la pagina non salta mentre si carica (quel salto si misura come Cumulative Layout Shift). Un attributo alt descrittivo aiuta l'accessibilità e la ricerca per immagini.

6. Offri più misure con srcset

<img
  src="photo-800.webp"
  srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Describe the image"
  width="800" height="600">

Il browser sceglie il file più piccolo che sia abbastanza nitido per lo schermo del visitatore, così un telefono non scarica la versione per desktop.

Come controllare il tuo lavoro

Fai analizzare la pagina da PageSpeed Insights o da Lighthouse negli strumenti per sviluppatori di Chrome. Entrambi segnalano le immagini sovradimensionate e non ottimizzate e stimano i byte esatti che risparmieresti.

Preparare i file

1. Converti l'immagine in WebP.
2. Imposta la larghezza che ti serve nello strumento di ridimensionamento — con le proporzioni bloccate.
3. Imposta un peso massimo e controlla il risultato con il cursore prima/dopo.
4. Esporta un file per ogni larghezza che intendi usare in srcset.

Lavora dall'originale per ogni esportazione. Comprimere una copia già compressa fa perdere più qualità che comprimere una volta sola la sorgente.

Domande frequenti