Risolvere il Layout Shift causato dal ridimensionamento automatico delle immagini

Risolvere il Layout Shift causato dal ridimensionamento automatico delle immagini

C'è un pattern CSS comune che distruggerà il tuo punteggio Cumulative Layout Shift con una singola riga di codice. L'ho visto su dozzine di siti e causa un layout shift anche quando hai impostato esplicitamente width e height sulle tue immagini. Nemmeno impostare la proprietà CSS aspect-ratio lo risolverà.

Questo articolo si concentra sul problema CSS width: auto. Per la guida completa a tutte le cause di layout shift di immagini e media (video, iframe, art direction, responsive images, lazy loading, placeholder), vedi Come le immagini e i media causano il Layout Shift.

Ultima revisione di Arjen Karel a Marzo 2026

Il problema

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

<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, poi scatta alla sua dimensione reale. Questo è il tuo layout shift.

Perché succede

Dal 2019, i browser moderni mappano gli attributi HTML width e height a un presentational hint interno aspect-ratio. Questo hint ha specificità CSS pari a zero. Qualsiasi regola CSS dell'autore lo supera, persino un semplice img { width: auto; }. Quando il CSS imposta width: auto, il browser perde le informazioni di cui ha bisogno per calcolare l'altezza riservata dall'aspect ratio. Entrambe le dimensioni diventano sconosciute finché l'immagine non viene caricata.

Questo è il motivo per cui impostare aspect-ratio nel 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 ancora un'altezza di 0. La prenotazione dello spazio funziona solo quando il browser ha almeno una dimensione nota su cui lavorare.

È anche subdolo perché causa un layout shift solo per i visitatori che accedono per la prima volta. Se hai già l'immagine nella cache del browser, le dimensioni intrinseche sono disponibili immediatamente e non si verifica alcuno shift. Tu, come sviluppatore, probabilmente non lo vedrai mai.

Come lo abbiamo scoperto

Questi problemi sono quasi impossibili da cogliere nei test di laboratorio perché Lighthouse gira 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 raccomandato da web.dev per responsive images che non causano layout shift:

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

Con questo CSS, il browser usa 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 viene riservato prima che l'immagine si carichi. 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 destro 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 altre tecniche di ottimizzazione delle immagini, vedi come ottimizzare le immagini per i Core Web Vitals e come risolvere le hero images lente.