Publicar imagens mais leves sem perder qualidade

As imagens costumam ser o elemento mais pesado de uma página, por isso são também o ganho de desempenho maior e mais fácil de obter. O objetivo não é "o mais pequeno a qualquer custo" — é o ficheiro mais pequeno que continua a ter bom aspeto no ecrã onde vai parar. Aqui fica um fluxo de trabalho que chega lá sem teres de avaliar a olho cada exportação.

Redimensiona antes de comprimir

A maior poupança está normalmente nas <b>dimensões</b>, não no codec. Um hero de 4000px servido num espaço de 800px desperdiça cerca de 96% dos seus píxeis antes mesmo de a compressão começar. Decide o tamanho real de exibição, considera os ecrãs de DPR elevado (2× chega para a maioria das fotos) e reduz primeiro para esse tamanho. Comprime uma imagem já com o tamanho certo e cada passo seguinte terá menos trabalho a fazer.

Escolhe o formato certo para cada caso

Fotos: AVIF ou WebP, com fallback para JPEG se ainda precisares. UI plana, logótipos e capturas de ecrã: PNG sem perdas ou WebP. Não publiques um PNG de uma fotografia nem um JPEG de uma captura de ecrã — ambos são a ferramenta errada e custam-te bytes <i>e</i> qualidade. Na dúvida, codifica das duas formas e fica com o vencedor.

Define um objetivo de qualidade percetual

"Qualidade 80" significa coisas diferentes consoante o codificador, por isso visa um resultado <b>percetual</b> em vez de um número mágico. Uma pontuação SSIMULACRA2 à volta de 80–90 é visualmente sem perdas para a maioria das fotos; abaixo de ~70 começas a notar em gradientes e na pele. Escolhe um mínimo, deixa o codificador atingi-lo, e obténs qualidade consistente em toda uma biblioteca em vez de adivinhares ficheiro a ficheiro.

# Redimensiona para o tamanho de exibição e depois converte com um mínimo de qualidade
imageforge hero.png --resize 1600 --convert avif --quality 82
imageforge ./gallery/*.jpg --convert webp --quality 80 --recursive

Automatiza

Um fluxo de trabalho só resulta se for aborrecido de executar. Processa em lote uma pasta inteira, mantém os originais intocados e deixa que a ferramenta relate o que poupou para que possas confiar no resultado. A ideia é fazer de "mais leve" o caminho predefinido, não uma tarefa manual que alguém esquece antes do lançamento.

Publica o ficheiro mais pequeno que continua a ter bom aspeto — não o mais pequeno de todos. A diferença é todo o trabalho.

Mede, não adivinhes

Fecha o ciclo verificando a poupança real e a qualidade real, não apenas o tamanho do ficheiro. Um ficheiro 90% mais pequeno com aspeto degradado não é uma vitória; um 60% mais pequeno e visualmente idêntico é. Regista ambos e poderás ajustar as definições com confiança em vez de jogar pelo seguro.