Este guia explica por que otimizar imagens, qual formato usar em 2026, como comprimir sem perder qualidade, como escrever nome de arquivo e alt, como aparecer no Google Imagens e no Lens, e fecha com um checklist de 12 itens e as ferramentas que dispensam programador.
Por que otimizar imagens? Peso e LCP
Porque imagem é o que mais pesa numa página. O Web Almanac 2025 do HTTP Archive, publicado em janeiro de 2026 a partir de dados de julho de 2025, mediu a página mediana em 2.164 KB no celular e 2.412 KB no desktop. Nas páginas iniciais, as imagens sozinhas somam 911 KB no celular e 1.058 KB no desktop, o maior tipo de recurso fora vídeo. Em páginas internas, 354 KB e 442 KB.
Fonte: HTTP Archive, Web Almanac 2025, capítulo Page Weight, dados de julho de 2025, publicado em janeiro de 2026.
O peso vira tempo, e o tempo vira métrica: o LCP (Largest Contentful Paint) dos Core Web Vitals mede quando o maior elemento da primeira dobra aparece, e esse elemento costuma ser uma imagem. A documentação do Google em web.dev define o limite bom em 2,5 segundos. Uma capa de 800 KB numa conexão de celular consome boa parte disso sozinha.
O segundo motivo é tráfego. O Google Imagens é uma aba da busca com volume próprio, e o Google Lens, a busca visual, é "usado em quase 20 bilhões de buscas visuais por mês", segundo Elizabeth Reid, vice-presidente de busca do Google, num post do blog oficial em outubro de 2024. Uma imagem que o Google entende é uma porta de entrada que a página de texto não tem.
Qual formato de imagem usar em 2026?
WebP para tudo, AVIF onde o fluxo de trabalho permitir, e JPEG ou PNG só como reserva. Os dados que sustentam a escolha:
Formato | Suporte nos navegadores | Uso na web (2024) | Quando usar |
|---|---|---|---|
WebP | 96,8% dos usuários (Chrome 32+, Firefox 65+, Safari 16+, Edge 18+) | 12% das imagens | Padrão para foto e ilustração |
AVIF | 95,4% (Chrome 85+, Firefox 93+, Safari 16.4+, Edge 121+) | 1,0% das imagens | Menor que WebP na mesma qualidade; exige ferramenta que exporte |
JPEG | Universal | sem dado no capítulo | Reserva para navegadores antigos |
PNG | Universal | Capturas de tela, logos | Só quando precisa de transparência sem perda; senão, WebP |
SVG | Universal | Ícones, logos vetoriais | Tudo o que é vetor: escala sem peso |
Fonte: caniuse.com, WebP e AVIF, consultado em setembro de 2026; HTTP Archive, Web Almanac 2024, capítulo Media, dados de junho de 2024.
A documentação de SEO para imagens do Google Search Central, atualizada em março de 2026, lista os formatos que o Google indexa no atributo src: BMP, GIF, JPEG, PNG, WebP, SVG e AVIF. Ou seja, os dois formatos modernos são indexados sem ressalva.
A diferença entre WebP e AVIF, na prática: o AVIF gera arquivos menores na mesma qualidade visual, mas demora mais para codificar e alguns CMS ainda não o exportam por padrão. Se a plataforma converte para AVIF automaticamente (o componente de imagem do Next.js, alguns CDNs, que são as redes de servidores que entregam os arquivos, e alguns plugins de otimização do WordPress), use. Se exige processo manual, o WebP resolve. O Web Almanac 2024 registrou o AVIF em 1% das imagens, quase quatro vezes mais do que em 2022, e o WebP em 12%.
Uma técnica que a documentação do Google aceita é servir os dois: a tag <picture> com uma <source> em AVIF, outra em WebP e o <img> em JPEG como reserva. O navegador escolhe o primeiro formato que suporta. Só 9,3% das páginas usavam <picture> em 2024, segundo o Web Almanac.
Como comprimir imagens sem perder qualidade?
Compressão é a etapa que costuma ficar de fora do fluxo de publicação. Três regras:
- Redimensione antes de comprimir. Uma foto de câmera tem 4.000 pixels de largura; a coluna de texto do site tem 800. Servir a foto original e deixar o navegador encolher é gastar muitas vezes o peso necessário (a área em pixels é 25 vezes maior). Exporte na largura em que a imagem será exibida (ou no dobro, para telas de alta densidade).
- Use compressão com perda, em qualidade 75 a 85. Em WebP e JPEG, a qualidade 80 é o ponto em que o olho não distingue do original e o arquivo cai para uma fração. Qualidade 100 é quase sem compressão.
- Ofereça tamanhos diferentes com
srcset. O atributo lista versões da mesma imagem em larguras diferentes, e o navegador baixa a que cabe na tela. O Web Almanac 2024 encontrousrcsetem 42% das páginas, e um detalhe: o atributosizes, que informa a largura de exibição, estava em média 16% maior do que o necessário no celular, fazendo o navegador baixar imagem maior do que precisa.
A referência de peso: no Web Almanac 2024, a imagem mediana da web pesava 12 KB e a maior imagem de cada página, no percentil 50, 135 KB. Uma capa de artigo em 1200 por 630 pixels, em WebP a 80, fica entre 60 e 150 KB. Acima de 200 KB numa imagem de conteúdo, algo está errado no fluxo.
Lazy loading é a outra metade: loading="lazy" no <img> faz o navegador adiar o download das imagens fora da tela até a pessoa rolar. A documentação do Google sobre lazy loading aceita o atributo nativo, o IntersectionObserver (um recurso do navegador que avisa quando um elemento entra na tela) e bibliotecas, com uma regra: carregar pela visibilidade, nunca por scroll ou clique, porque "a Pesquisa Google não interage com a sua página". E uma ressalva que o Web Almanac 2024 mostra ser ignorada: 9,5% das imagens de LCP tinham lazy loading, o que atrasa a imagem que a métrica mede. Imagem acima da dobra carrega na hora; o lazy é para o resto. O guia de above the fold detalha.
Nome de arquivo e alt: como escrever para SEO?
A documentação de SEO para imagens do Google trata dos dois:
Nome do arquivo. O exemplo oficial: my-new-black-kitten.jpg é melhor que image1.jpg. Palavras separadas por hífen, minúsculas, sem acento, descrevendo o conteúdo. Este blog acrescenta o prefixo da marca (iloveseo-capa-seo-para-imagens.webp), que identifica a origem quando a imagem é copiada.
Alt. É o texto alternativo que descreve a imagem para quem não a vê e para o Google, que, segundo a mesma documentação, usa o alt "junto com algoritmos de visão computacional e o conteúdo da página para entender o assunto da imagem". A regra é descrever o que a imagem mostra, em uma frase, e a documentação avisa contra encher o alt de palavras-chave. O guia de alt text tem a fórmula e os exemplos.
Dois pontos da documentação que os guias esquecem:
- Posição. Coloque a imagem "perto do texto relevante". O Google usa o texto ao redor para entender a imagem, e uma foto de produto no meio de um texto sobre outro assunto perde contexto.
- Tag
<img>, não fundo de CSS. Imagem definida comobackground-imageno CSS "não é indexada". Se a imagem tem conteúdo, vai numa tag<img>(ou<picture>).
Como aparecer no Google Imagens e no Lens?
O Google Imagens indexa as imagens que encontra nas páginas rastreadas, e a documentação lista o que ajuda a aparecer:
- Imagens de alta qualidade, nítidas e com tamanho suficiente. Miniaturas não ranqueiam.
- Título e descrição da página relevantes: o Google usa os dois para entender a imagem.
- Sitemap de imagens. A documentação de sitemaps de imagens diz que é útil sobretudo quando as imagens estão num CDN ou domínio diferente, que o rastreador pode não ligar à página. As tags obrigatórias são
<image:image>e<image:loc>, até 1.000 imagens por URL; as antigascaption,title,geo_locationelicenseforam descontinuadas. O guia de sitemap mostra a estrutura. - Dados estruturados com a imagem: Article com
image, Product comimage. A imagem marcada é a que aparece nos rich results e no Discover. O guia de dados estruturados tem o JSON-LD. - Open Graph. A documentação de SEO para imagens cita a
og:imageentre os sinais. É a mesma imagem que aparece no cartão do WhatsApp; detalhes no guia de Open Graph.
O Lens funciona sobre o mesmo índice: quando alguém aponta a câmera para um tênis, o Google busca imagens parecidas e mostra as páginas em que elas estão, com preço quando há marcação de Product. Não existe otimização específica para o Lens além de ter a imagem indexada, nítida e ligada a dados estruturados.
Checklist de SEO para imagens em 12 itens
Para conferir uma página ou um template:
- Formato WebP (ou AVIF com WebP de reserva) para fotos e ilustrações; SVG para vetores.
- Largura exportada igual à de exibição, ou o dobro para telas de alta densidade.
- Compressão em qualidade 75 a 85; imagem de conteúdo abaixo de 200 KB.
srcsetcom pelo menos três larguras esizescorreto.widtheheightdeclarados na tag, para o navegador reservar o espaço e evitar salto de layout (o CLS dos Core Web Vitals).loading="lazy"em tudo que está fora da primeira dobra; nada de lazy na imagem principal.- Nome de arquivo descritivo, com hífens, sem acento.
- Alt descritivo em toda imagem de conteúdo;
alt=""em imagem decorativa. - Imagem na tag
<img>ou<picture>, nunca só como fundo de CSS, quando tem conteúdo. - Imagem perto do texto relacionado.
- Imagem principal declarada nos dados estruturados e na
og:image. - Sitemap de imagens, se as imagens vivem num CDN ou domínio separado.
Um teste rápido para a página inteira: o PageSpeed Insights, em pagespeed.web.dev, lista em "Diagnóstico" as imagens sem dimensão, sem formato moderno, maiores que o necessário e com lazy loading no elemento LCP. É a auditoria dos itens 1 a 6 em um relatório.
Quais ferramentas de SEO para imagens dispensam dev?
Para converter e comprimir sem instalar nada:
- Squoosh (squoosh.app), do Google Chrome Labs. Roda no navegador, converte para WebP e AVIF, mostra o antes e depois lado a lado com o peso de cada um, e a documentação afirma que "as imagens nunca saem do seu dispositivo". É a ferramenta para tratar uma imagem por vez com controle total.
- TinyPNG (tinypng.com). Comprime PNG, JPEG, WebP e AVIF em lote, gratuito até 20 imagens por vez de até 5 MB cada. Menos controle, mais velocidade.
Para automatizar no CMS:
- WordPress: plugins como Imagify, ShortPixel e EWWW convertem para WebP (e AVIF, em alguns) no upload, geram os tamanhos do
srcsete aplicam lazy loading. O próprio WordPress gerasrcsete lazy loading desde as versões 4.4 e 5.5, respectivamente. - Shopify, Wix, Webflow: entregam WebP e redimensionam automaticamente pelo CDN da plataforma; o que fica com você é o nome do arquivo antes do upload e o alt.
- Next.js e sites em código: o componente de imagem do Next.js converte para WebP ou AVIF, gera tamanhos e aplica lazy loading por padrão.
Em todos os casos, o que nenhuma ferramenta faz sozinha é escrever o alt e escolher a imagem certa para a primeira dobra. O guia de otimização de sites coloca as imagens na ordem certa em relação ao resto da velocidade.
Conclusão
SEO para imagens é fazer cada imagem pesar o mínimo, carregar na hora certa e ser entendida: WebP ou AVIF, exportada na largura de exibição e comprimida a 80, com srcset, dimensões declaradas, lazy loading fora da dobra, nome de arquivo e alt descritivos, e marcação nos dados estruturados. Imagens são o maior peso da página mediana segundo o Web Almanac, e o elemento que o LCP mede. O próximo passo é rodar o PageSpeed Insights na sua página mais visitada e corrigir o primeiro item da lista de diagnóstico de imagens que ele apontar.
