Como deixar as imagens do seu site mais leves sem perder qualidade

Uma foto recém-saída do celular tem uns 4.000 pixels de largura, enquanto a coluna de um blog a exibe com uns 800, ou 1.600 pixels reais numa tela de alta densidade de celular ou notebook. Entregá-la em tamanho total desperdiça quase todo o download, e nenhum formato compensa isso.

As ferramentas de compressão de JPG, PNG e WebP podem limitar o tamanho para você: o nível Equilibrada deixa o lado maior em no máximo 2.560 pixels e o Forte em 1.600, e nenhum deles amplia uma imagem menor. Forte serve para quase toda imagem dentro de um artigo; Equilibrada, para fotos que ocupam uma tela larga.

Partimos de 17 fotografias de cerca de 12 megapixels salvas como JPG de alta qualidade, com 1,5 MB em média, e as passamos pelas ferramentas deste site. Só converter para WebP já as reduziu à metade. Reduzir o tamanho fez muito mais. Reduzir e depois converter para WebP deixou a foto média com 56 KB, 96% menos que no início.

Quando você converte para WebP um JPG já comprimido sem escolher a qualidade, o WebP mantém o nível de qualidade desse JPG, e foi isso que o deixou de 38 a 47% menor no nosso teste. Escolher Alta (85) nesse momento pede mais qualidade do que o JPG comprimido ainda tem: os JPGs do nível Forte convertidos com qualidade Alta ficaram um pouco maiores que os próprios JPGs, 100 KB em média em vez de 91. Escolha Alta (85) ou Máxima (95) só quando converter a partir da foto original, em qualidade total.

Guarde as fotos originais como cópias principais. Você sempre pode gerar novas versões para a web em outro tamanho ou qualidade, mas não recupera detalhes de uma cópia comprimida demais. E confira o resultado onde seus visitantes o veem, num celular: se ficar bom lá, está bom o suficiente.

Dois pequenos acréscimos na página fazem as imagens leves carregarem ainda melhor. Informe no HTML a largura e a altura de cada imagem, para a página não pular enquanto carrega. E acrescente loading="lazy" às imagens mais abaixo, para o navegador só baixá-las quando o visitante chegar perto delas. Todos os navegadores atuais aceitam as duas coisas.

As 17 fotos são as fotografias do Unsplash que vêm com o Edubuntu, reduzidas para 4.032 pixels no lado maior quando eram maiores e salvas em JPG com qualidade 92. Cada passo usou as ferramentas deste site com as configurações indicadas, pelo mesmo código e pela mesma versão do ImageMagick que rodam nos nossos servidores. Fotos cheias de detalhes encolhem menos que as mais calmas, então a sua economia vai variar em torno destas médias.