SEO de imagens: texto alternativo, formatos, compressão e lazy load

O Google Imagens processa bilhões de buscas todo mês. Segundo dados da Jumpshot, cerca de 22% de todas as buscas na web envolvem busca de imagens. Para sites de e-commerce, plataformas de conteúdo e portfólios, esse é um canal de tráfego considerável que a maioria dos sites ignora por completo.

A otimização de imagens afeta não só a visibilidade no Google Imagens, mas também a busca orgânica: a velocidade de carregamento da página (LCP), os Core Web Vitals, a experiência do usuário e, de forma indireta, o ranqueamento na SERP principal.

zoom_in

Por que otimizar imagens para SEO

A otimização adequada de imagens resolve vários problemas ao mesmo tempo. Ela melhora a acessibilidade para usuários com deficiência visual, acelera o carregamento da página, dá ao Google um contexto claro e abre um canal extra de tráfego orgânico pelo Google Imagens.

zoom_in

As imagens são o tipo de recurso mais pesado na maioria das páginas. Imagens não otimizadas deixam o carregamento lento, pioram o LCP (Largest Contentful Paint) e afetam diretamente as pontuações de Core Web Vitals. Desde 2021, o Google considera os CWV como sinal de ranqueamento.

Texto alternativo: regras de escrita

O atributo alt (alt="...") é a única forma de explicar ao Google o que aparece em uma imagem. Ele também é exibido quando a imagem não carrega e é lido em voz alta por leitores de tela, para usuários com deficiência visual.

Como escrever corretamente

Regras para o texto alternativo: descreva o que está visível na imagem; inclua a palavra-chave de forma natural, se fizer sentido; não comece com expressões como 'imagem de...', 'foto de...' ou 'ilustração de...', porque o Google já sabe que se trata de uma imagem. Tamanho ideal: 5–15 palavras.

<!-- Informative image -->
<img
  src="/images/crawl-budget-chart.webp"
  alt="Crawl budget distribution chart by page type"
  width="800"
  height="450"
/>

<!-- Decorative image -->
<img
  src="/images/divider.svg"
  alt=""
  role="presentation"
/>

<!-- Image link: alt describes the link purpose -->
<a href="/tools">
  <img
    src="/images/seo-scripts-icon.webp"
    alt="SEO Scripts: tools for technical audits"
    width="64"
    height="64"
  />
</a>

Nomes de arquivos e caminhos

O Google analisa o nome do arquivo de imagem como um sinal adicional. O nome DSC_0047.jpg não diz nada; canonical-url-diagram.webp indica o tema e o contexto.

Formatos: WebP, AVIF, JPEG, PNG

A escolha do formato é um dos principais fatores de otimização. Formatos modernos, como WebP e AVIF, entregam arquivos bem menores com a mesma qualidade visual.

Estratégia recomendada: use WebP como formato principal, com JPEG como alternativa pelo elemento <picture>. Migre para AVIF quando a maior parte do seu público estiver no Chrome 85+ e no Safari 16+. Use SVG para todos os gráficos vetoriais, sem exceção.

<!-- Modern approach: AVIF → WebP → JPEG -->
<picture>
  <source srcset="/images/hero.avif" type="image/avif" />
  <source srcset="/images/hero.webp" type="image/webp" />
  <img
    src="/images/hero.jpg"
    alt="SEO audit of an online store: 340% traffic growth"
    width="1200"
    height="675"
    loading="eager"
    fetchpriority="high"
  />
</picture>

Compressão sem perda de qualidade

A maioria das imagens pode ser comprimida em 30–70% sem perda visível de qualidade. Ferramentas principais: Squoosh (online), ImageMagick (CLI), Sharp (Node.js) e Pillow (Python).

Configurações ideais de qualidade

// Next.js: automatic optimisation via next/image
import Image from 'next/image';

// next/image automatically:
// - converts to WebP/AVIF
// - generates srcset
// - adds lazy loading
// - prevents layout shift (requires width/height)
export function HeroImage() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="Organic traffic growth after SEO audit"
      width={1200}
      height={675}
      priority // disables lazy load for the hero image
    />
  );
}

Lazy loading e loading='eager'

O lazy loading adia o carregamento das imagens fora da tela até que o usuário role a página até elas. Isso reduz o peso inicial da página e acelera o Time to Interactive.

<!-- Below-fold images: lazy loading -->
<img
  src="/images/article-thumbnail.webp"
  alt="XML sitemap audit screenshot"
  width="400"
  height="225"
  loading="lazy"
/>

<!-- Hero and LCP images: eager + fetchpriority -->
<img
  src="/images/hero.webp"
  alt="Real-time SEO analytics"
  width="1200"
  height="675"
  loading="eager"
  fetchpriority="high"
/>

Dimensões, srcset e direção de arte

Sempre especifique os atributos width e height. Isso permite que o navegador reserve o espaço da imagem antes do carregamento e evita o Cumulative Layout Shift (CLS), ou seja, o conteúdo que se desloca durante o carregamento.

<!-- srcset: different sizes for different screens -->
<img
  src="/images/blog-cover.webp"
  srcset="
    /images/blog-cover-480.webp 480w,
    /images/blog-cover-800.webp 800w,
    /images/blog-cover-1200.webp 1200w
  "
  sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px"
  alt="Internal linking architecture guide: site structure diagram"
  width="1200"
  height="675"
  loading="lazy"
/>

O atributo srcset permite que o navegador escolha o tamanho ideal da imagem para a tela atual e a densidade de pixels. Em um dispositivo móvel com 2x DPI, o navegador carrega a versão de 800px em vez da de 1200px, economizando banda e acelerando a página.

Dados estruturados

A marcação Schema.org ajuda o Google a exibir imagens em resultados avançados, como cards de produto, receitas e artigos. Os tipos mais relevantes para imagens são ImageObject, Article, Product e Recipe.

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Image SEO: complete guide",
  "image": {
    "@type": "ImageObject",
    "url": "https://seohead.tech/images/blog/image-seo.webp",
    "width": 1200,
    "height": 675,
    "caption": "Image optimisation for search: formats, alt text, compression"
  },
  "datePublished": "2026-05-17",
  "author": {
    "@type": "Person",
    "name": "seohead"
  }
}

Sitemap de imagens

O Google recomenda incluir informações de imagem no seu sitemap XML. Isso ajuda a indexar imagens carregadas via JavaScript e fornece contexto adicional, como título, legenda e licença.

<?xml version="1.0" encoding="UTF-8"?>
<urlset
  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
>
  <url>
    <loc>https://seohead.tech/blog/image-seo</loc>
    <image:image>
      <image:loc>https://seohead.tech/images/blog/image-seo.webp</image:loc>
      <image:title>Image SEO: alt text, formats, compression, and lazy load</image:title>
      <image:caption>Complete guide to image optimisation for search</image:caption>
    </image:image>
  </url>
</urlset>

FAQ