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

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

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

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

Última revisão 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 a largura que o navegador calcula a partir dos seus atributos HTML width e height, o que significa que o navegador não pode mais reservar espaço para a imagem antes que ela carregue. A imagem é renderizada em 0x0 pixels até que o arquivo seja baixado e decodificado, então ela muda para o seu tamanho real. Esse é o seu Layout Shift.

Por que isso acontece

Desde 2019, navegadores modernos mapeiam os atributos HTML width e height para uma dica de apresentação interna de aspect-ratio. Essa dica tem zero especificidade CSS. Qualquer regra CSS do autor a supera, mesmo um simples img { width: auto; }. Quando o CSS define width: auto, o navegador perde as informações necessárias 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 resolve 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 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 Layout Shift ocorre. Você, como desenvolvedor, provavelmente nunca o verá.

Como nós o encontramos

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 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 2025 relata que 62% das páginas mobile ainda têm pelo menos uma imagem sem tamanho definido. Muitas delas são causadas por esse exato padrão CSS: o desenvolvedor definiu largura e altura no HTML, mas uma regra CSS global as substitui 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 os atributos de largura e altura:

<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 do seu site, escolha "Inspecionar Elemento" e verifique os estilos computados em busca de width: auto. Se você o vir, 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 imagens hero lentas.