Ottimizza le immagini per i Core Web Vitals

Come le immagini influenzano i Core Web Vitals

Le immagini sono responsabili del Largest Contentful Paint sull'85% delle pagine desktop e sul 76% delle pagine mobile, secondo il Web Almanac 2025. Questo rende l'ottimizzazione delle immagini la singola cosa più d'impatto che puoi fare per i tuoi Core Web Vitals. Ma le immagini non influenzano solo la velocità di caricamento. Possono causare layout shift e, su pagine ricche di immagini, persino rallentare l'interattività. Questa guida copre ogni aspetto: dagli attributi HTML e il precaricamento, fino alle immagini responsive, ai formati moderni e alle strategie da applicare a ciascuna immagine sulla tua pagina.

Ultima revisione a cura di Arjen Karel a Febbraio 2026

Quali Core Web Vitals possono essere influenzati dalle immagini?

Potresti sorprenderti nello scoprire che le immagini possono influenzare tutti i Core Web Vitals. Le immagini, se vengono messe in coda per il download troppo tardi durante il rendering o se sono semplicemente troppo grandi, di solito portano a un punteggio LCP elevato. Se le dimensioni dell'immagine non sono impostate o cambiano durante la fase di caricamento, le immagini possono influenzare anche il punteggio CLS. E infine, se la decodifica dell'immagine occupa troppo lavoro del main thread, possono persino influenzare l'INP. Diamo un'occhiata più da vicino:

Largest Contentful Paint

Il Largest Contentful Paint (LCP) misura quanto tempo impiega l'elemento più grande sulla pagina (come un'immagine o un video) a diventare visibile all'utente. Secondo il Web Almanac 2025, le immagini sono l'LCP element sull'85% delle pagine desktop e sul 76% delle pagine mobile. Se un'immagine viene messa in coda troppo tardi o impiega troppo tempo per caricarsi, può rallentare significativamente il punteggio LCP della pagina.

Cumulative Layout Shift

Il Cumulative Layout Shift (CLS) misura quanto il contenuto di una pagina si sposta mentre si carica. Le immagini possono causare layout shift se non sono correttamente dimensionate o se vengono inserite nella pagina dopo che questa si è già caricata, facendo spostare gli altri elementi. Il Web Almanac 2025 riporta che il 65% delle pagine desktop ha ancora almeno un'immagine senza dimensioni esplicite.

Interaction to Next Paint (INP)

Le immagini possono anche avere un impatto sull'Interaction to Next Paint (INP), che misura il tempo impiegato da una pagina per rispondere visivamente dopo che un utente interagisce con essa. Se ci sono troppe immagini di grandi dimensioni che devono essere decodificate, la pagina potrebbe impiegare più tempo per rispondere alle interazioni dell'utente, portando a un punteggio INP scadente. Questo è più comune nelle pagine di elenchi di prodotti in cui centinaia di immagini competono per le risorse.

Passo 1: Ottimizza l'elemento HTML image per la velocità

Attributo src

Specifica l'URL dell'immagine. Questa proprietà è essenziale, poiché indica al browser dove trovare l'immagine.

Attributi width e height

Specificano la larghezza e l'altezza dell'immagine in pixel. Queste proprietà sono importanti per renderizzare l'immagine correttamente sulla pagina, in quanto definiscono la dimensione del contenitore dell'immagine e come l'immagine si adatta al suo interno. Imposta sempre sia width che height per prevenire i layout shift.

Attributo alt

Specifica un testo alternativo per l'immagine nel caso in cui non possa essere visualizzata. Questo è importante per motivi di accessibilità, poiché aiuta gli utenti con disabilità visive a comprendere di cosa tratta l'immagine. È anche importante per l'ottimizzazione per i motori di ricerca (SEO), poiché i motori di ricerca utilizzano il testo alt per comprendere il contenuto dell'immagine.

Attributo loading (lazy loading)

Specifica come il browser dovrebbe caricare l'immagine (lazy, eager o auto). Questa proprietà è importante per migliorare le prestazioni della pagina, in quanto consente di caricare le immagini in modo asincrono e solo quando sono necessarie. Non impostare mai loading="lazy" sull'immagine LCP. Secondo il Web Almanac 2025, il 16% delle pagine applica ancora il lazy loading alla propria immagine LCP, che è uno degli errori di performance più comuni sul web.

Attributo srcset

Attributo sizes

Attributo decoding

Attributo fetchpriority

L'attributo fetchpriority specifica la priorità del recupero (fetch) di una risorsa rispetto ad altre risorse sulla pagina. L'attributo può assumere uno di tre valori: "high", "low" o "auto". Una risorsa con una priorità alta viene caricata prima delle risorse con priorità più bassa. A partire dal 2026, fetchpriority è supportato in tutti i browser moderni (Chrome 102+, Safari 17.2+, Firefox 132+, Edge 102+) ed è sicuro da usare in produzione. Solo il 17% delle pagine lo utilizza sulla propria immagine LCP, il che significa che la stragrande maggioranza dei siti si sta perdendo una vittoria facile.

