Redimensionamento, compressão, WebP, AVIF e boas práticas: um método completo para tornar as imagens de um site mais leves sem degradar desnecessariamente o resultado.
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.
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.
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.
| 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.
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.
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.
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.
Um telemóvel não precisa necessariamente da mesma imagem que um desktop de alta densidade. srcset, sizes e <picture> permitem ao navegador escolher recursos adequados e formatos modernos com fallback.
O princípio é simples: não obrigue todos os visitantes a descarregar a variante mais pesada.
Capturas, diagramas e interfaces suportam mal uma compressão fotográfica agressiva. Contornos de letras e linhas finas tornam os artefactos muito visíveis. Teste PNG, WebP sem perdas ou uma qualidade superior. Se o conteúdo puder ser vetorial, SVG pode ser melhor.
Fotografias podem conter EXIF, modelo de câmara, data e por vezes localização. Para publicação Web, estes dados podem ser inúteis ou sensíveis. Remova-os quando fizer sentido, mas preserve os elementos necessários ao fluxo de trabalho e à reprodução correta das cores.
Dez imagens de 900 kB representam 9 MB. Depois de otimização para 180 kB em média, ficam em 1,8 MB: uma poupança de 7,2 MB apenas nas imagens.
Numa ligação móvel, esta diferença pode alterar de forma clara o tempo de carregamento e o consumo de dados.
Para uma imagem isolada, um redimensionador ou conversor é suficiente. Se o mesmo processo se repetir, pode formalizar no Workspace:
importar → redimensionar → converter → comprimir → exportar
A ordem importa: redimensionar depois de uma primeira compressão pode provocar uma recompressão desnecessária.
Verifique dimensões, formato, qualidade visual, transparência, nitidez do texto, metadados, variantes responsive e dimensões declaradas na página. O melhor ficheiro não é necessariamente o menor: é o menor ficheiro que cumpre corretamente o seu papel visual e funcional.
Coleção
11 / 14
Reduza o tamanho de uma imagem escolhendo dimensões, formato e qualidade adequados sem introduzir degradação visual desnecessária.
Compreenda como srcset e sizes permitem ao navegador escolher uma imagem adequada à largura de apresentação, densidade de píxeis e contexto responsive.
Escolha o formato adequado para fotografia, captura, transparência ou interface sem sacrificar desnecessariamente qualidade e desempenho.