Risolvere il Layout Shift causato dal ridimensionamento automatico delle immagini

Risolvere il Layout Shift causato dal ridimensionamento automatico delle immagini

Esiste un pattern CSS comune che distruggerà il tuo punteggio Cumulative Layout Shift con una singola riga di codice. L'ho visto su decine di siti e causa un layout shift anche quando hai impostato esplicitamente la larghezza e l'altezza (width e height) sulle tue immagini. Nemmeno l'impostazione della proprietà CSS aspect-ratio lo risolverà.

Ultima revisione a cura di Arjen Karel a marzo 2026

Il problema

Ecco il CSS che causa il problema. È comunemente usato per le immagini responsive:

<style>
img {
    width: auto;
    height: auto;
    max-width: 100%;
}
</style>

La dichiarazione width: auto è il problema. Sovrascrive la larghezza che il browser calcola dai tuoi attributi HTML width e height, il che significa che il browser non può più riservare spazio per l'immagine prima che venga caricata. L'immagine viene renderizzata a 0x0 pixel fino a quando il file non viene scaricato e decodificato, per poi scattare alle sue dimensioni reali. Ecco il tuo layout shift.

Perché succede

Dal 2019, i browser moderni mappano gli attributi HTML width e height a un suggerimento di presentazione interno aspect-ratio. Questo suggerimento ha specificità CSS pari a zero. Qualsiasi regola CSS dell'autore ha la priorità, anche un semplice img { width: auto; }. Quando il CSS imposta width: auto, il browser perde le informazioni necessarie per calcolare l'altezza riservata dall'aspect ratio. Entrambe le dimensioni diventano sconosciute finché l'immagine non si carica.

Questo è il motivo per cui impostare aspect-ratio in CSS non risolve il problema. Con width: auto, il browser risolve la larghezza a 0 per un'immagine non caricata. Un aspect ratio calcolato da una larghezza di 0 produce comunque un'altezza di 0. La prenotazione dello spazio funziona solo quando il browser ha almeno una dimensione nota con cui lavorare.

È anche subdolo perché causa un layout shift solo per i visitatori alla prima visita. Se hai già l'immagine nella cache del browser, le dimensioni intrinseche sono disponibili immediatamente e non si verifica alcun shift. Tu, in quanto sviluppatore, probabilmente non lo vedrai mai.

Come lo abbiamo scoperto

Questi problemi sono quasi impossibili da individuare nei test di laboratorio perché Lighthouse viene eseguito su una macchina veloce con una cache calda. Il modo per rilevarli è con il Real User Monitoring. Il RUM traccia i Core Web Vitals per visitatori reali su dispositivi reali e ti riporta i punteggi CLS effettivi, inclusi gli shift che si verificano solo alle prime visite su connessioni lente.

Il Web Almanac 2025 riporta che il 62% delle pagine mobile ha ancora almeno un'immagine senza dimensioni. Molte di queste sono causate esattamente da questo pattern CSS: lo sviluppatore ha impostato width e height in HTML, ma una regola CSS globale li sovrascrive con auto.

La soluzione

Rimuovi width: auto. Mantieni height: auto e max-width: 100%. Questo è il pattern consigliato da web.dev per le immagini responsive che non causano layout shift:

<style>
img {
    height: auto;
    max-width: 100%;
}
</style>

Con questo CSS, il browser utilizza l'attributo HTML width per determinare la larghezza dell'immagine (limitata al 100% del contenitore da max-width), e height: auto calcola l'altezza corretta dall'aspect ratio. Lo spazio è riservato prima del caricamento dell'immagine. Nessun layout shift.

Assicurati che i tuoi tag <img> includano sia gli attributi width che height:

<img src="hero.jpg" width="800" height="450" alt="Description">

Fatti un favore: fai clic con il pulsante destro del mouse su qualsiasi immagine del tuo sito, scegli "Ispeziona elemento" e controlla gli stili calcolati per width: auto. Se lo vedi, ora sai cosa fare.

Suggerimento: Per ulteriori tecniche di ottimizzazione delle immagini, vedi come ottimizzare le immagini per i Core Web Vitals e come risolvere il problema delle immagini hero lente.