Como Imagens e Mídias Causam Layout Shift (e Como Corrigir)

Como Imagens e Mídias Causam Layout Shift (e Como Corrigir)

O Web Almanac de 2025 quantifica o que continuo vendo no mercado: 62% das páginas mobile têm pelo menos uma imagem sem largura e altura explícitas. Isso torna a mídia sem dimensões a principal causa de Cumulative Layout Shift na web. E cada um desses shifts é evitável com técnicas que existem desde 2019.

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

O navegador não sabe o tamanho da sua imagem

Todo layout shift causado por uma imagem se resume a uma coisa. O navegador não sabe quanto espaço reservar antes que a imagem carregue.

Quando o navegador encontra uma tag <img> sem dimensões, ele não para até saber as dimensões da imagem. Não, ele apenas reserva um espaço de 0x0 pixels. Em seguida, a imagem é baixada, o navegador recalcula o layout e tudo abaixo da imagem pula para baixo. Esse pulo é o seu CLS.

Como width e height previnem o layout shift

A única correção para um layout shift é reservar o espaço correto. A maneira mais fácil de fazer isso é simplesmente definir a largura e a altura (intrínsecas) corretas da imagem. Em 2019 e 2020, todos os principais navegadores lançaram um recurso que mudou a forma como os atributos width e height funcionam. Os navegadores agora os usam para calcular um aspect ratio antes que a imagem seja baixada.

Quando você escreve isso:

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

O navegador gera isso internamente:

img[Attributes Style] {
    aspect-ratio: auto 800 / 450;
}

Para imagens responsivas, adicione este CSS:

img {
    height: auto;
    max-width: 100%;
}

Os navegadores não precisam baixar o arquivo completo da imagem para calcular as dimensões. O navegador conhece a proporção e reserva o espaço vertical. O CSS faz a parte final: a contenção. height: auto calcula a altura a partir da proporção. max-width: 100% impede que a imagem exceda seu contêiner.

Coisas que desfazem a correção

Os atributos width e height são tudo o que você precisa para evitar que imagens causem layout shifts. Mas ainda existem alguns padrões comuns que desfazem o trabalho e fazem as imagens causarem layout shifts, mesmo com dimensões e CSS.

width:auto no CSS

Este é o que mais vejo e o que mais desperdiça tempo de depuração. O desenvolvedor define width e height em cada imagem, faz tudo certo no HTML, mas em algum lugar no arquivo CSS há um width:auto extra para imagens.

img {
    width: auto;
    height: auto;
    max-width: 100%;
}

O problema é o width: auto. Como a proporção interna do navegador tem a prioridade mais baixa no CSS, qualquer regra a substitui. width: auto remove a largura que o navegador estava usando para calcular a altura. Ambas as dimensões se tornam desconhecidas. A imagem é renderizada como 0x0 até que o arquivo seja baixado e as dimensões finais sejam conhecidas.

Definir aspect-ratio no CSS não corrige isso. Com width: auto, o navegador trata inicialmente a largura como 0. Um aspect ratio calculado a partir de 0 ainda produz 0x0.

O que torna isso difícil de capturar é o cache do navegador. Se a imagem estiver no cache do navegador, as dimensões reais estarão disponíveis imediatamente e nenhum shift ocorrerá. Eu já depurei isso em dezenas de sites de clientes e estava sempre em cache na máquina do desenvolvedor.

A correção:

img {
    height: auto;
    max-width: 100%;
}

Remova width: auto. Mantenha height: auto e max-width: 100%. Este é o padrão recomendado pelo web.dev.

Verificação rápida: clique com o botão direito em qualquer imagem, inspecione-a e olhe os estilos computados. Se você vir width: auto, esse é o seu problema. Para o passo a passo completo, veja como corrigir o layout shift causado pelo auto-sizing de imagens.

Dimensões erradas da imagem

Lembra do aspect ratio gerado internamente? É aqui que as coisas ficam um pouco técnicas. A palavra-chave auto diz ao navegador: use esta proporção como um placeholder, mas assim que a imagem real for carregada, mude para as dimensões reais. Se você definir valores errados (width="4" height="3" em uma imagem 16:9), o navegador reserva um espaço 4:3 inicialmente e depois corrige para 16:9 quando a imagem é carregada. Essa correção é um layout shift. Sempre use as dimensões reais em pixels da imagem.

Quando o aspect-ratio do CSS é a melhor escolha

Os atributos width/height são a abordagem padrão e sempre a melhor abordagem, mas às vezes seu CMS não permite adicionar dimensões à imagem (e isso acontece mais do que você imagina!). Nesse caso, você pode controlar quanto espaço é reservado usando o aspect ratio do CSS. Por exemplo, se a sua imagem hero tiver a classe .hero, você pode reservar seu espaço assim:

