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

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

O Web Almanac de 2025 coloca um número no que continuo vendo na prática: 62% das páginas mobile têm pelo menos uma imagem sem largura e altura explícitas. Isso torna a mídia sem tamanho a causa número um 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

Cada 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. Então a imagem é baixada, o navegador recalcula o layout e tudo abaixo da imagem pula para baixo. Esse pulo é o seu CLS.

Como largura e altura evitam 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 altura corretas (intrínsecas) 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="Description">

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: 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 de largura e altura são tudo o que você precisa para evitar que as imagens causem layout shifts. Mas ainda existem alguns padrões comuns que desfazem o trabalho e fazem com que as imagens causem 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 as imagens.

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

O problema é width: auto. Como a proporção interna do navegador tem a prioridade CSS mais baixa, qualquer regra a substitui. width: auto remove a largura que o navegador estava usando para calcular a altura. Ambas as dimensões tornam-se desconhecidas. A imagem é renderizada em 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 detectar é 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á. Já depurei isso em dezenas de sites de clientes e sempre estava 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, observe os estilos computados. Se você vir width: auto, esse é o seu problema. Para o passo a passo completo, veja corrigir layout shift causado por auto-sizing images.

Dimensões erradas da imagem

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

Quando CSS aspect-ratio é a melhor escolha

Os atributos width/height são a abordagem padrão e sempre a melhor abordagem, mas às vezes o seu CMS não permite adicionar dimensões de imagem (e isso acontece mais do que você pensa!). 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 a largura e a altura 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 de poster. Se forem diferentes, 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 dos seus atributos. Sem dimensões explícitas, o padrão é 300x150 pixels. Para a maioria das incorporações, 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 de forma alguma. Para YouTube, Vimeo, Google Maps e incorporações sociais, parei de carregar iframes no carregamento da página anos atrás. Mostre uma imagem placeholder estática com o aspect ratio correto. Quando o iframe se tornar visível, o JavaScript o substitui pelo iframe real. O shift da substituição acontece dentro de 500ms da entrada do usuário e é excluído do CLS por design.

Para detalhes de implementação, veja incorporações perfeitas do YouTube e Google Maps sem perder PageSpeed.

SVGs

SVGs carregados via <img> precisam de largura e altura na tag, da mesma forma que as imagens raster. Elementos <svg> inline precisam de um viewBox com CSS aspect-ratio. Sem nenhum dos dois, o padrão é 300x150.

Imagens responsivas

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

Todas as imagens em um srcset devem compartilhar o mesmo aspect ratio. Se for o caso, um conjunto de width/height na <img> é 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="Hero image">

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 você 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, você 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="Product hero image">
</picture>

O Chrome e o Safari pegam as dimensões corretas de qualquer <source> que esteja ativo. O Firefox não (bug 1694741). Ele sempre usa as dimensões de fallback da <img>. Solução alternativa: combine os breakpoints com media queries no 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

Grades de cartões de produtos onde cada cartão tem a mesma altura, mas as imagens têm proporções diferentes. Bloqueie o contêiner, 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="Product name">

O tamanho é bloqueado antes do carregamento da imagem. Isso também substitui imagens de fundo do CSS. Imagens de fundo não podem ter lazy loading, o preload scanner 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 a recalcularão do layout. Como a reprodução automática 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. As transformações são executadas na GPU e nunca acionam o layout.

Contenção para embeds que você não pode controlar

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 lida com a grande vitória. Se o anúncio carregar com 250px ou menos, nenhum shift. Se carregar com 300px, você terá um shift de 50px em vez de um shift de 300px 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 dentro. Quando a rede de anúncios injeta scripts que refluem o seu próprio conteúdo (redimensionando iframes, injetando novos elementos, recalculando o layout interno), esses recálculos ficam dentro do contêiner. Sem contenção, cada reflow interno no anúncio aciona uma recalcularão de layout para a página inteira. Com isso, o navegador pula tudo fora da caixa. Isso torna a página mais responsiva enquanto os anúncios estão carregando.

contain: style impede que contadores 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 têm 250px e 10% têm 300px, defina-o para 250px e aceite o pequeno shift ocasional. Defini-lo para 300px significa que 90% dos carregamentos de página terão 50px de espaço vazio em colapso quando um anúncio menor carregar. 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 de imagem

Você não pegará CLS de imagem em condições normais de navegação. O cache do seu navegador já possui as dimensões de uma visita anterior, então o shift nunca acontece. Para ver o que seus usuários reais veem, abra o DevTools (F12), vá para a aba Network e marque "Disable cache". O cache só é desativado enquanto o DevTools estiver aberto. Alternativamente, use uma janela anônima.

Real User Monitoring

Comece com o CoreDash ou outra ferramenta RUM. Os dados de atribuição de CLS mostram exatamente quais elementos sofreram shift. Navegue até o CLS, olhe para a tabela Element de atribuição. Filtre por imagem e você obterá cada elemento de imagem afetado por layout shifts, ordenado por impacto.

Chrome DevTools

Desative o cache na aba Network, reduza para Slow 4G, ative as capturas de tela, recarregue. Preste atenção a pulos visuais. Em seguida, abra o painel Performance e procure por entradas de "Layout Shift". Clique em um shift para ver o nó, a pontuação e se ele teve 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. Eu uso isso como meu primeiro passo antes de abrir o painel Performance. Recarregue com a extensão ativa e você verá exatamente o que se moveu.

Checklist rápida de correção de CLS

A situação da web sobre CLS de imagem

Os números do Web Almanac de 2025:

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

O CLS melhorou mais do que qualquer outro Core Web Vital nos últimos quatro anos. Imagens sem tamanho ainda são o maior contribuidor. Corrija este único problema e os layout shifts desaparecerão 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 RUM, DevTools e correções para cada causa.
• Corrigir layout shift causado por auto-sizing images: O passo a passo completo sobre width: auto.
• Otimizar imagens para Core Web Vitals: Preloading, imagens responsivas, formatos, priorização.
• Layout shift causado por transições CSS: Como animações que acionam layout causam CLS.
• Incorporações perfeitas do YouTube: O padrão facade para zero CLS.
• Google Maps com 100% no PageSpeed: A mesma abordagem facade para o Maps.