23 LUG 2026

Immagini e velocità: WebP, lazy-load e Core Web Vitals

Se il vostro sito è lento, con ogni probabilità la colpa più grossa ce l’hanno le immagini. Su gran parte delle pagine sono il contenuto che pesa di più, molto più del testo o del codice: una sola foto caricata a piena risoluzione può pesare quanto decine di pagine scritte. La buona notizia è che le immagini sono anche il punto dove ottimizzare rende di più e costa meno: il formato giusto, il caricamento pigro e le dimensioni corrette bastano a trasformare una pagina lenta in una svelta. Vediamo come ottimizzare le immagini del sito con WebP, lazy-load e un occhio ai Core Web Vitals.

Perché le immagini pesano così tanto.

Aprite una pagina qualsiasi e, quasi sempre, la parte più pesante da scaricare sono le immagini. I rapporti sullo stato del web lo confermano da anni: sono in cima alla classifica dei byte trasferiti, spesso più di tutto il resto messo insieme. Il motivo è banale — una foto ricca di dettagli contiene un’enorme quantità di informazione — ma le conseguenze no: ogni megabyte in più è tempo di attesa, soprattutto per chi naviga da smartphone con una rete lenta.

Il guaio è che molte immagini sono più pesanti del necessario, per pura disattenzione. Foto caricate a 4000 pixel di larghezza e poi mostrate in un riquadro da 400; formati vecchi e ingombranti dove ne basterebbe uno moderno; nessuna compressione. È peso morto: informazione che l’utente non vedrà mai, ma che il suo telefono deve comunque scaricare. Ottimizzare le immagini vuol dire togliere questo peso inutile, senza che si veda la differenza.

WebP (e AVIF): il formato giusto.

Il primo intervento è cambiare formato. I vecchi JPEG e PNG funzionano, ma pesano: i formati moderni come WebP — e il più recente AVIF — offrono la stessa qualità visiva occupando molto meno spazio, spesso il 25-35% in meno rispetto a un JPEG equivalente, a volte molto di più. Per l’occhio non cambia nulla; per il tempo di caricamento è una differenza enorme. Oggi WebP è supportato da tutti i browser diffusi: non c’è più ragione di spedire file inutilmente grandi.

Il bello è che non serve rifare le foto: si convertono quelle esistenti, idealmente in modo automatico quando vengono caricate, servendo il formato moderno a chi lo supporta. È uno degli interventi con il miglior rapporto tra fatica e risultato: si tocca il file, non il design, e la pagina si alleggerisce di colpo. La compressione, dosata bene, fa il resto senza intaccare la nitidezza percepita.

Misura gratis peso della pagina e velocità del vostro sito →

Lazy-load: caricare solo ciò che serve.

La seconda mossa è non caricare tutto subito. Quando aprite una pagina lunga, le immagini in fondo — quelle che vedrete solo scorrendo, se scorrerete — non servono nel primo istante. Il lazy-load («caricamento pigro») le rinvia: il browser scarica prima ciò che è visibile e carica il resto solo quando l’utente si avvicina. Il risultato è una pagina che appare pronta molto prima, perché non aspetta immagini che nessuno sta ancora guardando.

Oggi il lazy-load è quasi gratis da attivare: basta un attributo standard sull’immagine, `loading=”lazy”`, e i browser fanno il resto. Attenzione a una sola cosa: non va messo sull’immagine più importante in cima alla pagina, quella che l’utente vede subito — rinviarla peggiorerebbe la velocità percepita invece di migliorarla. Il lazy-load è per ciò che sta sotto la piega, non per il protagonista.

Dimensioni giuste e Core Web Vitals.

Terzo pilastro: servire ogni immagine nella misura in cui verrà mostrata. Non ha senso mandare una foto da 3000 pixel a uno schermo che ne mostrerà 600. Le tecniche per farlo — immagini responsive che adattano la risoluzione al dispositivo — evitano di scaricare pixel che nessuno vedrà. E vanno sempre indicate larghezza e altezza dell’immagine, così il browser riserva lo spazio in anticipo e la pagina non «salta» mentre carica: quel salto ha persino una metrica, il CLS dei Core Web Vitals.

Qui si chiude il cerchio con la velocità misurata da Google. L’immagine grande in cima, di solito, è l’elemento che decide l’LCP — la metrica che misura quanto ci mette a comparire il contenuto principale. Alleggerirla con WebP, darle le dimensioni giuste e non metterla in lazy-load è spesso il singolo intervento che fa passare una pagina dall’arancione al verde. Immagini e Core Web Vitals sono, in gran parte, lo stesso problema.

Leggere, non pesare.

Ottimizzare le immagini non è un vezzo da tecnici: è il modo più rapido e concreto di rendere un sito veloce, e quindi più gradito ai visitatori e a Google. Formato moderno, caricamento pigro, dimensioni giuste: tre interventi che non toccano il design ma cambiano l’esperienza, soprattutto su mobile e su reti lente — cioè per la maggioranza delle persone che oggi vi visitano.

Nei siti che costruiamo le immagini vengono trattate così di serie: convertite nei formati moderni, servite nella misura giusta, con il lazy-load dove serve. Non è un extra da vendere a parte, è il minimo perché una pagina piena di foto resti leggera. Un sito bello ma pesante non è un bel sito: è una pagina che i visitatori non aspettano di vedere caricare.

Restyling e migrazione: rimettere in forma un sito lento →

Leggi anche: INP, la nuova metrica dei Core Web Vitals →

Fonti.

Le cifre e le affermazioni di questo articolo vengono da qui. Sono prime fonti, non riassunti: apritele e verificate.

• web.dev — Learn Images (Google)Il corso ufficiale sulle immagini per il web: formati, compressione, immagini responsive. Pratico e aggiornato.
• web.dev — servire immagini in WebPPerché e come usare WebP: la stessa qualità visiva con file molto più leggeri dei vecchi JPEG e PNG.
• MDN — Lazy loadingLa guida di riferimento al caricamento pigro: come funziona l’attributo loading=”lazy” e quando (non) usarlo.
• web.dev — Largest Contentful Paint (LCP)La metrica dei Core Web Vitals più legata alle immagini: spesso è la foto in cima a decidere il vostro LCP.

Misura gratis peso e velocità del vostro sito →