img.hero {
    aspect-ratio: 16 / 9;
    width: 100%;
}

Funciona em todos os navegadores modernos (Chrome 88+, Firefox 87+, Safari 15+) e em qualquer elemento, não apenas em imagens e vídeos.

Vídeos, iframes e SVGs

Vídeos

Mesmo problema, mesma correção. Defina width e height para corresponder à resolução do vídeo:

<video src="demo.mp4" width="1280" height="720" autoplay muted loop></video>

Adicione height: auto; max-width: 100%; no CSS. Uma coisa a observar: defina as dimensões para corresponder à resolução do vídeo, não à imagem do pôster. Se elas divergirem, você terá um shift quando a reprodução começar.

Iframes

Ao contrário das imagens, os iframes não calculam um aspect ratio a partir de seus atributos. Sem dimensões explícitas, eles assumem o padrão de 300x150 pixels. Para a maioria das incorporações (embeds), isso está errado. Para iframes, é melhor definir o aspect-ratio assim:

.responsive-iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

Melhor ainda, não carregue o iframe. Para YouTube, Vimeo, Google Maps e embeds sociais, parei de carregar iframes no carregamento da página anos atrás. Mostre uma imagem de placeholder estática com o aspect ratio correto. Quando o iframe se torna visível, o JavaScript o substitui pelo iframe real. O shift dessa substituição ocorre dentro de 500 ms de uma entrada do usuário e é excluído do CLS por design.

Para detalhes de implementação, veja embeds perfeitos do YouTube e Google Maps sem perder PageSpeed.

SVGs

Os SVGs carregados via <img> precisam de width e height na tag, igual às imagens raster. Elementos <svg> inline precisam de um viewBox com o aspect-ratio do CSS. Sem nenhum dos dois, eles assumem o padrão de 300x150.

Imagens responsivas

Mantenha a mesma proporção em todas as fontes do srcset

Todas as imagens em um srcset devem compartilhar o mesmo aspect ratio. Se compartilharem, um conjunto de width/height no <img> é o suficiente:

<img
    src="hero-800.jpg"
    srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 800px"
    width="800" height="450"
    alt="Imagem hero">

800:450 é a mesma proporção em todas as três variantes. Não importa qual o navegador escolha, o espaço reservado estará correto. Se precisar de proporções diferentes, use elementos <picture> com <source>.

Direção de arte: proporções diferentes por breakpoint

Quando você exibe cortes diferentes em larguras de viewport diferentes, precisará usar o elemento <picture>. Defina width e height em cada <source>:

<picture>
    <source
        media="(max-width: 799px)"
        srcset="hero-mobile.jpg"
        width="480" height="600">
    <source
        media="(min-width: 800px)"
        srcset="hero-desktop.jpg"
        width="1200" height="400">
    <img
        src="hero-desktop.jpg"
        width="1200" height="400"
        alt="Imagem hero do produto">
</picture>

O Chrome e o Safari adotam as dimensões corretas do <source> que estiver ativo. O Firefox não (bug 1694741). Ele sempre usa as dimensões de fallback da <img>. Solução alternativa: combine os breakpoints com as media queries do CSS.

picture img {
    width: 100%;
    height: auto;
}
@media (max-width: 799px) {
    picture img {
        aspect-ratio: 480 / 600;
    }
}
@media (min-width: 800px) {
    picture img {
        aspect-ratio: 1200 / 400;
    }
}

Se todos os seus cortes compartilharem a mesma proporção, o bug do Firefox não importa.

Contêineres fixos, carrosséis e contenção

object-fit para contêineres de tamanho fixo

Grids de cartões de produtos onde cada cartão tem a mesma altura, mas as imagens têm proporções diferentes. Trave o contêiner e deixe a imagem preenchê-lo:

.product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}

<img
    src="product.jpg"
    width="400" height="600"
    class="product-image"
    alt="Nome do produto">

O tamanho é travado antes que a imagem carregue. Isso também substitui imagens de background no CSS. Imagens de background não podem usar lazy loading, o scanner de pre-carregamento não as encontra e você não pode usar fetchpriority. Uma <img> com object-fit: cover oferece todos esses controles.

Carrosséis

Transições de slide que animam left, width ou margin acionam o recálculo de layout. Como o autoplay não é uma entrada do usuário, cada shift conta para o CLS. Fixe o contêiner com um aspect-ratio fixo. Anime com transform: translateX() em vez disso. Transforms rodam na GPU e nunca acionam o layout.

Contenção para embeds que você não controla

Espaços de anúncios, widgets de terceiros, conteúdo gerado pelo usuário. Você não controla o que eles renderizam e não pode cortá-los. O objetivo realista é minimizar o shift, não eliminá-lo.

