Ottimizzare le immagini per i Core Web Vitals

Come le immagini influiscono sui 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 cosa più impattante che tu possa fare per i tuoi Core Web Vitals. Ma le immagini non influiscono solo sulla 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 preloading alle immagini responsive, ai formati moderni e alle strategie da applicare a ogni immagine della tua pagina.

Ultima revisione di Arjen Karel a Febbraio 2026

Su quali Core Web Vitals possono influire le immagini?

Potresti sorprenderti nello scoprire che le immagini possono influire su tutti i Core Web Vitals. Le immagini, se vengono accodate per il download in una fase avanzata del 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 anche influire sul punteggio CLS. E infine, se la decodifica delle immagini occupa troppo lavoro nel main thread, possono persino influire sull'INP. Diamo un'occhiata più da vicino:

Largest Contentful Paint

Il Largest Contentful Paint (LCP) misura quanto tempo impiega l'elemento più grande della pagina (come un'immagine o un video) a diventare visibile all'utente. Secondo il Web Almanac 2025, le immagini sono l'elemento LCP sull'85% delle pagine desktop e sul 76% delle pagine mobile. Se un'immagine viene accodata 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 durante il caricamento. Le immagini possono causare layout shift se non sono dimensionate correttamente o se vengono inserite nella pagina dopo che è già stata caricata, causando lo spostamento di 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 è molto comune nelle pagine di elenchi di prodotti, dove centinaia di immagini competono per le risorse.

Passo 1: Ottimizzare l'elemento immagine HTML 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 il rendering corretto dell'immagine sulla pagina, poiché definiscono le dimensioni del contenitore dell'immagine e come l'immagine si adatta al suo interno. Imposta sempre sia la larghezza che l'altezza per prevenire i layout shift.

Attributo Alt

Specifica un testo alternativo per l'immagine nel caso non possa essere visualizzata. Questo è importante per motivi di accessibilità, poiché aiuta gli utenti non vedenti o ipovedenti a capire di cosa tratta l'immagine. È importante anche per la search engine optimization (SEO), poiché i motori di ricerca utilizzano il testo alternativo 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, poiché 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 usa ancora il lazy loading sull'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 fetch di una risorsa rispetto ad altre risorse sulla pagina. L'attributo può avere uno dei tre valori: "high", "low", o "auto". Una risorsa con una priorità alta viene caricata prima delle risorse con priorità più basse. 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 sull'immagine LCP, il che significa che la stragrande maggioranza dei siti si sta perdendo una vittoria facile.

Passo 2: Assicurati che l'immagine sia accodata per il download il prima possibile

La seconda cosa da fare, dopo aver ottimizzato l'HTML, è guardare alla programmazione delle immagini. In molti casi, il collo di bottiglia più grande quando si tratta di immagini che influenzano la metrica LCP è la programmazione in ritardo. Se un browser ha la possibilità di scaricare l'elemento LCP all'inizio del processo di rendering, l'immagine sarà disponibile al browser il prima possibile e il browser potrà iniziare il paint di quell'elemento nelle fasi iniziali del processo di rendering.

Sembra semplice, vero? Ebbene, come ci assicuriamo che l'immagine sia accodata per il download il prima possibile?

Preload dell'elemento LCP

Il modo più efficace per garantire un download anticipato è effettuare il preload dell'immagine. Il preload dell'immagine viene fatto con un semplice tag all'inizio dell'elemento <head>. Ad esempio:

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

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

Tra i siti monitorati da CoreDash, l'83% dei caricamenti di pagina con un'immagine LCP precaricata ottiene un punteggio LCP "good", rispetto al 65% senza preloading.

Eager load dell'elemento LCP

Utilizzare una fetchpriority alta

Se, per qualche motivo, non puoi effettuare il preload dell'elemento LCP, 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 il preloading di un'immagine!

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

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

Immagini responsive

