Corrigir o Layout Shift causado pelo redimensionamento automático de imagens

Corrigir o Layout Shift causado pelo redimensionamento 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. Já o vi em dezenas de sites, e ele causa um layout shift mesmo quando você define explicitamente os atributos width e height nas suas imagens. Nem mesmo definir a propriedade CSS aspect-ratio resolverá isso.

Este artigo foca no problema do CSS width: auto. Para o guia completo de todas as causas de layout shift de imagens e mídia (vídeos, iframes, direção de arte, imagens responsivas, lazy loading, placeholders), veja Como Imagens e Mídia Causam Layout Shift.

Última revisão por Arjen Karel em março de 2026

O problema

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

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

A declaração width: auto é o problema. Ela sobrescreve a largura 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 total. 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 aspect-ratio. Essa dica tem especificidade CSS zero. Qualquer regra CSS do autor a supera, até mesmo um simples img { width: auto; }. Quando o CSS define width: auto, o navegador perde a informação de que precisa para calcular a altura reservada a partir do aspect ratio. Ambas as dimensões se tornam 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 a largura para 0 em uma imagem não carregada. Um aspect ratio calculado a partir de uma largura de 0 ainda produz uma altura de 0. A reserva de espaço só funciona quando o navegador tem pelo menos uma dimensão conhecida para trabalhar.

Isso também é traiçoeiro porque só causa um layout shift 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 layout shift ocorre. Você, como desenvolvedor, provavelmente nunca o verá.

Como descobrimos isso

Esses problemas são quase impossíveis de detectar em testes de laboratório porque o Lighthouse roda 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 de visitantes reais em dispositivos reais e reporta as pontuações reais de CLS de volta para você, incluindo layout shifts que só acontecem nas primeiras visitas em conexões lentas.

O Web Almanac de 2025 relata que 62% das páginas móveis ainda têm pelo menos uma imagem sem tamanho definido. Muitas dessas são causadas por esse exato padrão CSS: o desenvolvedor definiu width e height no HTML, mas uma regra CSS global os sobrescreve com 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 (limitada a 100% do contêiner por max-width), e height: auto calcula a altura correta a partir do aspect ratio. O espaço é reservado antes que a imagem carregue. Sem layout shift.

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

<img src="hero.jpg" width="800" height="450" alt="Descrição">

Faça um favor a si mesmo: clique com o botão direito em qualquer imagem no seu site, escolha "Inspecionar Elemento" e verifique os estilos computados para width: auto. Se você o vir, agora você 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.