Como reservar espaço para imagens e reduzir CLS

Sem dimensões ou proporção reservada, a imagem pode alterar o layout ao ser baixada.

Antes de começar

Encontre imagens que chegam depois da pintura inicial e verifique como o espaço é calculado.

Passo a passo

1. Defina width e height ou aspect-ratio de acordo com o arquivo exibido.

2. Teste em viewport móvel e confirme que proporção e recorte continuam corretos.

Limites e cuidados

Use medidas verdadeiras; dimensões incorretas podem deformar mídia ou reservar espaço inadequado.

Continue na biblioteca

Fonte oficial: Lazy loading de imagens no navegador — web.dev.

Conteúdo da biblioteca de Diego Henrich. Confira as fontes citadas e valide orientações que dependem da versão de uma plataforma ou serviço.