As imagens costumam ser a coisa mais pesada de uma página, o que as torna a maior alavanca de velocidade sob o seu controle. Acerte as dimensões e o peso do arquivo e as páginas parecem instantâneas. Erre e você falha nos Core Web Vitals por mais limpo que seja o seu código. Aqui estão as metas e o fluxo para atingi-las.
Metas de dimensão
Combine o tamanho em pixels da imagem com o lugar onde ela realmente aparece. Guia aproximado:
- Hero de largura total: 1600–2000 px de largura cobrem a maioria dos layouts de desktop. Ir além disso raramente ajuda e custa muitos bytes.
- Foto no conteúdo: a largura da sua coluna de conteúdo, comumente 800–1200 px.
- Miniatura / imagem de card: 300–500 px.
- Avatar / ícone: 48–200 px no tamanho em que aparece.
Servir uma imagem de 4000px num espaço de 800px significa que o navegador baixa e decodifica 25× mais pixels do que jamais vai mostrar. Isso é puro desperdício — e decodificar imagens grandes também trava a thread principal.
Metas de peso
As dimensões definem o teto; a compressão define o peso real. Mire em:
- Imagem hero: abaixo de 200 KB (idealmente 100–150 KB).
- Foto no conteúdo: 80–150 KB.
- Miniatura: 10–30 KB.
- Total de imagens por página: tente ficar abaixo de ~1 MB para a página inteira.
Se uma única imagem passa de ~300 KB, trate isso como um bug a investigar.
Por que isso move os Core Web Vitals
O Largest Contentful Paint (LCP) do Google mede quanto tempo leva até o maior elemento da tela ser renderizado — e, na maioria das páginas, esse maior elemento é uma imagem (geralmente o hero). Um hero pesado e superdimensionado infla o LCP diretamente. Um bom LCP é abaixo de 2,5 segundos; um hero inchado pode estourar isso em conexões móveis sozinho.
Mais duas vitórias relacionadas a imagens:
- Defina os atributos width e height para o navegador reservar o espaço — isso protege sua pontuação de Cumulative Layout Shift (CLS).
- Priorize o hero (não use lazy-load na imagem de LCP) e use lazy-load em tudo abaixo da dobra.
O fluxo de dois passos
Passo 1 — redimensione para a largura real de exibição. Use o Redimensionador de Imagem para trazer cada imagem ao tamanho em que ela aparece. Trava de proporção ligada, redução de alta qualidade. Só isso já corta o peso em 80–90% muitas vezes.
Passo 2 — comprima. Alimente os arquivos redimensionados no Compressor de Imagem: qualidade 75–85 para fotos (visualmente sem perdas), quantização de 256 cores para PNGs. Ele nunca gera um arquivo maior que o original, lida com lotes e tem um limite opcional de largura para você fazer os dois passos de uma vez, na prática. Para navegadores modernos, converter fotos para WebP espreme mais 25–35%.
Meça, não chute
Depois que suas imagens estiverem otimizadas, confirme que a página realmente ficou mais rápida. O Page QA do IMG.DIY audita uma URL ao vivo pelo Google PageSpeed Insights e informa o peso de imagens da página para você identificar qualquer arquivo que ainda esteja pesado demais. Uma ressalva: o Page QA precisa de conexão com a internet — diferente das ferramentas de imagem, ele chama a API PageSpeed do Google, então não roda offline. Use-o depois de publicar para checar seu LCP real e o orçamento de imagens.
Privado por padrão
As ferramentas de redimensionar, comprimir e converter rodam inteiramente no seu navegador com Canvas e WebAssembly — nada é enviado, e depois da primeira visita elas ficam em cache e funcionam offline. Você pode preparar as imagens de um site inteiro sem conexão e depois rodar o Page QA online quando a página estiver no ar.
Resumo rápido: dimensione corretamente, comprima até as metas de peso, priorize o hero para o LCP e verifique com o Page QA.