Corrija o Layout Shift causado por dimensionamento automático de imagens

Corrija o Layout Shift causado por dimensionamento automático de imagens

Existe um padrão CSS comum que destruirá a sua pontuação de Cumulative Layout Shift com uma única linha de código. Eu já vi isso em dezenas de sites, e causa um Layout Shift mesmo quando você definiu explicitamente o width e o height em suas imagens. Nem mesmo definir a propriedade CSS aspect-ratio corrigirá o problema.

Revisado pela última vez por Arjen Karel em março de 2026

O problema

Aqui está o CSS que causa o problema. Ele é comumente usado para imagens responsivas:

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

A declaração width: auto é o problema. Ela substitui o width que o navegador calcula a partir dos seus atributos HTML width e height, o que significa que o navegador não consegue mais reservar espaço para a imagem antes que ela carregue. A imagem é renderizada com 0x0 pixels até que o arquivo seja baixado e decodificado, e então salta para o seu tamanho original. Esse é o seu Layout Shift.

Por que isso acontece

Desde 2019, os navegadores modernos mapeiam os atributos HTML width e height para uma dica de apresentação interna de aspect-ratio. Essa dica tem zero de especificidade CSS. Qualquer regra CSS do autor a supera, mesmo um simples img { width: auto; }. Quando o CSS define width: auto, o navegador perde a informação necessária para calcular a altura reservada a partir do aspect ratio. Ambas as dimensões tornam-se desconhecidas até que a imagem carregue.

É por isso que definir aspect-ratio no CSS também não corrige o problema. Com width: auto, o navegador resolve o width para 0 no caso de uma imagem não carregada. Um aspect ratio calculado a partir de um width 0 ainda produz um height 0. A reserva de espaço só funciona quando o navegador tem pelo menos uma dimensão conhecida com a qual trabalhar.

Isso também é sorrateiro porque causa um Layout Shift apenas para visitantes de primeira viagem. Se você já tem a imagem no cache do seu navegador, as dimensões intrínsecas estão disponíveis imediatamente e nenhum shift ocorre. Você, como desenvolvedor, provavelmente nunca verá isso acontecer.

Como descobrimos isso

Esses problemas são quase impossíveis de detectar em testes de laboratório porque o Lighthouse é executado em uma máquina rápida com um cache quente. A maneira de detectá-los é com o Real User Monitoring. O RUM rastreia os Core Web Vitals para visitantes reais em dispositivos reais e reporta as pontuações reais de CLS de volta para você, incluindo shifts que só acontecem em primeiras visitas em conexões lentas.

O Web Almanac de 2025 relata que 62% das páginas mobile ainda têm pelo menos uma imagem sem dimensões definidas. Muitas delas são causadas por este exato padrão CSS: o desenvolvedor definiu width e height no HTML, mas uma regra CSS global os substitui por auto.

A correção

Remova width: auto. Mantenha height: auto e max-width: 100%. Este é o padrão recomendado pelo web.dev para imagens responsivas que não causam Layout Shifts:

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

Com este CSS, o navegador usa o atributo HTML width para determinar a largura da imagem (limitado a 100% do contêiner pelo max-width), e height: auto calcula a altura correta a partir do aspect ratio. O espaço é reservado antes que a imagem carregue. Nenhum Layout Shift.

Certifique-se de que suas tags <img> incluam os atributos width e height:

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

Faça um favor a si mesmo: clique com o botão direito em qualquer imagem do seu site, escolha "Inspecionar Elemento" e verifique os estilos computados em busca de width: auto. Se você encontrar, agora já sabe o que fazer.

Dica: Para mais técnicas de otimização de imagens, veja como otimizar imagens para os Core Web Vitals e como corrigir hero images lentas.