As imagens costumam ser a parte mais pesada de uma página. Imagens grandes demais deixam o carregamento lento, gastam o plano de dados dos visitantes e podem prejudicar as Core Web Vitals — os sinais de desempenho que o Google usa em seus sistemas de ranqueamento. A solução geralmente é simples e não exige nenhum software especial.
Passo 1: redimensione as imagens para o tamanho em que aparecem
É o maior ganho de todos. Uma foto de celular moderno costuma ter 4000 × 3000 pixels. Se a coluna de conteúdo do seu blog tem 800 pixels de largura, a maior parte desses pixels é baixada à toa.
Uma abordagem prática:
- Imagens de destaque em largura total: 1600–2000 px de largura.
- Imagens de conteúdo: cerca de 1200 px de largura (suficiente para telas de alta densidade com 600–800 px de largura exibida).
- Miniaturas: 300–600 px.
Use o Redimensionar imagens para ajustar uma imagem ou um lote inteiro mantendo as proporções.
Passo 2: comprima com uma qualidade sensata
Depois de redimensionar, comprima. Em JPG e WebP, uma qualidade de 70–85% costuma ser visualmente idêntica ao original na tela, mas muito menor.
Com o Compressor de imagens você pode:
- ajustar a qualidade no controle deslizante,
- limitar a largura ou a altura máxima no mesmo passo,
- comprimir muitas imagens de uma vez e comparar a economia.
Não existe regra universal, mas estes alvos funcionam bem na maioria dos sites:
| Tipo de imagem | Tamanho-alvo |
|---|---|
| Destaque / banner | menos de ~200 KB |
| Imagem de conteúdo | menos de ~100 KB |
| Miniatura | menos de ~30 KB |
Passo 3: escolha o formato certo
- Fotos → WebP (ou JPG como alternativa).
- Gráficos com cores chapadas, texto ou transparência → PNG ou WebP sem perdas; use SVG para logotipos e ícones sempre que possível.
O WebP costuma ser 25–35% menor que o JPG com qualidade semelhante e aceita transparência. Converta suas imagens com o Conversor WebP.
Passo 4: carregue as imagens com inteligência
A compressão deixa os arquivos menores; um bom HTML garante que eles sejam carregados de forma eficiente.
- Sempre defina largura e altura com os atributos width e height (ou aspect-ratio no CSS). Isso reserva o espaço e evita saltos de layout (CLS).
- Use carregamento lento nas imagens fora da primeira tela, com
loading="lazy". - Não use carregamento lento na imagem principal do topo da página — geralmente ela é o elemento de Largest Contentful Paint (LCP) e deve carregar imediatamente.
- Ofereça tamanhos responsivos com
srcset, para que celulares baixem arquivos menores que computadores. - Escreva um texto alternativo descritivo, para acessibilidade e para a busca de imagens.
<img src="/images/equipe-1200.webp"
srcset="/images/equipe-600.webp 600w, /images/equipe-1200.webp 1200w"
sizes="(max-width: 700px) 100vw, 700px"
width="1200" height="800"
alt="Nossa equipe de suporte no escritório"
loading="lazy">
Checklist rápido
- Redimensione para o maior tamanho em que a imagem aparece.
- Comprima com qualidade de 70–85%.
- Prefira WebP para fotos.
- Defina largura e altura.
- Use carregamento lento em tudo, menos na imagem do topo.
- Adicione um texto alternativo significativo.
Conclusão
Você não precisa de ferramentas caras para deixar rápido um site cheio de imagens. Primeiro redimensione, depois comprima, escolha formatos modernos e carregue as imagens com cuidado. Confira o resultado em uma ferramenta como o Google PageSpeed Insights para ver a diferença.