Verificador de dimensões e lazy loading

O que é

São dois atributos com efeitos opostos e complementares. O par width e height informa a proporção da imagem antes de ela chegar, permitindo ao navegador reservar o espaço exato desde o primeiro instante. O loading="lazy" adia o download de imagens fora da tela até que a rolagem se aproxime delas.

Por que importa

Sem width e height, o navegador desenha a página com a imagem ocupando zero pixel e reflui tudo quando ela chega — é o pulo do conteúdo que faz a pessoa clicar no lugar errado, e é medido pelo Cumulative Layout Shift, uma das Core Web Vitals que o Google usa como sinal de ranqueamento. O lazy loading resolve outro problema: sem ele, um catálogo com sessenta imagens baixa as sessenta antes de mostrar a primeira dobra, e o carregamento inicial fica preso em arquivos que ninguém vai ver.

Como corrigir

• Declare width e height em todas as imagens, com os valores reais do arquivo. Mesmo com o CSS controlando o tamanho final, os atributos dão ao navegador a proporção para reservar o espaço.
• Use loading="lazy" nas imagens abaixo da dobra — e só nelas.
• Nunca aplique lazy na imagem principal do topo. Adiar justamente a imagem que define o Largest Contentful Paint piora a métrica que se quer melhorar.
• Marque a imagem do topo com fetchpriority="high" para que ela seja buscada antes dos demais recursos.
• Em CSS, use height: auto junto com width: 100% para a imagem continuar responsiva sem desmentir a proporção declarada nos atributos.
• Em imagens com srcset, mantenha todas as variantes na mesma proporção. Proporções diferentes recriam o deslocamento que os atributos evitariam.

Perguntas frequentes

Preciso de width e height se o CSS já define o tamanho?

Precisa. O CSS entra em ação quando a folha de estilo é aplicada, mas o navegador quer reservar o espaço antes disso. Os atributos no HTML fornecem a proporção logo na leitura do documento, e navegadores modernos combinam os dois sem conflito.

Devo colocar lazy loading em todas as imagens?

Não. Imagens visíveis no carregamento inicial, principalmente a do topo, devem carregar imediatamente. Aplicar lazy nelas atrasa o Largest Contentful Paint e piora exatamente a métrica que o lazy loading deveria ajudar.

O que é CLS e o que as dimensões têm a ver?

Cumulative Layout Shift mede o quanto o conteúdo se desloca sozinho durante o carregamento. Imagem sem dimensões declaradas é a causa mais comum: o espaço vai de zero ao tamanho real de uma vez e empurra tudo que está abaixo. Declarar width e height elimina esse deslocamento.

loading="lazy" funciona em todos os navegadores?

Sim, tem suporte em todos os navegadores atuais. Em algum navegador antigo que não reconheça o atributo, ele é simplesmente ignorado e a imagem carrega normalmente — não há risco de quebrar nada.