WebP, JPEG ou PNG: como comprimir imagens para a web
Critérios práticos para escolher formato, dimensões e qualidade antes de publicar uma imagem no site.
Uma imagem pesada aumenta o tempo de carregamento e consome mais dados móveis. A solução, porém, não é reduzir a qualidade até o arquivo ficar irreconhecível. O ganho maior costuma vir da combinação de dimensões adequadas, formato compatível com o conteúdo e uma compressão revisada visualmente.
Fotos, logotipos, capturas de tela e ilustrações não devem receber exatamente o mesmo tratamento. Antes de exportar, pergunte onde a imagem será exibida e qual é o maior tamanho real necessário.
Redimensione antes de discutir qualidade
Se uma imagem será mostrada com 800 pixels de largura, publicar um arquivo de 5.000 pixels transfere dados que a maior parte dos visitantes não verá. Preserve uma versão original e crie uma cópia com dimensões adequadas ao uso.
Para telas de alta densidade, pode ser útil gerar uma versão um pouco maior que o tamanho visual. Ainda assim, isso não justifica enviar o arquivo original da câmera para um cartão pequeno. Teste no celular e no computador, sempre considerando o layout real.
Quando usar JPEG, PNG e WebP
JPEG funciona bem para fotografias e imagens com muitas variações de cor, mas não mantém transparência. PNG é útil para transparência, elementos com linhas nítidas e casos em que perdas visuais não são aceitáveis; arquivos fotográficos em PNG costumam ficar grandes.
WebP atende tanto fotos quanto transparência e frequentemente oferece um bom equilíbrio para publicação. A escolha final deve considerar compatibilidade do destino e qualidade percebida. Se uma plataforma converter o arquivo novamente, faça um teste antes de processar um lote inteiro.
Como encontrar o ponto de compressão
Comece com qualidade alta, reduza gradualmente e compare áreas difíceis: cabelo, céu, sombras, texto pequeno e degradês. Pare antes que blocos, faixas de cor ou contornos borrados se tornem visíveis no tamanho de uso.
Não existe um percentual perfeito para todas as imagens. Uma foto com fundo desfocado suporta mais compressão do que uma captura com letras pequenas. Avalie algumas amostras representativas e anote a configuração que funciona para aquele tipo de conteúdo.
Organize um fluxo para não recomprimir
Mantenha o original separado e gere a versão publicada a partir dele. Editar, salvar e reabrir várias vezes um arquivo com perdas acumula defeitos. Quando precisar de outro tamanho, volte ao original ou à cópia de edição de alta qualidade.
Use nomes que indiquem dimensão e finalidade, por exemplo “produto-1200-web.webp”. Isso facilita substituir arquivos, comparar resultados e evitar que uma miniatura seja usada por engano como imagem principal.
Checklist final
- Defina o maior tamanho em que a imagem será exibida.
- Use JPEG ou WebP para fotos e preserve transparência com PNG ou WebP.
- Compare detalhes difíceis no tamanho real de uso.
- Evite sucessivas exportações com perdas.
- Teste o carregamento em uma conexão móvel.
Coloque em prática
Compressor de Imagens
Use gratuitamente e compare o resultado com o checklist deste guia.
Referências consultadas
Fontes externas usadas para confirmar conceitos e boas práticas apresentados neste guia.