Como otimizar imagens para SEO: guia completo

Imagens são responsáveis por mais da metade do peso de uma página web típica. Isso as torna o maior alvo de otimização de desempenho — e desempenho é um fator de ranqueamento confirmado pelo Google. Mas otimizar imagens para SEO vai além de só reduzir o tamanho do arquivo: envolve nome de arquivo, texto alternativo, formato, dimensões e carregamento inteligente.

Este guia cobre cada um desses pontos de forma prática.

Os 5 pilares do SEO de imagens Nome descritivo, com hífens Texto alt descreva o conteúdo Tamanho < 200 KB quando der Formato WEBP antes, JPG reserva Lazy load adiar fora da tela Cada pilar contribui para os Core Web Vitals e a visibilidade na Busca de Imagens.
Os cinco fatores que o Google avalia ao indexar suas imagens.

Por que imagens afetam o SEO

O Google considera a velocidade de carregamento da página como fator de ranqueamento desde 2010 para desktop e desde 2018 para mobile. Em 2021, os Core Web Vitals tornaram essa métrica ainda mais central: o LCP (Largest Contentful Paint) mede quanto tempo leva para o maior elemento visível da página carregar — e, na maioria das páginas, esse elemento é uma imagem.

Além do desempenho direto, imagens bem otimizadas aparecem na pesquisa de imagens do Google, gerando tráfego adicional. Páginas com imagens relevantes e corretamente descritas também tendem a ter melhor taxa de clique nos resultados de busca quando o Google exibe snippets visuais.

Nome do arquivo: a primeira oportunidade ignorada

O Google lê o nome do arquivo como um sinal do conteúdo da imagem. Um arquivo chamado IMG_4823.jpg não transmite informação nenhuma. Já compressor-de-imagens-online.jpg diz exatamente o que é a imagem.

Boas práticas para nomear arquivos:

  • Use palavras descritivas separadas por hífens (não underscores)
  • Inclua a palavra-chave principal da página, quando relevante
  • Seja específico: foto-produto-tenis-branco-lateral.jpg é melhor que tenis.jpg
  • Evite nomes genéricos como imagem1.jpg, banner.png, foto.jpg

Texto alternativo (alt text): obrigatório, não opcional

O atributo alt existe para descrever a imagem a usuários que não podem vê-la — pessoas com deficiência visual usando leitores de tela, e também o robô do Google, que ainda não "vê" imagens com a mesma precisão que humanos.

Um bom alt text:

  • Descreve o que está na imagem de forma objetiva
  • Inclui a palavra-chave quando ela aparece naturalmente na descrição
  • Não começa com "Imagem de" ou "Foto de" — o Google já sabe que é uma imagem
  • Tem entre 5 e 15 palavras na maioria dos casos

Exemplo ruim: alt="imagem"
Exemplo bom: alt="compressor de imagens online reduzindo uma foto JPG de 5 MB para 800 KB"

Imagens decorativas (ícones, separadores, fundos) devem ter alt="" — alt vazio — para que leitores de tela as ignorem.

Tamanho e peso do arquivo: o impacto mais direto

Uma imagem de 3 MB em uma página que deveria carregar em 2 segundos pode sozinha fazer esse tempo ir para 8 segundos numa conexão móvel comum. O Google PageSpeed Insights identifica imagens não otimizadas como uma das recomendações mais frequentes.

Referências práticas de peso por tipo de uso:

  • Imagem de destaque de artigo: abaixo de 150 KB
  • Foto de produto em loja virtual: abaixo de 200 KB
  • Thumbnail/miniatura: abaixo de 50 KB
  • Banner hero de página inicial: abaixo de 300 KB
  • Ícones e logos SVG: abaixo de 10 KB (use SVG sempre que possível)

Para comprimir imagens antes de subir ao site, use o TinyFoto — processa JPG, PNG e WEBP no navegador, sem upload.

Formato ideal para SEO: JPG, PNG ou WEBP?

O Google PageSpeed Insights recomenda explicitamente servir imagens em "formatos next-gen" como WEBP e AVIF. A razão é simples: arquivos menores carregam mais rápido.

  • WEBP é a melhor escolha para a web: 25–35% menor que JPG com qualidade equivalente, suporta transparência, suportado por todos os navegadores modernos.
  • JPG é a escolha segura quando você não controla o ambiente (e-mail, download, impressão).
  • PNG só quando necessário: logos com transparência, capturas de tela com texto, imagens que precisam de nitidez absoluta.
  • SVG para ícones, logos e ilustrações vetoriais — escalável sem perda e geralmente muito menor que qualquer raster.

Para converter JPG ou PNG para WEBP, use o conversor de WEBP do TinyFoto.

Mesma imagem, três formatos Pesos aproximados de uma foto 1600×1066 com qualidade visual 85 PNG 1200 KB mais pesado só para transparência JPG 480 KB reserva universal segura WEBP 320 KB melhor para web
WEBP costuma ser 25–35% mais leve que JPG e até 4× mais leve que PNG.

Dimensões: não suba imagens maiores do que o necessário

Subir uma foto de 4000×3000 pixels para exibir em um bloco de 800×600 é desperdício puro. O navegador baixa os 4000px e redimensiona na hora de exibir — o usuário não vê diferença, mas pagou pela banda extra.

Redimensione a imagem para a largura máxima que ela vai ocupar na página, mais no máximo 2× para telas Retina/HiDPI. Uma imagem que ocupa 800px de largura em telas normais pode ter 1600px para telas de alta densidade — não mais que isso.

Lazy loading: carregar apenas o que está visível

O atributo loading="lazy" instrui o navegador a adiar o carregamento de imagens fora da área visível até que o usuário role a página até elas. Isso reduz o peso inicial da página e melhora o LCP.

Uso:

<img src="foto.webp" alt="descrição" loading="lazy" width="800" height="600">

Não aplique loading="lazy" na imagem principal acima da dobra (a primeira imagem visível sem rolar) — isso prejudica o LCP. Reserve para imagens secundárias e imagens no meio/fim da página.

Quando usar loading="lazy" Imagem hero (acima da dobra) loading="eager" — conta para o LCP NÃO marque como lazy dobra Imagem de conteúdo — loading="lazy" Imagem do rodapé — loading="lazy" ✓ carrega já ⏳ carrega ao rolar visível na hora economiza banda
Carregue o hero de imediato (elemento do LCP) e use lazy em tudo abaixo dele.

Defina sempre width e height no HTML

Incluir os atributos width e height na tag <img> permite que o navegador reserve o espaço correto antes de baixar a imagem, evitando o CLS (Cumulative Layout Shift) — que é outro Core Web Vital. Páginas com muito CLS perdem pontuação mesmo que carreguem rápido.

Checklist de otimização de imagens para SEO

  • Nome do arquivo descritivo com hífens e palavra-chave relevante
  • Atributo alt preenchido em todas as imagens de conteúdo
  • Formato WEBP para uso em site; JPG/PNG como fallback
  • Peso abaixo de 200 KB para a maioria das imagens
  • Dimensões ajustadas ao tamanho real de exibição (não maior)
  • loading="lazy" em imagens abaixo da dobra
  • width e height definidos em todas as tags <img>
  • Imagens indexáveis (não bloqueadas por robots.txt)

Otimizar imagens agora →