Comece reservando espaço:

.ad-slot {
    min-height: 250px;
    contain: layout style;
}

O min-height já é uma grande vitória. Se o anúncio carregar com 250px ou menos, nenhum shift ocorre. Se carregar com 300px, você tem um shift de 50px em vez de um shift de 300px começando do zero. Essa diferença é importante.

contain: layout faz algo diferente. Ele não impede que o contêiner cresça. Ele isola o que acontece do lado de dentro. Quando a rede de anúncios injeta scripts que refluem seu próprio conteúdo (redimensionando iframes, injetando novos elementos, recalculando o layout interno), esses recálculos permanecem dentro do contêiner. Sem contenção, cada reflow interno no anúncio aciona um recálculo de layout para a página inteira. Com ele, o navegador pula tudo fora da caixa. Isso torna a página mais responsiva enquanto os anúncios são carregados.

contain: style evita que contadores de CSS e outros efeitos colaterais de estilo vazem. Um seguro barato.

Para o valor de min-height, verifique os tamanhos de criativos mais comuns do seu provedor de anúncios e escolha aquele que cobre a maioria das impressões. Se 90% dos seus anúncios forem de 250px e 10% de 300px, defina como 250px e aceite um pequeno shift ocasional. Definir como 300px significa que 90% dos carregamentos de página têm 50px de espaço vazio colapsando quando um anúncio menor é carregado. Esse colapso também é um layout shift.

Não há resposta perfeita para anúncios. O objetivo é o menor shift possível no maior número de carregamentos de página.

Como encontrar CLS em imagens

Você não identificará CLS de imagens sob condições normais de navegação. O cache do seu navegador já possui as dimensões de uma visita anterior, de modo que o shift nunca acontece. Para ver o que seus usuários reais veem, abra o DevTools (F12), vá para a guia Network e marque "Disable cache". O cache é desativado apenas enquanto o DevTools estiver aberto. Como alternativa, use uma janela anônima.

Real User Monitoring

Comece com o CoreDash ou outra ferramenta de RUM. Os dados de atribuição do CLS mostram exatamente quais elementos causaram shift. Navegue até o CLS e observe a tabela de elementos na atribuição. Filtre por imagem e você terá todos os elementos de imagem afetados por layout shifts, ordenados por impacto.

Chrome DevTools

Desative o cache na guia Network, reduza a velocidade da rede (throttle) para Slow 4G, habilite screenshots e recarregue. Fique atento a saltos visuais. Em seguida, abra o painel Performance e procure por entradas "Layout Shift". Clique em um shift para ver o nó, a pontuação e se houve entrada recente do usuário.

Core Web Vitals Visualizer

A extensão Core Web Vitals Visualizer destaca cada layout shift com uma sobreposição colorida. Costumo usar isso como meu primeiro passo antes de abrir o painel Performance. Recarregue a página com a extensão ativa e você verá exatamente o que se moveu.

Checklist rápido de correção de CLS

Onde a web se encontra em relação ao CLS de imagens

Os números do Web Almanac de 2025:

• 62% das páginas mobile têm pelo menos uma imagem sem dimensões. Uma queda em relação aos 66% de 2024. Ainda é a maioria.
• 65% das páginas desktop têm imagens sem dimensões. Uma queda em relação aos 69%.
• No p75, uma página desktop tem 9 imagens sem dimensões. Em mobile, são 8.
• Altura mediana de uma imagem sem tamanho: 111px no desktop, 98px no mobile. O suficiente para deslocar um parágrafo.
• 72% das origens desktop e 81% das origens mobile passam no CLS. Um aumento em relação aos 62% em 2021.

O CLS melhorou mais do que qualquer outro Core Web Vital nos últimos quatro anos. As imagens sem dimensões ainda são o maior contribuidor. Corrija este único problema e os layout shifts desaparecem na maioria dos sites.

Guias relacionados

• O que é Cumulative Layout Shift (CLS): O guia completo. Fórmula, limites, janelas de sessão e todas as causas de CLS além de imagens.
• Encontrar e Corrigir Problemas de CLS: Diagnóstico passo a passo com dados de RUM, DevTools e correções para cada causa.
• Corrigir layout shift causado pelo auto-sizing de imagens: O passo a passo completo do width: auto.
• Otimizar imagens para os Core Web Vitals: Pre-carregamento (preloading), imagens responsivas, formatos, priorização.
• Layout shift causado por transições no CSS: Como as animações que acionam o layout causam CLS.
• Embeds perfeitos do YouTube: O padrão facade para zero CLS.
• Google Maps 100% PageSpeed: A mesma abordagem de facade para o Maps.