Come Ottimizzare le Immagini per il Sito e Migliorare il PageSpeed

La velocità di caricamento è un fattore di posizionamento confermato da Google dal 2018 per desktop e dal 2021 per mobile. Inoltre, influisce direttamente sul tasso di conversione: ogni secondo in più di caricamento aumenta l'abbandono della pagina fino al 32%, secondo dati dello stesso Google. E nell'e-commerce, studi di Portent mostrano che le pagine che si caricano in 1 secondo convertono fino a 3 volte di più rispetto a pagine che impiegano 5 secondi.

Le immagini sono tipicamente responsabili del 50–80% del peso totale di una pagina web. Ottimizzarle correttamente è quindi l'intervento di maggiore impatto sulle prestazioni di qualsiasi sito.

Cosa valuta il PageSpeed Insights nelle immagini

Google PageSpeed Insights (PSI) analizza la tua pagina e segnala problemi relativi alle immagini in diverse categorie. I più comuni sono:

• "Fornisci immagini in formati di nuova generazione": compare quando il sito usa JPG o PNG dove WebP (o AVIF) ridurrebbe significativamente la dimensione.
• "Dimensiona correttamente le immagini": compare quando l'immagine inviata al server è più grande dello spazio in cui viene mostrata. Esempio: caricare una foto di 2000px per mostrarla a 400px.
• "Rimanda le immagini fuori schermo": compare quando le immagini sotto la piega vengono caricate insieme al resto della pagina, invece che solo quando l'utente scorre fino a esse (lazy loading).
• "Codifica le immagini in modo efficiente": compare quando la compressione applicata alle immagini ha ancora margine di riduzione senza perdita di qualità percepibile.
• "Immagine LCP": identifica quale immagine è il Largest Contentful Paint della pagina — l'elemento principale che determina una delle metriche Core Web Vitals.

I 6 principi di ottimizzazione delle immagini per il web

1. Usa il formato giusto per ogni tipo di immagine

La scelta del formato è la decisione di maggiore impatto ancora prima di qualsiasi compressione:

Il WebP produce file più piccoli del 25–35% rispetto a JPG e del 20–30% rispetto a PNG con qualità visiva equivalente. Nel 2026, la compatibilità supera il 97% dei browser in uso — non c'è più alcuna ragione tecnica per evitarlo nei nuovi siti.

2. Comprimi senza rinunciare alla qualità visibile

La compressione è il processo di riduzione della dimensione del file mantenendo le dimensioni dell'immagine. Per le foto JPG, ridurre la qualità dal 100% all'80% produce file 5–10 volte più piccoli con una differenza impercettibile sullo schermo. Questo è l'intervallo ideale per il web.

Riferimenti pratici di peso per tipo di immagine:

• Hero / banner principale: sotto i 200 KB
• Foto di prodotto (e-commerce): 50–150 KB
• Immagine di articolo del blog: 50–120 KB
• Thumbnail / miniatura: 10–30 KB
• Logo (PNG/WebP): sotto i 30 KB
• Icone SVG: sotto i 5 KB

3. Carica le immagini nelle dimensioni reali di visualizzazione

Questo è l'errore più comune e anche uno dei più impattanti: caricare immagini molto più grandi dello spazio in cui vengono mostrate. Il browser scarica l'immagine completa e poi scarta i pixel in eccesso durante il rendering.

Esempi del costo di questo errore:

• Una foto di prodotto di 3000×3000px mostrata in un riquadro di 600×600px: il browser scarica 9 milioni di pixel e ne usa solo 360 mila — il 96% è sprecato.
• Un banner largo 4000px su un sito con layout massimo di 1440px: il 63% dei pixel scaricati viene scartato immediatamente.

La regola è semplice: l'immagine caricata sul server deve avere al massimo il doppio delle dimensioni di visualizzazione (il doppio per coprire gli schermi Retina/HiDPI). Per uno spazio largo 600px, carica al massimo 1200px.

Usa il Ridimensionatore di Immagini di ImageTools per regolare le dimensioni prima del caricamento, inserendo i valori esatti in pixel o in percentuale.

4. Implementa il lazy loading

Il lazy loading è la tecnica di caricare le immagini solo quando stanno per entrare nell'area visibile dello schermo, invece di scaricare tutte le immagini della pagina in una volta al caricamento iniziale. L'impatto è significativo: in pagine con molte immagini (come elenchi di prodotti o articoli lunghi), il lazy loading può ridurre il peso iniziale della pagina del 60–80%.

L'implementazione più semplice è nativa nell'HTML moderno — basta aggiungere l'attributo loading="lazy" ai tag immagine:

<!-- Immagine che deve caricarsi immediatamente (sopra la piega) -->
<img src="banner-principale.webp" alt="Banner" loading="eager">

<!-- Immagini che possono aspettare (sotto la piega) -->
<img src="prodotto-1.webp" alt="Prodotto 1" loading="lazy">
<img src="prodotto-2.webp" alt="Prodotto 2" loading="lazy">

