SEO de imagens: texto alternativo, tamanho de arquivo, formatos e lazy loading

As imagens deixam as páginas mais fáceis de entender e mais atraentes. Elas também podem trazer visitantes do Google Imagens e de recursos de busca visual. Mas costumam ser a parte mais pesada de uma página, e imagens não otimizadas são um dos motivos mais comuns de sites lentos.

SEO de imagens é acertar os dois lados: tornar as imagens compreensíveis para os buscadores e acessíveis a todos, mantendo-as rápidas.

Escreva um texto alternativo útil

O atributo alt descreve uma imagem em palavras:

<img src="latte-art.webp" alt="Barista pouring a heart-shaped latte art design into a white cup" width="1200" height="800">

O texto alternativo tem três funções:

1. Acessibilidade – os leitores de tela o leem para pessoas que não conseguem ver a imagem
2. Substituição – os navegadores o mostram se a imagem não carregar
3. Compreensão – os buscadores o usam, junto com o texto ao redor, para entender o que a imagem mostra

Como escrever um bom texto alternativo

• Descreva o que a imagem mostra e por que ela está na página
• Seja específico: “bicicleta dobrável Brompton vermelha dobrada ao lado de uma mesa” é melhor do que “bicicleta”
• Seja conciso – normalmente menos de 125 caracteres
• Não comece com “imagem de” ou “foto de”; os leitores de tela já anunciam que é uma imagem
• Use palavras-chave relevantes só quando descreverem a imagem de forma natural

Imagens decorativas

Imagens puramente decorativas – divisores, enfeites de fundo – devem ter um atributo alt vazio: alt="". Isso diz aos leitores de tela para ignorá-las. Omitir o atributo por completo é um erro; alguns leitores de tela vão ler o nome do arquivo.

Use nomes de arquivo descritivos

IMG_4821.jpg não diz nada a ninguém. bicicleta-dobravel-brompton-dobrada.jpg dá aos buscadores mais uma pista. Use palavras em minúsculas separadas por hífens.

Escolha o formato certo

Na maioria dos sites, servir WebP ou AVIF com o elemento <picture> (e JPEG como alternativa, se necessário) é a maior melhoria isolada:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Mountain lake at sunrise" width="1600" height="900">
</picture>

A maioria dos CMS, plugins de imagem e CDNs consegue converter imagens para formatos modernos automaticamente.

Redimensione e comprima

Um erro comum é enviar uma foto de 4.000 pixels de largura direto da câmera e exibi-la com 800 pixels de largura. O navegador ainda baixa o arquivo inteiro.

• Redimensione as imagens para o maior tamanho em que realmente são exibidas (o dobro para telas de alta densidade, se necessário)
• Comprima-as – configurações de qualidade em torno de 75–85% normalmente são indistinguíveis do original
• Procure deixar a maioria das imagens de conteúdo abaixo de 150–200 KB, e as imagens de destaque, de preferência, abaixo de 300 KB

Sirva imagens responsivas

Celulares não precisam de imagens do tamanho de desktop. Os atributos srcset e sizes deixam o navegador escolher o arquivo certo:

<img src="product-800.webp"
     srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Leather wallet in tan, open to show card slots" width="800" height="600">

O WordPress e a maioria dos frameworks modernos geram isso automaticamente.

Defina largura e altura para evitar mudanças de layout

Se uma imagem não tem os atributos width e height, o navegador não sabe quanto espaço reservar, e o conteúdo pula quando a imagem carrega. Isso prejudica o Cumulative Layout Shift (CLS), uma das Core Web Vitals. Sempre inclua as dimensões da imagem (ou use a propriedade CSS aspect-ratio); o CSS responsivo ainda consegue redimensioná-la.

Use lazy loading nas imagens abaixo da dobra

loading="lazy" diz ao navegador para carregar uma imagem só quando ela estiver prestes a aparecer na rolagem:

<img src="gallery-3.webp" alt="…" loading="lazy" width="600" height="400">

Use para as imagens mais abaixo na página, mas não para a imagem de destaque principal. Aplicar lazy loading à maior imagem da primeira tela atrasa o Largest Contentful Paint. Para essa imagem, considere usar fetchpriority="high".

Ajude as imagens a serem encontradas

• Coloque as imagens perto de textos relevantes e adicione legendas quando for útil – o Google usa o conteúdo ao redor para entender as imagens
• Use elementos <img> padrão em vez de fundos em CSS para imagens com significado, para que os buscadores possam encontrá-las
• Adicione as imagens ao seu sitemap XML, ou a um sitemap de imagens, se tiver um grande acervo
• Inclua uma imagem nos dados estruturados quando fizer sentido (Product, Article, Recipe)
• Defina um og:image para que compartilhamentos em redes sociais mostrem uma boa prévia

Checklist de SEO de imagens

