Guia Completo de Otimização de Imagens para SEO

Imagens mal otimizadas custam aos sites posições no ranking, conversões e receita. Este guia cobre todos os aspectos da otimização de imagens para SEO: formatos, compressão, redimensionamento, nomes de arquivo, texto alternativo, lazy loading e como o JPEGMinify se encaixa no fluxo de trabalho.

1. Escolha o formato certo

• JPEG: Fotografias, imagens com muitas cores. Melhor suporte universal.
• PNG: Imagens com transparência, capturas de tela, logos. Sem perdas mas arquivos maiores.
• WebP: Substituto moderno para JPEG/PNG. 25–35% menor. Suporte em 95%+ dos navegadores.
• SVG: Ícones, logotipos, ilustrações. Infinitamente escalável.
• AVIF: Melhor compressão mas suporte ainda em amadurecimento.

2. Comprima antes de fazer upload

Use o JPEGMinify para comprimir imagens antes de enviá-las para seu site. Imagens menores melhoram o LCP (Largest Contentful Paint) — uma métrica crucial de Core Web Vitals que o Google usa no ranking.

Metas de tamanho por tipo de imagem:

• Imagem hero: < 200 KB
• Imagem de produto: < 100 KB
• Miniatura / card: < 30 KB

3. Redimensione para o tamanho de exibição

Uma imagem de 4000 px exibida em 800 px desperdiça largura de banda. Redimensione para a largura máxima que será exibida. O JPEGMinify inclui um controle de largura máxima nas configurações.

4. Use nomes de arquivo descritivos

Ruim: IMG_20240315_093012.jpg
Bom: sapatos-corrida-nike-air-max-90.jpg

O Google indexa nomes de arquivos e os usa como um sinal de relevância fraco mas real.

5. Escreva texto alternativo descritivo

O atributo alt descreve a imagem para motores de busca e leitores de tela:

<img src="calcados.jpg" alt="Nike Air Max 90 em preto e branco, tamanho 42" />

Seja específico e descritivo. Evite começar com "Imagem de" ou "Foto de".

6. Use lazy loading para imagens abaixo do fold

<img src="produto.jpg" alt="..." loading="lazy" width="800" height="600" />

Adicione sempre width e height para evitar mudanças de layout (CLS).

7. Priorize a imagem LCP

<img src="hero.jpg" alt="..." fetchpriority="high" loading="eager" />

Para a imagem principal acima do fold, use fetchpriority="high" para garantir carregamento rápido.

8. Envie um sitemap de imagens

Inclua imagens no seu sitemap XML para ajudar o Google a descobri-las mais rapidamente:

<image:image>
  <image:loc>https://exemplo.com/imagens/produto.jpg</image:loc>
  <image:title>Nike Air Max 90</image:title>
</image:image>

Guias relacionados

• Como Reduzir o Tamanho do JPEG Sem Perder Qualidade
• Melhores Formatos de Imagem para a Web: JPEG, PNG, WebP, AVIF, SVG
• Como JPEGs Progressivos Melhoram a Velocidade do Site