Uma imagem com vários megabytes pode ser perfeita para impressão e totalmente desproporcionada para uma página Web. Otimizar não significa degradar até ficar leve: significa remover aquilo de que a apresentação não precisa, como dimensões excessivas, formato inadequado, qualidade desnecessariamente alta ou metadados supérfluos.
A estratégia correta segue geralmente esta ordem: redimensionar, escolher o formato, comprimir, verificar visualmente e servir ao navegador a variante adequada.
1. Começar pelas dimensões
Uma fotografia de 6000 × 4000 pixels contém 24 milhões de pixels. Se nunca for apresentada com mais de 1200 px de largura, conservar a dimensão original obriga o navegador a transferir e descodificar muito mais informação do que o necessário.
Antes de comprimir, determine a largura máxima, a existência de variantes móveis e a necessidade de ecrãs de alta densidade.
2. Dimensões e peso são coisas diferentes
Duas imagens de 1600 × 900 podem ter tamanhos muito distintos. As dimensões descrevem pixels; o peso depende também do conteúdo, formato e nível de compressão.
Uma fotografia detalhada comprime-se de forma diferente de um logótipo com poucas cores. Por isso, um único ajuste aplicado a tudo raramente é ideal.
3. Escolher o formato segundo o conteúdo
| Conteúdo | Escolha frequente | Porquê |
|---|---|---|
| Fotografia | WebP, AVIF, JPEG | boa compressão com perdas |
| Captura de interface | WebP ou PNG | detalhes e áreas uniformes |
| Logótipo / ícone vetorial | SVG | independente da resolução |
| Transparência | WebP, AVIF, PNG | canal alfa |
| Compatibilidade máxima | JPEG / PNG | formatos históricos muito difundidos |
WebP é amplamente suportado e pode usar compressão com ou sem perdas, transparência e animação. AVIF pode oferecer excelente eficiência. JPEG e PNG continuam úteis para compatibilidade e casos específicos.
4. Compressão com ou sem perdas
A compressão sem perdas permite reconstruir exatamente os dados codificados. A compressão com perdas elimina ou aproxima informação para reduzir fortemente o tamanho.
Numa fotografia para a Web, uma compressão razoável pode reduzir muito o peso sem diferença percetível na dimensão real de utilização. O nível correto não é «qualidade 100», mas a qualidade suficiente para o contexto.
5. Comparar na dimensão de apresentação
Não procure defeitos invisíveis ampliando a imagem a 400%. Verifique-a na dimensão prevista e observe zonas sensíveis: cabelo, folhagem, texto, gradientes e detalhes finos.
Se uma redução adicional de 100 kB não for visível em condições reais, é provavelmente útil. Se criar halos ou destruir detalhes do produto, foi longe demais.
6. Redimensionar antes de comprimir
Passar de 4000 × 3000 para 800 × 600 reduz os pixels de 12 milhões para 480 mil. É uma redução enorme antes mesmo de escolher o codec.
Comprimir primeiro a imagem gigante e pedir ao navegador que a reduza visualmente significa otimizar o ficheiro errado.