Importante: non applicare mai loading="lazy" all'immagine principale sopra la piega (hero, banner, prima foto di prodotto). Questo ritarda l'LCP — la metrica più importante dei Core Web Vitals — e danneggia direttamente il punteggio su PageSpeed.

5. Definisci width e height nei tag immagine

Quando il browser inizia a caricare una pagina, costruisce il layout prima di conoscere la dimensione delle immagini. Se width e height non sono definiti, il browser non riserva lo spazio corretto — e quando l'immagine si carica, il layout "salta", spostando testo e pulsanti. Questo è ciò che PageSpeed misura come Cumulative Layout Shift (CLS), un altro Core Web Vital.

<!-- Senza dimensioni: causa layout shift -->
<img src="prodotto.webp" alt="Prodotto">

<!-- Con dimensioni: riserva lo spazio corretto fin dall'inizio -->
<img src="prodotto.webp" alt="Prodotto" width="600" height="600">

I valori di width e height nell'HTML non devono corrispondere alla dimensione di visualizzazione visiva — definiscono solo la proporzione. Il CSS si occupa della dimensione di visualizzazione.

6. Usa immagini responsive con srcset

Il tag srcset permette di fornire versioni diverse di un'immagine per dispositivi diversi — inviando un'immagine più piccola per i cellulari e più grande per i desktop. Il browser sceglie automaticamente la versione più adatta allo schermo dell'utente.

<img
  src="prodotto-800.webp"
  srcset="prodotto-400.webp 400w,
          prodotto-800.webp 800w,
          prodotto-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 900px) 800px,
         1200px"
  alt="Prodotto"
  width="800"
  height="800"
  loading="lazy"
>

Per gli e-commerce con molte foto di prodotto, srcset può ridurre il volume di dati trasferiti agli utenti mobile del 40–60%.

Checklist completa di ottimizzazione delle immagini

Usa questa lista prima di pubblicare qualsiasi pagina o aggiornare immagini esistenti:

• ☐ Immagini in WebP (o SVG per i vettoriali)
• ☐ Compressione applicata — foto sotto i 150 KB quando possibile
• ☐ Dimensioni corrette — non superiori al doppio dello spazio di visualizzazione
• ☐ loading="lazy" su tutte le immagini sotto la piega
• ☐ loading="eager" (o nessun attributo) sull'immagine principale sopra la piega
• ☐ width e height definiti su tutti i tag <img>
• ☐ Attributo alt descrittivo su tutte le immagini (accessibilità + SEO)
• ☐ srcset per immagini mostrate a dimensioni molto diverse tra mobile e desktop
• ☐ Immagine LCP senza loading="lazy" e con fetchpriority="high" se possibile

Ottimizzazione per piattaforma

WordPress

WordPress converte automaticamente in WebP a partire dalla versione 6.1 se il server lo supporta. Per esserne sicuro: installa un plugin di ottimizzazione come Imagify, ShortPixel o Smush — comprimono, convertono in WebP e aggiungono lazy loading automaticamente alle immagini già presenti nella libreria multimediale.

Shopify

Shopify converte automaticamente le immagini in WebP e serve la versione corretta per dispositivo dal 2021. Ciò che il negoziante deve controllare manualmente è la dimensione delle immagini caricate — si consiglia 2048×2048px per le foto di prodotto, che Shopify ridimensiona per ogni contesto di visualizzazione.

Wix, Squarespace e altri builder

La maggior parte dei builder moderni applica già compressione e lazy loading automaticamente. Ciò che dipende ancora dall'utente è caricare immagini con dimensioni ragionevoli — caricare foto da fotocamera da 8 MB sovraccarica il server e può risultare in varianti più grandi del necessario.

Siti HTML/CSS puri o framework (Next.js, Nuxt, ecc.)

In questi casi, l'intera ottimizzazione è responsabilità dello sviluppatore. Il componente <Image> di Next.js, ad esempio, automatizza lazy loading, srcset e conversione in WebP. Per i framework senza questa astrazione, è necessaria l'ottimizzazione manuale seguendo la checklist sopra.

Come misurare l'impatto delle ottimizzazioni

Dopo aver applicato le ottimizzazioni, misura il risultato con questi strumenti:

• Google PageSpeed Insights (pagespeed.web.dev) — analisi completa con diagnostica per elemento, separata per mobile e desktop.
• Google Search Console → Rapporto Esperienza Pagina — mostra lo stato dei Core Web Vitals con dati reali degli utenti del tuo sito.
• WebPageTest.org — analisi tecnica dettagliata con waterfall di caricamento, utile per identificare quale immagine specifica sta ritardando l'LCP.
• Chrome DevTools → Network — filtra per "Img" per vedere tutte le immagini caricate, le loro dimensioni e i tempi di download.

Domande frequenti