Otimize imagens do site: verifique a página antes de publicar

Verifique primeiro

Comece pelo que o navegador baixa

Arquivos de design e pastas de mídia não mostram o que os usuários realmente recebem. O navegador mostra qual URL da imagem é carregado, seu tamanho aparente, se a página reserva espaço e se um arquivo grande é reutilizado onde um menor funcionaria.

Plano de imagem

Planeje cada imagem importante antes da conversão

Um plano de imagem mantém este guia separado dos artigos sobre conversores. Ele define o que cada área de imagem precisa: tamanho, ordem de carregamento, fallback, papel dos metadados e uma verificação final que confirma o uso do arquivo correto na página.

Quando o plano indicar que arquivos precisam de novas versões, use o guia de conversão de imagem para escolher o próximo passo. Use o Guia JPG para WebP para trabalho normal com WebP e o guia AVIF só para fotos grandes que ainda precisam de mais economia.

Tamanhos de imagem

Defina tamanhos claros para cada área de imagem

Imagens responsivas funcionam apenas quando o HTML corresponde ao layout. Meça a área, escolha algumas larguras úteis, reserve a proporção e evite enviar um original grande só porque ele existe.

Verificação simples: se um cartão de 360 px baixa um arquivo de 2400 px, a compressão não é o problema principal. A página precisa de uma versão menor ou o HTML aponta para o arquivo errado.

Ordem de carregamento

Faça a primeira imagem carregar de propósito

A imagem que define a primeira tela precisa de regra diferente das imagens mais abaixo na página. Encontre a provável imagem LCP, evite carregamento preguiçoso por engano e mantenha imagens inferiores silenciosas até serem necessárias.

1. 1

   Nomeie a imagem LCP

   Se a primeira imagem significativa provavelmente será a Largest Contentful Paint, não a carregue preguiçosamente por engano.

2. 2

   Mantenha imagens inferiores discretas

   Imagens abaixo da primeira viewport devem usar carregamento preguiçoso e decodificação assíncrona normalmente.

3. 3

   Verificar fundos CSS

   Um fundo cortado pode baixar um arquivo muito grande. Use um arquivo com tamanho correto para a área visível.

4. 4

   Verificar solicitações repetidas

   Uma imagem pequena de cartão fica cara quando o mesmo arquivo grande se repete dezenas de vezes.

HTML

Use HTML responsivo para a área medida

Para imagens importantes, deixe clara a escolha do navegador. O exemplo abaixo mostra opções de largura, tamanhos, dimensões fixas e fallback. Altere o comportamento de carregamento conforme a área, não por hábito.

<picture>
  <source
    type="image/avif"
    srcset="/images/article/product-640.avif 640w,
            /images/article/product-960.avif 960w,
            /images/article/product-1280.avif 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <source
    type="image/webp"
    srcset="/images/article/product-640.webp 640w,
            /images/article/product-960.webp 960w,
            /images/article/product-1280.webp 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <img
    src="/images/article/product-960.jpg"
    alt="Captura de tela do painel mostrando o fluxo de upload"
    width="960"
    height="540"
    loading="lazy"
    decoding="async" />
</picture>

Busca e compartilhamento

Faça imagens, texto alternativo e metadados contarem uma única história

SEO de imagem não é só adicionar palavras-chave. A imagem visível, texto próximo, texto alternativo útil, tags Open Graph e links JSON-LD devem descrever a mesma página claramente. Imagens decorativas devem permanecer decorativas.

Quando a verificação encontrar prévias sociais fracas, continue com o Guia de imagem Open Graph. Quando schema e meta tags forem o problema, use o Guia de metadados Blazor para manter JSON-LD e metadados da página consistentes.

Passos

Verificação simples de imagem para cada página

1. 1

   Abra a página real

   Comece pela URL atual, não pela pasta de ativos. Registre as imagens que realmente carregam.

2. 2

   Crie o plano de imagem

   Para cada imagem importante, anote largura alvo, proporção, ordem de carregamento, fallback e papel dos metadados.

3. 3

   Converta apenas o que mudou

   Use ferramentas de conversão apenas para arquivos encontrados na verificação, em vez de reexportar toda a pasta de mídia.

4. 4

   Atualize HTML e metadados

   Aponte srcset, sizes, dimensões, Open Graph e links JSON-LD para os arquivos preparados.

5. 5

   Verifique a saída do navegador

   Verifique a página, solicitações de rede, metadados sociais, dados estruturados e layout móvel.

6. 6

   Mantenha a regra para a próxima vez

   Documente as decisões de imagem para que futuras atualizações não comecem com suposições novamente.

Checklist

Lista de verificação de imagens antes da publicação

Use esta lista antes de um artigo, página de destino ou produto ir ao ar. Ela detecta problemas que só a conversão não resolve.