Passo 2: Assicurati che l'immagine sia messa in coda per il download il prima possibile

La seconda cosa da fare, dopo aver ottimizzato l'HTML, è guardare la pianificazione (scheduling) delle immagini. In molti casi, il maggiore collo di bottiglia per quanto riguarda le immagini che influenzano la metrica LCP è la pianificazione ritardata. Se un browser ha la possibilità di scaricare l'LCP element in anticipo durante il processo di rendering, l'immagine sarà disponibile al browser il prima possibile e il browser potrà iniziare a dipingere (paint) quell'elemento presto nel processo di rendering.

Sembra semplice, vero? Bene, come ci assicuriamo che l'immagine sia messa in coda per il download il prima possibile.

Precarica l'LCP element

Il modo più efficace per garantire un download anticipato è precaricare l'immagine. Il precaricamento dell'immagine si ottiene con un semplice tag all'inizio dell'elemento <head>. Ad esempio:

<link rel="preload" as="image" href="image.jpg">

Questo semplice tag dirà al browser che avremo bisogno di "image.jpg" molto presto e il browser inizierà a scaricare questo file immediatamente.

Nei siti monitorati da CoreDash, l'83% dei caricamenti di pagina con un'immagine LCP precaricata ottiene un punteggio 'buono' ('good') sull'LCP, rispetto al 65% senza precaricamento.

Eager load dell'LCP element

Usa una fetchpriority alta

Se, per qualche motivo, non puoi precaricare l'LCP element, assicurati almeno che l'elemento abbia l'attributo fetchpriority impostato su high. Questo suggerirà al browser che un'immagine è importante per la pagina e il browser la scaricherà con una priorità alta. Tieni presente che utilizzare fetchpriority="high" di solito non è efficiente quanto precaricare un'immagine!

Passo 3: Assicurati che l'immagine venga scaricata il più velocemente possibile

La terza cosa da fare è assicurarsi di non sprecare preziose risorse di rete su immagini che sono più grandi di quanto dovrebbero essere. Puoi farlo utilizzando immagini responsive, usando la compressione e utilizzando formati di immagine nuovi e più veloci.

Immagini responsive

Ecco un'immagine responsive che utilizza srcset e sizes:

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450" alt="Descriptive alt text">

Il browser sceglie l'immagine più appropriata in base alla larghezza della viewport. Per le immagini below-the-fold caricate in lazy loading, puoi anche usare sizes="auto" (supportato in Chrome 126+ ed Edge 126+), che consente al browser di calcolare automaticamente la dimensione corretta in base al layout CSS dell'immagine.

Compressione delle immagini

Formati di immagine nuovi e più veloci

Le immagini sono spesso una delle risorse più grandi in una pagina web, e possono rallentare significativamente la velocità di caricamento di una pagina se non sono ottimizzate. I formati di immagine moderni come WebP e AVIF offrono una compressione significativamente migliore rispetto a JPEG pur mantenendo la stessa qualità visiva.

WebP è supportato da praticamente tutti i browser (~99% di supporto globale) e tipicamente riduce la dimensione del file del 25-35% rispetto a JPEG. AVIF si spinge ancora oltre con risparmi di oltre il 50% rispetto a JPEG e ora ha un supporto browser del 94.7% (Chrome 85+, Firefox 93+, Safari 16.4+). Nonostante ciò, il Web Almanac 2025 mostra che AVIF è utilizzato solo per lo 0.7% delle immagini LCP, mentre JPEG domina ancora al 57%. Questa è un'enorme opportunità.

Usa l'elemento <picture> per servire il formato migliore supportato da ciascun browser:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="800" height="450" alt="Descriptive alt text">
</picture>

Il browser proverà prima AVIF, ripiegherà su WebP e userà JPEG come ultima risorsa. Se sei curioso riguardo al futuro, leggi a proposito di JPEG XL e il suo attuale stato di supporto sui browser.

Passo 4: Elimina il layout shift!

Le immagini che cambiano dimensione mentre si caricano causeranno un layout shift. È semplice. Ci sono 3 motivi principali per cui le immagini causano un layout shift (ce ne sono altri, ma questi 3 sono i più comuni):

1. Dimensioni dell'immagine mancanti

2. Problemi di stile

Di solito si impedisce alle immagini di diventare più grandi della viewport tramite un semplice trucco CSS:

img{
   max-width:100%;
   height:auto;
}

Questo è un ottimo trucco e dovresti usarlo. Purtroppo vedo regolarmente varianti di questo trucco che causano effettivamente un layout shift. Ad esempio, aggiungendo width:auto:

img{
   max-width:100%;
   height:auto;
   width:auto;
}