Ecco un'immagine responsive utilizzando 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 load, puoi anche utilizzare sizes="auto" (supportato in Chrome 126+ e 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 praticamente da tutti i browser (~99% di supporto globale) e in genere riduce le dimensioni del file del 25-35% rispetto al JPEG. AVIF va ancora oltre con un risparmio del 50%+ rispetto al JPEG e ora vanta un supporto del browser del 94.7% (Chrome 85+, Firefox 93+, Safari 16.4+). Nonostante questo, il Web Almanac 2025 mostra che l'AVIF viene utilizzato solo per lo 0,7% delle immagini LCP, mentre il JPEG domina ancora al 57%. Si tratta di un'opportunità enorme.

Usa l'elemento <picture> per servire il formato migliore supportato da ogni 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 con AVIF, userà WebP come fallback e utilizzerà JPEG come ultima risorsa. Se sei curioso riguardo al futuro, leggi a proposito del JPEG XL e il suo attuale stato di supporto sui browser.

Passo 4: Eliminare i layout shift!

Le immagini che cambiano dimensione durante il caricamento causeranno un layout shift. È semplice come sembra. Questa sezione copre le 3 ragioni più comuni. Per la guida completa a tutte le cause di CLS relative a immagini e media (inclusi video, iframe, art direction, incongruenze tra immagini responsive e lazy loading), consulta la guida Come immagini e media causano Layout Shift.

1. Dimensioni dell'immagine mancanti

2. Problemi di stile

Solitamente viene impedito che le immagini crescano oltre le dimensioni della viewport tramite un semplice trucco CSS:

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

Questo è un ottimo trucco e dovresti usarlo. Sfortunatamente, 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;
}

Ciò farà sì che qualsiasi immagine venga renderizzata con larghezza e altezza in auto. Questo di solito significa che il browser renderizzerà l'immagine a 0x0px prima che sia stata scaricata.

3. Placeholder

Alcuni script per il lazy loading basati su JavaScript utilizzano dei placeholder. Se si utilizza una sorta di trucco CSS come il sopracitato max-width:100% e height:auto, allora l'altezza auto del placeholder quadrato non corrisponderà all'attributo di altezza 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: Proteggere il main thread

La cosa successiva di cui assicurarsi è che non vengano decodificate contemporaneamente troppe immagini nel main thread. Di solito questo non è un problema, ma l'ho visto succedere molte volte nelle pagine con elenchi di prodotti (dove a volte fino a 500 immagini competono per le risorse!).

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

Passo 6: Scegli la giusta strategia per ogni immagine!

Strategie di immagine per l'elemento LCP

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

1. Effettua il preload dell'immagine in anticipo all'interno dell'head della pagina con questo codice: <link rel="preload" as="image" href="path-to-img.png">
2. Indica al browser che questa immagine non dovrebbe essere in lazy load 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 effettuando il preload dell'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 preloading:

<!-- 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 di immagine 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'elemento LCP. Possiamo ottenere questo risultato tramite il preloading dell'elemento LCP. Questo darà a queste immagini visibili il loro ordine di download naturale e corretto.

1. Indica al browser che questa immagine non dovrebbe essere in lazy load 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 di immagine per le immagini below-the-fold

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

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

Evitare le immagini di background

Se stai usando immagini di background, devi riconsiderare la scelta. Le immagini di background non possono essere messe in lazy load e non puoi controllarne la proprietà di decodifica, né tantomeno impostare la fetchpriority. Le immagini di background di solito non sono responsive, il che probabilmente ti costerà molta larghezza di banda. Ma soprattutto, le immagini di background vengono solitamente scoperte dopo che il browser ha scaricato i file CSS. Non è quasi mai il momento giusto per innescare un download di immagine! Leggi perché le immagini di background sono il male e come posticipare le immagini di background quando non hai scelta.

Puoi utilizzare i normali tag immagine in combinazione con il CSS object-fit:cover per far sì che le immagini normali si comportino come immagini di background!

Monitorare 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 come Lighthouse possono confermare che le tue modifiche siano corrette, ma solo il Real User Monitoring ti mostra l'impatto effettivo sui tuoi visitatori. Tieni traccia del tuo LCP, CLS e INP nel tempo per confermare che le ottimizzazioni delle tue immagini stiano funzionando come previsto.