• Texto alternativo descritivo em toda imagem com significado; alt vazio nas decorativas
• Nomes de arquivo descritivos, com hífens
• Formato WebP ou AVIF
• Redimensionadas para o tamanho de exibição e comprimidas
• srcset para entrega responsiva
• Atributos de largura e altura definidos
• Lazy loading nas imagens abaixo da dobra, não na de destaque
• Tempo de cache longo configurado no servidor ou na CDN

SEO de imagens para e-commerce

As imagens de produto vendem muito. Para lojas:

• Mostre vários ângulos e o produto em uso. O Google Imagens e os resultados de compras favorecem fotos de produto nítidas e de alta qualidade.
• Use uma imagem principal limpa e consistente para cada produto – ela costuma ser usada nos resultados de compras.
• Escreva um texto alternativo que identifique o produto e a variação: “Tênis de corrida feminino Trail Runner X verde-azulado, vista lateral.”
• Inclua as imagens nos dados estruturados de Product usando URLs absolutas.
• Imagens com zoom devem carregar a versão grande só quando necessário, e não ao carregar a página.

SEO de imagens para blogs e publishers

• Use imagens originais sempre que possível. Fotos, diagramas e gráficos originais podem atrair links e se destacar na busca de imagens; fotos de banco de imagens estão em milhares de sites.
• Adicione legendas quando a imagem transmitir informação. As legendas estão entre os textos mais lidos de uma página.
• Crie diagramas e infográficos compartilháveis para temas complexos, com as informações principais também escritas em texto.
• Escolha uma boa imagem de destaque com pelo menos 1200 pixels de largura. O Google Discover favorece imagens grandes e de alta qualidade, e você pode permitir prévias grandes com a configuração robots max-image-preview:large.

Imagens de fundo e CSS

Imagens definidas com background-image em CSS são invisíveis como conteúdo para os buscadores e não têm texto alternativo. Use-as só para decoração. Se uma imagem tem significado – um produto, um gráfico, uma foto da equipe –, use um elemento <img>.

CDNs de imagem e otimização automática

Gerenciar vários tamanhos e formatos à mão logo se torna impraticável. CDNs e serviços de imagem (Cloudflare Images, Cloudinary, imgix, Bunny Optimizer e outros) e muitos plugins de WordPress podem:

• Converter imagens para WebP ou AVIF automaticamente
• Redimensionar na hora para cada dispositivo
• Comprimir de forma inteligente
• Guardar as imagens em cache perto dos visitantes

Se você usar um desses serviços, confira se as URLs das imagens continuam estáveis e rastreáveis e se a CDN não bloqueia o Googlebot.

Medindo o impacto

Abra o relatório de Desempenho do Google Search Console e mude o tipo de pesquisa para Imagem para ver quantos cliques e impressões as suas imagens recebem e para quais consultas. Acompanhe as Core Web Vitals na mesma ferramenta para confirmar que a otimização de imagens está melhorando o Largest Contentful Paint e o Cumulative Layout Shift.

Erros comuns

1. Enviar fotos no tamanho da câmera e deixar o navegador reduzi-las
2. Atributos alt ausentes, ou texto alternativo cheio de palavras-chave
3. Aplicar lazy loading à imagem de destaque
4. Sem largura e altura, causando mudanças de layout
5. Texto embutido em imagens em vez de escrito em HTML – fica invisível para buscadores e leitores de tela e não pode ser traduzido
6. Bloquear pastas de imagens no robots.txt

Principais conclusões

• Escreva textos alternativos que descrevam o que a imagem mostra e por que ela está ali; use alt vazio nas imagens decorativas.
• Sirva WebP ou AVIF, redimensionados para o tamanho exibido e comprimidos.
• Sempre defina largura e altura para evitar mudanças de layout.
• Use lazy loading nas imagens abaixo da dobra, mas nunca na imagem de destaque principal.
• Use elementos img de verdade para imagens com significado, perto de textos relevantes e com nomes de arquivo descritivos.
• Confira os dados de busca de imagens no Search Console para medir o tráfego que as imagens trazem.

Perguntas frequentes

O texto alternativo ajuda no ranqueamento?

Ele ajuda as imagens a se posicionarem no Google Imagens e acrescenta contexto à página. Sua função principal é a acessibilidade, e escrevê-lo para pessoas normalmente também funciona melhor para os buscadores.

Devo usar WebP ou AVIF?

Os dois são bem suportados. O AVIF costuma gerar arquivos menores; o WebP codifica mais rápido e é mais aceito por ferramentas antigas. Muitos sites servem AVIF com WebP como alternativa.

Os nomes dos arquivos de imagem importam?

Um pouco. Nomes de arquivo descritivos são um pequeno sinal extra e facilitam a organização da sua biblioteca de mídia.

Lazy loading é bom para SEO?

Sim, quando usado corretamente. O loading="lazy" nativo é suportado pelo Google. Só não aplique lazy loading às imagens visíveis quando a página carrega.