Análise de Otimização de Imagens

Quando Usar

• Use ao auditar SEO de imagens, texto alternativo (alt text), tamanhos de arquivo, formatos ou carregamento preguiçoso (lazy loading).
• Use quando o usuário deseja recomendações de desempenho específicas para imagens.
• Use ao verificar sinais de qualidade de mídia que afetam tanto o SEO quanto as Métricas Principais da Web (Core Web Vitals).

Verificações

Texto Alternativo (Alt Text)

• Presente em todos os elementos <img> (exceto decorativos: role="presentation")
• Descritivo: descreve o conteúdo da imagem, não "imagem.jpg" ou "foto"
• Inclui palavras-chave relevantes de forma natural, sem excesso de palavras-chave (keyword stuffing)
• Comprimento: 10-125 caracteres

Bons exemplos:

• "Encanador profissional consertando torneira de pia de cozinha"
• "Sedan Toyota Camry 2024 vermelho, vista frontal"
• "Reunião de equipe em sala de conferências de escritório moderno"

Exemplos ruins:

• "imagem.jpg" (nome do arquivo, não descrição)
• "encanador encanamento serviços de encanador" (excesso de palavras-chave)
• "Clique aqui" (não descritivo)

Tamanho do Arquivo

Limites escalonados por categoria de imagem:

Recomenda-se compressão para atingir as metas, sempre que possível, sem perda de qualidade.

Formato

Recomenda-se WebP/AVIF em vez de JPEG/PNG. Verifique o elemento <picture> com fallbacks de formato.

Padrão Recomendado para Elemento <picture>

Use aprimoramento progressivo com o formato mais eficiente primeiro:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descriptive alt text" width="800" height="600" loading="lazy" decoding="async">
</picture>

O navegador usará o primeiro formato suportado. Suporte atual dos navegadores: AVIF 93.8%, WebP 95.3%.

JPEG XL: Formato Emergente

Em novembro de 2025, a equipe do Chromium do Google reverteu sua decisão de 2022 e anunciou que restaurará o suporte ao JPEG XL no Chrome usando um decodificador baseado em Rust. A implementação está completa em termos de recursos, mas ainda não está no Chrome estável. O JPEG XL oferece recompra de JPEG sem perdas (cerca de 20% de economia sem perda de qualidade) e compressão com perdas competitiva. Ainda não é prático para implantação na web, mas vale a pena monitorar para adoção futura.

Imagens Responsivas

• Atributo srcset para múltiplos tamanhos
• Atributo sizes correspondendo aos pontos de interrupção do layout
• Resolução apropriada para proporções de pixels do dispositivo

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="Description"
>

Carregamento Preguiçoso (Lazy Loading)

• loading="lazy" em imagens abaixo da dobra (below-fold)
• NÃO carregue preguiçosamente imagens acima da dobra/principais (prejudica o LCP)
• Verifique carregamento preguiçoso nativo versus baseado em JavaScript

<!-- Below fold - lazy load -->
<img src="photo.jpg" loading="lazy" alt="Description">

<!-- Above fold - eager load (default) -->
<img src="hero.jpg" alt="Hero image">

fetchpriority="high" para Imagens LCP

Adicione fetchpriority="high" à sua imagem principal/LCP para priorizar seu download na fila de rede do navegador:

<img src="hero.webp" fetchpriority="high" alt="Hero image description" width="1200" height="630">

Crítico: NÃO carregue preguiçosamente imagens acima da dobra/LCP. Usar loading="lazy" em imagens LCP prejudica diretamente as pontuações de LCP. Reserve loading="lazy" apenas para imagens abaixo da dobra.

decoding="async" para Imagens Não-LCP

Adicione decoding="async" a imagens não-LCP para evitar que a decodificação da imagem bloqueie a thread principal:

<img src="photo.webp" alt="Description" width="600" height="400" loading="lazy" decoding="async">

Prevenção de CLS

• Atributos width e height definidos em todos os elementos <img>
• CSS aspect-ratio como alternativa
• Sinalizar imagens sem dimensões

<!-- Good - dimensions set -->
<img src="photo.jpg" width="800" height="600" alt="Description">

<!-- Good - CSS aspect ratio -->
<img src="photo.jpg" style="aspect-ratio: 4/3" alt="Description">

<!-- Bad - no dimensions -->
<img src="photo.jpg" alt="Description">

Nomes de Arquivo

• Descritivos: blue-running-shoes.webp em vez de IMG_1234.jpg
• Hifenizados, minúsculos, sem caracteres especiais

…