Guia Definitivo de Otimização de Imagens para Web

Imagens representam, em média, 50% do peso de uma página web. Se você não as otimiza, está jogando dinheiro fora com hospedagem e perdendo clientes impacientes.

1. Escolha o Formato Certo

Esqueça o.webp e o JPEG para a maioria dos casos.

• WebP: Suportado por todos os navegadores modernos, oferece compressão superior com qualidade visual idêntica.
• AVIF: O “novo garoto do pedaço”. Compressão ainda maior que o WebP, mas verifique o suporte do navegador (embora já seja alto).

2. Dimensione Corretamente

Nunca envie uma imagem de 4000px de largura para ser exibida em um espaço de 300px no celular.

Use o atributo srcset para servir versões diferentes da imagem dependendo do dispositivo:

<img src="foto-grande.jpg"
     srcset="foto-small.jpg 500w,
             foto-medium.jpg 1000w,
             foto-large.jpg 2000w"
     alt="Minha Foto Otimizada">

3. Lazy Loading Nativo

Hoje em dia, você não precisa de bibliotecas JavaScript pesadas para atrasar o carregamento de imagens fora da tela. O HTML5 já faz isso:

<img src="imagem.jpg" loading="lazy" alt="..." />

Adicione loading="lazy" em todas as imagens que não estão na primeira dobra (o que o usuário vê assim que abre o site).

Dica Pro: A Primeira Imagem (LCP)

NUNCA use lazy loading na imagem de destaque (Hero Image) do topo da página. Isso atrasa o LCP. Para a primeira imagem, use loading="eager" ou pré-carregamento.

Conclusão

Ferramentas como a nossa Kit Online ou o processamento automático do Astro podem fazer isso por você. Automatize sempre que possível.