Guia

Otimizar as imagens do seu site para carregar rápido

As imagens são metade do peso de um site médio. Quatro decisões, nenhum redesenho, e a página cai entre 40% e 70%.

Num site médio, as imagens são entre 50% e 70% de tudo o que o navegador baixa. Se a sua página está lenta, quase sempre a culpa está aí, e não no código. A boa notícia é que consertar não exige ser desenvolvedor: quatro decisões bem tomadas resolvem a maior parte do problema.

1. Sirva o tamanho que realmente aparece

O erro número um é subir a foto do jeito que saiu da câmera. Uma imagem de 4032 px de largura exibida numa coluna de 760 px baixa cinco vezes mais dados que o necessário. Antes de subir qualquer coisa, veja a largura real do espaço onde a imagem vai e redimensione para essa largura, ou para o dobro se quiser que fique nítida em telas de alta densidade.

Referências que funcionam bem na maioria dos temas:

• Imagem em toda a largura (destaque): 1920 px.
• Imagem dentro de um artigo: 1280 px.
• Cartão ou listagem: 800 px.
• Miniatura: 400 px.
• Avatar: 200 px.

2. Use WebP

Na mesma qualidade percebida, o WebP pesa entre 25% e 35% menos que o JPG. Todos os navegadores em uso hoje entendem. Converter as imagens de um site para WebP é, de longe, a melhoria com melhor relação esforço/resultado que existe: você não muda o design, não mexe no código e a página perde um terço do peso.

Se o seu sistema de publicação não converte sozinho, dá para converter em lote para WebP antes de subir.

3. Carregamento adiado para o que não aparece

As imagens que estão abaixo da primeira tela não precisam ser baixadas até o visitante chegar nelas. Basta acrescentar um atributo à etiqueta:

<img src="foto.webp" alt="…" loading="lazy" decoding="async">

Com uma exceção importante: a imagem principal da primeira tela NÃO deve levar loading="lazy". Justamente essa você quer que chegue o quanto antes, porque normalmente é a que o Google mede como Largest Contentful Paint. Nela, coloque fetchpriority="high".

4. Reserve o espaço para a página não pular

Se uma imagem não declara suas dimensões, o navegador não sabe quanto espaço deixar e o conteúdo pula quando ela termina de carregar. Esse pulo é medido (Cumulative Layout Shift) e penaliza. A solução tem uma linha: coloque sempre width e height na etiqueta, com os valores reais do arquivo. O CSS pode continuar escalando a imagem; o que importa é o navegador conhecer a proporção desde o primeiro momento.

As três métricas que o Google olha

Um fluxo de trabalho que você pode repetir

1. Junte todas as imagens que vai subir numa pasta.
2. Redimensione em lote para a largura da tabela acima.
3. Converta para WebP com qualidade 78–82.
4. Renomeie com palavras descritivas e hifens: tenis-corrida-azul.webp, não IMG_4821.webp. O nome do arquivo é um sinal real para a busca por imagens.
5. Suba e escreva um alt que descreva a imagem para quem não pode vê-la. Não é enchimento de palavras-chave: é acessibilidade, e de quebra posiciona.

Os passos 2 e 3 são feitos de uma vez só no compressor: você escolhe o tamanho máximo, o formato de saída WebP e a qualidade, solta as trinta imagens e baixa o ZIP.

Quanto dá para esperar

Em sites reais, aplicar esses quatro pontos costuma deixar a página entre 40% e 70% mais leve. Uma página inicial que pesava 4 MB cai para 1,2 MB, e o tempo até aparecer alguma coisa cai pela metade em conexões móveis. Não precisa redesenhar nada: é puro trabalho de preparar os arquivos.