Imagens grandes são o motivo número um de páginas carregarem devagar. A solução é quase sempre dois passos: deixar a imagem com as dimensões certas, depois comprimir o que sobrou. Faça os dois e uma foto de 4 MB vira uma foto de 150 KB que parece idêntica na tela.
Vamos colocar números reais nisso.
Tamanhos-alvo para mirar
Você não precisa adivinhar. Aqui estão orçamentos de peso práticos que mantêm páginas rápidas:
- Hero / banner de largura total: abaixo de 200 KB, idealmente ~100–150 KB.
- Foto dentro do artigo: 80–150 KB cada.
- Miniatura / avatar: 10–30 KB.
- Logo ou ícone (PNG/SVG): abaixo de 30 KB; muitas vezes bem menos.
E dimensões:
- Hero de largura total: 1600–2000 px de largura é suficiente para a maioria dos layouts (dobre só se você estiver mirando em Retina e puder bancar os bytes).
- Foto na coluna: combine com a largura do seu conteúdo — muitas vezes 800–1200 px.
- Miniatura: o tamanho em que ela de fato aparece, ex.: 300–400 px.
Se qualquer imagem isolada em uma página está acima de ~300 KB, geralmente é um erro que vale corrigir.
Passo 1: Redimensione para a largura real de exibição
Esse é o passo que as pessoas pulam, e é a maior alavanca. Uma foto recém-saída de um celular tem muitas vezes mais de 4000 pixels de largura. Se ela é exibida em uma coluna de 800 pixels, você está entregando 25 vezes mais pixels do que a tela mostra — e a contagem de pixels determina o tamanho do arquivo mais do que qualquer coisa.
Use o Redimensionador de Imagens para trazer a imagem à largura em que ela realmente aparece. Redimensione por pixels ou porcentagem, mantenha a proporção travada e deixe o redutor de alta qualidade manter as bordas limpas.
Só o dimensionamento correto muitas vezes corta o tamanho do arquivo em 80–90% antes de você comprimir um único byte.
Passo 2: Comprima o que sobrou
Agora encolha os dados dentro dessas dimensões corretas.
- Fotos (JPG/WebP): ajuste o controle de qualidade para 75–85. Isso é visualmente sem perda para a maioria das imagens enquanto corta o tamanho fortemente.
- PNGs (capturas de tela, gráficos): o Compressor de Imagens os reduz a uma paleta de 256 cores, normalmente economizando 60–80% sem mudança visível e mantendo a transparência.
O compressor também limita a saída ao tamanho original — nunca devolve algo maior — e tem um limite de largura opcional, então você pode de fato fazer os dois passos de uma vez: defina o limite na sua largura-alvo e comprima ao mesmo tempo. Processe uma pasta inteira em lote e baixe como um ZIP.
Escolha o formato certo enquanto está nisso
Se suas imagens vão ser servidas a navegadores modernos, converter fotos para WebP normalmente supera o JPEG em mais 25–35% na mesma qualidade. Gráficos planos permanecem como PNG (ou WebP). Não salve fotografias como PNG — esse é o clássico erro de inchaço, facilmente uma penalidade de 5–10×.
Um fluxo realista
Para um post de blog com cinco fotos:
- Redimensione cada uma para a largura da sua coluna (digamos, 1200 px).
- Comprima em qualidade 80, ou converta para WebP.
- Confirme que cada uma fica abaixo de ~150 KB.
- Confira um recorte a 100% de uma imagem para ter certeza de que a qualidade se manteve.
Cinco fotos que começaram com 20 MB no total vão parar em torno de 600 KB — uma página que carrega num piscar em vez de travar.
Privado e offline
Tudo acima roda inteiramente no seu navegador usando Canvas e WebAssembly. Nenhuma imagem é enviada a um servidor, e após a primeira visita as ferramentas ficam em cache e funcionam offline. Você pode otimizar as imagens de um post inteiro sem conexão e sem nada saindo da sua máquina.