Perché le immagini dominano il peso della pagina
Un documento HTML tipico con CSS e JavaScript potrebbe trasferire 200–500 KB. Una singola fotografia non ottimizzata può essere di 5–15 MB. Su una connessione mobile con una media di 10–20 Mbps, un’immagine da 10 MB impiega 4–8 secondi a scaricarsi. La maggior parte dei visitatori non aspetterà.
Le immagini influenzano anche i Core Web Vitals — le metriche di Google per l’esperienza di pagina che influenzano il posizionamento. Il Largest Contentful Paint (LCP) misura quanto tempo impiega a renderizzarsi l’elemento visibile più grande. Se quell’elemento è un’immagine hero, il suo tempo di download determina direttamente il tuo punteggio LCP. Un LCP lento danneggia sia l’esperienza utente sia il posizionamento.
I soliti sospetti, e la soluzione per ciascuno
Il caricamento lento delle immagini si riconduce quasi sempre a uno di questi. Ciascuno ha una soluzione rapida e un beneficio significativo:
| Causa | Soluzione | Risparmio tipico |
|---|---|---|
| Formato sbagliato (foto PNG) | Convertire in WebP o JPG | 80% o più |
| Caricamento a piena risoluzione | Ridimensionare a circa 2× la larghezza di visualizzazione | 70–80% |
| Compressione debole o saltata | Esportare a qualità 75–85 | 3–5× vs qualità 95 |
| Nessun caricamento ritardato | Aggiungere loading=lazy sotto la piega | Meno dati al primo caricamento |
| HEIC servito grezzo | Convertire prima in WebP o JPG | Evita immagini rotte |
Il formato sbagliato per il tipo di contenuto
Usare il PNG per le fotografie è uno degli errori di immagine più comuni sul web. Il PNG è senza perdita e preserva ogni pixel, il che conta per loghi e screenshot ma non per le foto. Una fotografia salvata come PNG può essere di 15–25 MB. La stessa foto come JPEG ad alta qualità è di 2–5 MB. Come WebP può essere sotto i 2 MB con una qualità visibile identica.
È un errore anche il contrario: usare il JPEG per screenshot, diagrammi o immagini con testo. Il JPEG introduce artefatti visibili sui bordi netti e sulle aree di colore piatto, richiedendo impostazioni di qualità elevate che producono file grandi. Il PNG o il WebP gestisce questo contenuto più piccolo e più pulito.
Caricare immagini alla piena risoluzione della fotocamera
Una foto da uno smartphone moderno è di 12–50 megapixel e larga 3000–8000 pixel. La maggior parte delle pagine web mostra le immagini di contenuto a 600–1600 pixel di larghezza. Quando carichi il file della fotocamera a piena risoluzione sul tuo sito, il browser scarica tutti gli 8000 pixel e li scala a 800 pixel per la visualizzazione. Stai trasferendo 10× più dati del necessario.
Ridimensionare l’immagine alla larghezza massima a cui sarà mai mostrata — circa il doppio della larghezza di visualizzazione CSS per gli schermi ad alta densità — prima del caricamento è spesso la singola maggiore riduzione di dimensione disponibile. Un’immagine di 4000 pixel ridimensionata a 1600 pixel è tipicamente il 70–80% più piccola prima di applicare qualsiasi compressione di qualità.
Saltare la compressione o usare l’impostazione di qualità sbagliata
Molti sistemi di gestione dei contenuti accettano e memorizzano le immagini caricate senza compressione. WordPress, Squarespace, Shopify e piattaforme simili possono applicare un po’ di compressione per impostazione predefinita, ma le impostazioni variano e sono spesso conservative. L’originale caricato può essere molto più grande del necessario.
Per JPEG e WebP, un’impostazione di qualità di 75–85 è appropriata per la maggior parte delle fotografie mostrate su una pagina web. Sotto 75, gli artefatti di compressione diventano visibili. Sopra 85, la dimensione file aumenta significativamente con un miglioramento visivo decrescente. Molti sviluppatori impostano per default la qualità 95 o 100, che produce file 3–5× più grandi della qualità 80 senza differenza visibile alle dimensioni di visualizzazione normali.
Nessun caricamento ritardato sulle immagini sotto la piega
Per impostazione predefinita, i browser tentano di caricare tutte le immagini di una pagina durante il rendering iniziale, incluse le immagini molto al di sotto dell’area visibile (la piega). Per una lunga pagina di articolo con 10 immagini, il browser prova a scaricarle tutte e 10 simultaneamente anche se il lettore potrebbe non scorrere mai per vederne la maggior parte.
L’attributo loading="lazy" su un tag <img> indica al browser di rinviare il caricamento dell’immagine finché non sta per entrare nel viewport, il che riduce significativamente i dati trasferiti al caricamento iniziale della pagina. Applicalo a tutte le immagini che non sono visibili nel primo viewport. Non applicarlo all’immagine hero né a nessuna immagine sopra la piega — quelle devono caricarsi il più velocemente possibile per un buon punteggio LCP.
Per l’immagine hero in particolare, aggiungi fetchpriority="high" così che il browser la recuperi prima degli script e delle altre immagini. Usalo su una sola immagine per pagina — l’elemento LCP — e lascia il resto al valore predefinito.
<img src="photo.webp" loading="lazy" alt="description" /><img src="hero.webp" fetchpriority="high" width="1200" height="675" alt="hero" />
Attributi width e height mancanti
Quando un browser inizia a renderizzare una pagina, non conosce ancora le dimensioni delle immagini che non ha scaricato. Senza attributi width e height espliciti nell’HTML, il browser non può riservare lo spazio corretto, e il layout della pagina si sposta mentre le immagini si caricano — un fastidioso salto visivo noto come Cumulative Layout Shift (CLS). Aggiungere dimensioni esplicite previene lo spostamento del layout e permette al browser di iniziare il layout senza aspettare il download dell’immagine:
<img src="photo.webp" width="800" height="533" alt="description" />
HEIC o formati insoliti caricati direttamente
Gli iPhone scattano in HEIC per impostazione predefinita. Se i file HEIC vengono caricati su un sito web e serviti senza conversione, non si mostreranno in Chrome, Firefox ed Edge. I visitatori su Windows e Android vedono un’icona di immagine rotta. Converti sempre l’HEIC in JPEG o WebP prima di pubblicare.
Una checklist pratica di ottimizzazione
PhotoTools gestisce i passi di conversione del formato, ridimensionamento e compressione nel tuo browser senza caricare nulla su un server. Elabora le immagini prima del caricamento per mantenere le tue pagine veloci, e segui questa checklist:
- Usa WebP per le fotografie e la maggior parte delle immagini web. Usa PNG per grafica con testo o trasparenza.
- Ridimensiona le immagini alla larghezza massima a cui verranno effettivamente mostrate, circa 2× la larghezza di visualizzazione CSS per gli schermi retina.
- Comprimi JPEG e WebP a qualità 75–85 per le immagini web standard.
- Aggiungi loading="lazy" a tutte le immagini sotto la piega.
- Aggiungi attributi width e height espliciti a tutte le immagini.
- Converti i file HEIC in JPEG o WebP prima di caricare.
- Verifica le dimensioni file finali: un’immagine web mostrata a 800 pixel CSS di larghezza dovrebbe essere sotto i 200 KB nella maggior parte dei casi.