Questo farà sì che qualsiasi immagine venga renderizzata con una larghezza e un'altezza automatiche (auto). Questo di solito significa che il browser renderizzerà l'immagine a 0x0px prima che sia stata scaricata.

3. Placeholder (Segnaposto)

Alcuni script di lazy loading basati su JavaScript usano dei placeholder (segnaposto). Se usi un qualche tipo di trucco CSS come il suddetto max-width:100% e height:auto, l'altezza automatica del placeholder quadrato non corrisponderà all'attributo height dell'immagine. In pratica, l'immagine verrà prima renderizzata con il placeholder quadrato a 720x720 e quando l'immagine finale sarà stata scaricata verrà renderizzata a 720x180:

<img
  src="1x1placeholder.png"
  data-src="hero.png"
  width="720"
  height="180"
  style="height:auto;max-width:100%"
>

Passo 5: Proteggi il main thread

La prossima cosa di cui assicurarsi è che non vengano decodificate troppe immagini sul main thread allo stesso tempo. Di solito questo non sarà un problema, ma l'ho visto accadere molte volte nelle pagine di elenchi di prodotti (dove a volte fino a 500 immagini competono per le risorse!).

Il trucco è aggiungere decoding="async" a tutte le immagini per assicurarsi che queste possano essere decodificate su un thread separato. Cerca anche di evitare che così tante immagini vengano decodificate tutte in una volta aggiungendo loading="lazy" a tutte le immagini below-the-fold e nascoste.

Passo 6: Scegli la giusta strategia per ciascuna immagine!

Strategie per le immagini per l'LCP element

L'LCP element è di solito l'elemento visivo più importante. Quindi dobbiamo davvero dargli priorità.

1. Precarica l'immagine all'inizio nell'head della pagina con questo codice: <link rel="preload" as="image" href="path-to-img.png">
2. Dici al browser che questa immagine non dovrebbe essere caricata in lazy loading impostando loading="eager" o omettendo l'attributo loading
3. Suggerisci al browser che questa immagine dovrebbe essere scaricata con una priorità alta utilizzando fetchpriority="high" (se stai precaricando l'immagine, puoi saltare questa parte)
4. Imposta decoding="sync" poiché questo elemento è così importante che vogliamo decodificarlo sul main thread

Ecco un esempio completo di un'immagine LCP ottimizzata, responsive e con precaricamento:

<!-- In <head> -->
<link rel="preload" as="image" href="hero-800.jpg"
  imagesrcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  imagesizes="(max-width: 600px) 100vw, 800px">

<!-- In <body> -->
<img src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450" alt="Descriptive alt text"
  fetchpriority="high" decoding="sync">

Strategia per i loghi e altre immagini visibili (non LCP)

Le immagini visibili dovrebbero essere caricate abbastanza presto durante il caricamento della pagina, ma preferibilmente dopo l'LCP element. Possiamo ottenerlo precaricando l'LCP element. Ciò darà a queste immagini visibili il loro ordine di download naturale e corretto.

1. Dici al browser che questa immagine non dovrebbe essere caricata in lazy loading impostando loading="eager" o omettendo l'attributo loading
2. Imposta decoding="async" poiché questo elemento può essere decodificato in sicurezza fuori dal main thread!

Strategia per le immagini below-the-fold

Tutte le immagini below-the-fold dovrebbero essere caricate in lazy loading. È così semplice! Non ci sono eccezioni!

1. Dici al browser che questa immagine dovrebbe essere caricata in lazy loading impostando loading="lazy"
2. Imposta decoding="async" poiché questo elemento può essere decodificato in sicurezza fuori dal main thread!

Evita le immagini di sfondo (background images)

Se stai usando immagini di sfondo (background images) devi riconsiderare la cosa. Le immagini di sfondo non possono essere caricate in lazy loading, non puoi controllare la proprietà decoding e non puoi impostare la fetchpriority. Le immagini di sfondo di solito non sono responsive, il che probabilmente ti costerà molta larghezza di banda. Ma soprattutto, le immagini di sfondo vengono solitamente scoperte dopo che il browser ha scaricato i file CSS. Questo non è quasi mai il momento giusto per innescare il download di un'immagine! Leggi perché le immagini di sfondo sono il male e come differire le immagini di sfondo quando non hai scelta.

Puoi usare tag image normali in combinazione con il CSS object-fit:cover per far sì che le immagini normali si comportino come immagini di sfondo!

Monitora l'impatto con il Real User Monitoring

Dopo aver applicato queste ottimizzazioni, verifica che migliorino effettivamente le prestazioni per gli utenti reali. Strumenti da laboratorio (Lab tools) come Lighthouse possono confermare che le tue modifiche sono corrette, ma solo il Real User Monitoring ti mostra l'impatto reale sui tuoi visitatori. Tieni traccia del tuo LCP, CLS e INP nel tempo per confermare che le ottimizzazioni delle tue immagini funzionino come previsto.