SEO de imagens é o cuidado que faz uma imagem ser entendida pelo Google, aparecer no Google Imagens e não deixar a página lenta. Na prática, são quatro ajustes: um texto alternativo que descreve a imagem para quem não pode vê-la, um formato moderno como WebP ou AVIF, um arquivo do tamanho da tela em que ele aparece e o carregamento sob demanda das imagens que ficam mais abaixo, sem atrasar a primeira. Este guia mostra cada um com exemplos, o que dizem o Google, o W3C e a MDN e como fazer no WordPress e no Wix sem plugin pago.
O que o Google usa para entender uma imagem?
Texto. Segundo a página de práticas recomendadas para o Google Imagens, o buscador combina o atributo alt com visão computacional e com o conteúdo da página para entender do que a imagem trata. Entram nessa leitura o nome do arquivo, a legenda, o texto próximo e o título da página.
Antes de qualquer descrição, a imagem precisa ser encontrada. Duas regras da mesma documentação pegam muita gente:
- Use a tag
<img>. O Google acha a imagem no atributosrcdessa tag, inclusive dentro de um<picture>. Imagem colocada como fundo pelo CSS (background-image) não é indexada. Para foto de produto ou de serviço, isso decide se ela existe ou não para a busca. - Dê um nome que diga o que é. O Google compara
my-new-black-kitten.jpgcomIMG00023.JPGe prefere o primeiro. Em português,bolo-de-cenoura-com-cobertura.webpexplica mais queWhatsApp-Image-2026-10-20.jpeg.
Deixe a imagem perto do texto que fala dela, numa página que trate do mesmo assunto. Se o site carrega imagens que o robô não acha pelo HTML, o sitemap de imagem serve para listá-las. E, nos dados estruturados, a propriedade image é o que pode levar a foto aos resultados aprimorados e ao selo do Google Imagens; o guia de dados estruturados explica como montar a marcação.
Como escrever um bom texto alternativo?
Escreva o que uma pessoa perderia se não visse a imagem, em uma frase curta. O texto alternativo (o atributo alt, também chamado de alt text) existe primeiro para quem usa leitor de tela: o programa lê esse texto em voz alta no lugar da imagem. Ele também aparece quando a imagem não carrega, e é a mesma descrição que o Google usa. Uma descrição boa para quem não enxerga costuma ser boa para o buscador.
O W3C, que mantém as diretrizes de acessibilidade da web, dá um teste prático: imagine que você está lendo a página por telefone para alguém que precisa entendê-la. O que você diria sobre a imagem? Três cuidados completam a regra:
- Seja específico e curto. O W3C pede a descrição mais concisa possível do propósito da imagem, com o mais importante no começo.
- Não comece com "imagem de" ou "foto de". O leitor de tela já avisa que é uma imagem.
- Não empilhe palavras-chave. O Google trata o excesso como experiência ruim e possível spam.
| Situação | Ruim | Bom |
|---|---|---|
| Foto de produto | alt="tênis" |
alt="Tênis de corrida azul-marinho com solado branco, visto de lado" |
| Foto de prato | alt="feijoada feijoada completa melhor feijoada SP" |
alt="Feijoada com couve, farofa e laranja servida em panela de barro" |
| Banner com texto escrito | alt="banner" |
alt="Frete grátis nas compras acima de R$ 199" |
| Foto da equipe | alt="IMG_2034.jpg" |
alt="Equipe da oficina reunida em frente à fachada da loja" |
Repare na terceira linha. Quando a imagem traz um texto que não aparece em outro lugar da página, a árvore de decisão do W3C manda pôr o próprio texto no alt. Gráfico ou infográfico vai além: o alt resume, e os dados precisam estar escritos na página, numa tabela ou num parágrafo.
Quando deixar o texto alternativo vazio?
Quando a imagem não acrescenta informação: um enfeite, uma textura, um ícone ao lado de um texto que já diz tudo, uma foto ilustrativa repetida pela legenda. Nesses casos o certo é alt="", com as aspas coladas, sem espaço entre elas. O leitor de tela entende que pode pular a imagem.
Vazio não é o mesmo que ausente. Sem o atributo, alguns leitores de tela anunciam o nome do arquivo, e a pessoa ouve algo como "dsc zero quatro cinco sete ponto jota pê gê". Por isso a regra de texto alternativo do Nota do Site aceita alt="" e só cobra a imagem que está sem o atributo.
O caso oposto é a imagem que funciona como link ou botão. Aí o alt descreve o destino ou a ação, e não a aparência: o logotipo que leva à página inicial pode ter alt="Padaria Pão Quente, página inicial", e a lupa da busca, alt="Buscar no site". O Google usa esse alt como texto do link, e um link de imagem sem descrição fica sem texto nenhum, como mostra o guia de linkagem interna.
Qual formato usar: WebP, AVIF, JPEG, PNG ou SVG?
Para foto, use WebP ou AVIF. A web.dev, site do Google sobre desenvolvimento web, diz que os dois em geral comprimem melhor que os formatos antigos, e a página oficial do WebP dá a medida: com perda, ele fica de 25% a 34% menor que um JPEG de qualidade equivalente; sem perda, 26% menor que um PNG. Os formatos antigos ainda têm lugar:
| O que é a imagem | Formato | Por quê |
|---|---|---|
| Foto, banner com foto | AVIF ou WebP, com JPEG de reserva se precisar | Compressão com perda que o olho quase não percebe |
| Captura de tela, texto, desenho com linhas finas | PNG ou WebP sem perda | A compressão com perda borra letras e bordas |
| Logotipo, ícone, gráfico simples | SVG | É vetor: fica nítido em qualquer tamanho |
| Animação | Vídeo (<video>) em vez de GIF |
O GIF tem no máximo 256 cores e pesa mais que um vídeo |
O Google Imagens aceita BMP, GIF, JPEG, PNG, WebP, SVG e AVIF. Nos navegadores, a MDN registra o WebP nas versões atuais de Chrome, Edge, Firefox, Opera e Safari, e o AVIF a partir do Chrome 85, Edge 121, Firefox 93 e Safari 16.1. Como aparelhos antigos ainda circulam, a própria MDN sugere oferecer uma reserva com o elemento <picture>:
<picture>
<source srcset="bolo-de-cenoura.avif" type="image/avif">
<source srcset="bolo-de-cenoura.webp" type="image/webp">
<img src="bolo-de-cenoura.jpg" alt="Bolo de cenoura com cobertura de chocolate"
width="800" height="600">
</picture>
O navegador pega o primeiro formato que entende. O alt fica no <img>, e o src dele é a reserva que o Google pede que sempre exista.
Qual o tamanho certo da imagem para cada tela?
O tamanho em que ela aparece. Não existe número oficial de pixels nem de quilobytes. O que existe é desperdício fácil de medir: uma foto de 3.000 pixels de largura num espaço de 750 manda ao celular quatro vezes a largura que ele vai mostrar. Em peso, o validador do Nota do Site marca como pesada a imagem acima de 200 KB. É uma régua nossa, e não do Google.
Para servir o tamanho certo a cada tela, o HTML tem o srcset. Você entrega o mesmo arquivo em algumas larguras e conta ao navegador quanto espaço a imagem ocupa; ele escolhe o arquivo que basta para aquela tela:
<img src="vitrine-800.webp"
srcset="vitrine-400.webp 400w, vitrine-800.webp 800w, vitrine-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Vitrine da loja com vestidos de festa coloridos"
width="800" height="533">
Em palavras: o 400w quer dizer "este arquivo tem 400 pixels de largura", e o sizes diz que a imagem ocupa a tela toda até 600 pixels e 800 pixels depois disso. Um celular simples baixa a versão de 400; uma tela de alta densidade pode pedir a de 1600 para ficar nítida. Os atributos width e height reservam o espaço antes de a imagem chegar; por que isso evita a página pulando está no diagnóstico de site lento.
Como carregar imagens sob demanda sem atrasar a principal?
Use loading="lazy" nas imagens que ficam abaixo da primeira tela e nunca na imagem principal. Com esse atributo, o navegador só busca a imagem quando ela se aproxima da área visível. A web.dev é direta sobre o limite: não use carregamento sob demanda em imagens que provavelmente estarão visíveis quando a página abre, principalmente a do LCP, a métrica do tempo até o maior bloco da tela ser exibido. Para essa imagem, a dica é o contrário: fetchpriority="high", que pede ao navegador para buscá-la antes das outras.
<!-- Imagem do topo: carrega já, com prioridade -->
<img src="capa.webp" alt="Fachada da loja na Rua Augusta" width="1200" height="675" fetchpriority="high">
<!-- Imagens mais abaixo: só quando o visitante chegar perto -->
<img src="produto-2.webp" alt="Bolsa de couro caramelo com alça transversal" width="600" height="600" loading="lazy">
O jeito de carregar também muda o que o robô vê. O Google aceita o carregamento sob demanda do próprio navegador e o feito por JavaScript que não depende de rolagem ou clique, e pede para conferir na Inspeção de URL se o endereço da imagem aparece no atributo src. O atributo loading="lazy" deixa o endereço no src, à vista de qualquer leitor do HTML. Já os scripts que guardam o endereço em data-src e só o copiam para o src depois de rodar deixam a imagem invisível para quem não executa JavaScript.
As IAs enxergam as imagens do seu site?
O que elas fazem com o arquivo, nenhuma empresa de IA documenta. O que se sabe vem de medição, e os dados mais concretos são da Vercel, de dezembro de 2024: os robôs da OpenAI e da Anthropic não executam JavaScript, e cada um prioriza um tipo de arquivo. Do robô do ChatGPT, 57,7% dos pedidos eram páginas HTML; do robô do Claude, 35,17% eram imagens.
Daí dá para tirar duas conclusões seguras. Primeiro, a imagem que só aparece depois de um script não chega a esses robôs, nem o endereço dela. Segundo, o alt, a legenda e o texto em volta estão no próprio HTML, e qualquer sistema que leia a página recebe essa descrição junto com o resto do texto, sem precisar abrir o arquivo da imagem. Quer conferir no seu site? Passe a página pelo teste como a IA vê sua página: o resultado é o texto que fica quando nenhum script roda. Se a meta é virar fonte nas respostas do ChatGPT, o roteiro para o site ser citado por lá reúne o resto.
O que as imagens de 53 sites brasileiros mostraram?
Mostraram problema nas três frentes deste guia. Os números vêm das páginas iniciais de 53 domínios brasileiros que o validador leu nos dias 20, 21 e 22 de outubro de 2026. Cada regra conta só os sites em que ela pôde ser medida:
| Regra | O que encontramos |
|---|---|
| Texto alternativo | 3 de 48 sites falham (mais de 20% das imagens sem o atributo) e 14 têm alerta |
| Formato e peso | 3 de 22 sites falham e 15 têm alerta (só 22 tinham arquivos de imagem que deu para medir) |
| Carregamento sob demanda | 17 de 47 com alerta: imagem principal com lazy ou, em páginas com 4 imagens ou mais, nenhuma com lazy |
Os alertas de formato mostram o padrão: uma página com 0 de 4 imagens em WebP ou AVIF, outra com 0 de 19 e uma delas acima de 200 KB. Para a regra passar, nenhuma imagem pode ter mais de 200 KB e pelo menos metade precisa estar em formato moderno. E em 37 de 47 páginas, mais de 30% das imagens estavam sem largura e altura declaradas, número que o post sobre site lento já detalha.
Como fazer no WordPress e no Wix sem plugin pago?
No WordPress, boa parte do trabalho já vem pronta desde versões antigas:
- Texto alternativo: selecione o bloco de imagem e preencha "Texto alternativo" na aba Conteúdo das configurações. Para enfeite, marque a opção de imagem decorativa. O alt escrito na Biblioteca de Mídia vira o padrão para os próximos usos; o do bloco vale só naquela página.
- Tamanho: o WordPress gera cópias menores de cada imagem enviada e, desde a versão 4.4, escreve o
srcsete osizessozinho. Envie a foto já com uma largura razoável e escolha a resolução no bloco. - Carregamento: desde a 5.5, o WordPress põe
loading="lazy"nas imagens com largura e altura. Desde a 6.3, deixa sem lazy as primeiras imagens da página (até 3, por padrão) e acrescentafetchpriority="high"na que provavelmente é a principal. - Formato: o WordPress aceita envio em WebP e, desde a 6.5, em AVIF, se o servidor tiver suporte (veja em Ferramentas, Saúde do site, Informação, Manipulação de mídia). Ele não converte sozinho o JPEG que você envia. Sem plugin, converta antes: o Squoosh, aplicativo de código aberto do Google Chrome Labs, comprime e troca o formato no próprio navegador, sem mandar a imagem a um servidor.
No Wix, clique na imagem, abra Configurações e preencha o campo "Descrição da imagem - Diga ao Google", que é o texto alternativo. Para enfeite, marque "Esta imagem é decorativa, não precisa de descrição". Só dá para marcar com o campo de descrição vazio.
Depois de qualquer mudança, abra o código-fonte da página (Ctrl+U) e procure por <img. É ali que dá para ver se o alt, o srcset e o loading saíram como você esperava.
Como cuidamos das imagens deste blog?
Nenhum arquivo enviado ao blog do Nota do Site vai ao ar como chegou. O servidor abre cada imagem e grava uma versão nossa em WebP, o que também apaga os metadados da foto, inclusive a localização que o celular registra. O nome do arquivo leva as medidas, como capa-1200x675.webp, e delas saem o width e o height do HTML. A capa do post carrega com fetchpriority="high" e sem lazy; as imagens do meio do texto recebem loading="lazy". A única exceção ao WebP é a imagem de compartilhamento, que sai em JPG de 1200 × 630, pelos motivos do guia do Open Graph.
Fizemos assim por um motivo simples: regra que depende de lembrar falha no dia corrido. Quando o formato e as medidas saem do código, ninguém precisa lembrar.
Quais imagens corrigir primeiro?
Abra a página que mais vende ou mais recebe visitas e conte as imagens sem alt ou com alt genérico. Escreva uma frase para cada uma e deixe vazio só o que é enfeite. Depois converta as fotos maiores para WebP, confira se a imagem do topo está sem loading="lazy" e rode a análise gratuita do site para ver as regras de texto alternativo, formato e carregamento na sua página inicial.
