Imagens são, na maioria dos sites, o que mais pesa no carregamento. Uma única foto tirada com celular pode ter 4 MB — mais do que todo o código da página somado. Otimizar imagens é, por isso, uma das melhorias de velocidade com melhor custo-benefício que existem, e também uma forma direta de aparecer no Google Imagens.
1. Escolha o formato certo
Para a web, o WebP é hoje a escolha mais segura. Segundo a documentação do Google, ele gera arquivos de 25% a 34% menores que JPG com qualidade equivalente e cerca de 26% menores que PNG sem perda, além de aceitar transparência. Todos os navegadores atuais o exibem.
| Tipo de imagem | Formato recomendado |
|---|---|
| Fotos | WebP com qualidade 75–85 |
| Logos e ícones com transparência | SVG, quando houver; senão WebP com qualidade 95–100 |
| Capturas de tela | WebP com qualidade 90 |
| Animações curtas | Vídeo MP4/WebM em vez de GIF |
O AVIF comprime ainda mais que o WebP, mas é mais lento para gerar e tem menos ferramentas de edição. Para a maioria dos sites, o WebP oferece o melhor equilíbrio.
2. Use as dimensões reais de exibição
Uma foto de 4000 pixels de largura exibida em um espaço de 800 pixels está desperdiçando cerca de 96% dos pixels. O navegador baixa tudo e depois reduz a imagem na tela.
Antes de publicar, descubra a largura máxima em que a imagem aparece no seu tema e redimensione para ela. Uma regra prática:
- Conteúdo de blog: 1200 px.
- Banners de largura total: 1920 px.
- Miniaturas e cards: 400 a 800 px.
Para telas de alta densidade (Retina), você pode servir uma versão com o dobro da largura usando srcset, como mostrado mais abaixo.
3. Encontre a qualidade ideal
A qualidade controla o quanto a imagem é comprimida. Ela não é linear: cair de 100 para 85 reduz muito o tamanho com perda quase invisível, enquanto cair de 60 para 40 economiza pouco e já mostra borrões.
Comece com 80 para fotos. Se notar manchas em degradês (como céu) ou bordas serrilhadas, suba para 85 ou 90. Para imagens com texto pequeno, use 90 ou mais.
4. Dê nomes descritivos aos arquivos
O Google usa o nome do arquivo como uma das pistas para entender o que a imagem mostra. IMG_20260412_093115.jpg não diz nada; tenis-de-corrida-azul-masculino.webp diz.
- Use palavras separadas por hífens, sem acentos nem espaços.
- Descreva o que aparece na imagem, de forma curta.
- Evite repetir a mesma palavra-chave em todas as imagens só para tentar ranquear.
5. Escreva um bom texto alternativo
O atributo alt descreve a imagem para quem usa leitores de tela e para o Google. É, ao lado do texto ao redor, o sinal mais forte para aparecer no Google Imagens.
Escreva como se estivesse descrevendo a foto para alguém ao telefone: “Tênis de corrida azul com sola branca, visto de lado”. Imagens puramente decorativas devem ter alt="" vazio.
6. Insira a imagem do jeito certo no HTML
Alguns detalhes no código evitam que a página “pule” durante o carregamento e fazem o navegador priorizar o que importa:
- Sempre informe
widtheheight. O navegador reserva o espaço e evita o deslocamento de layout (CLS). - Use
loading="lazy"nas imagens abaixo da dobra, para que só carreguem quando o visitante rolar até elas. - Nunca use lazy loading na imagem principal do topo. Nela, use
fetchpriority="high". - Use
srcsetpara entregar tamanhos diferentes para celular e computador.
Exemplo:
<img src="tenis-1200.webp" srcset="tenis-800.webp 800w, tenis-1200.webp 1200w, tenis-2400.webp 2400w" sizes="(max-width: 800px) 100vw, 800px" width="1200" height="800" alt="Tênis de corrida azul com sola branca" loading="lazy">
7. Acompanhe os Core Web Vitals
O Google mede a experiência real dos visitantes com três métricas. Para ser considerada boa, uma página precisa atingir estes limites em 75% das visitas:
| Métrica | O que mede | Bom |
|---|---|---|
| LCP | Tempo até o maior elemento visível aparecer | até 2,5 s |
| INP | Rapidez de resposta a cliques e toques | até 200 ms |
| CLS | Quanto o layout se desloca durante o carregamento | até 0,1 |
Imagens leves melhoram principalmente o LCP; dimensões declaradas no HTML melhoram o CLS. Você pode medir sua página gratuitamente no PageSpeed Insights e acompanhar os dados reais no relatório de Core Web Vitals do Google Search Console.
Checklist final
- Converti as imagens para WebP.
- Redimensionei para a largura real de exibição.
- Usei qualidade entre 75 e 85 nas fotos.
- Renomeei os arquivos com palavras descritivas.
- Escrevi o texto alternativo de cada imagem.
- Declarei
widtheheightno HTML. - Usei lazy loading só abaixo da dobra.
- Testei a página no PageSpeed Insights.
Pronto para aplicar? Converta suas imagens agora.