Como comprimir e otimizar imagens para a web

No universo digital, a otimização de imagens é crucial para garantir um desempenho rápido e eficaz de sites, aplicativos e até mesmo para reduzir o consumo de dados em dispositivos móveis. Um formato de imagem que tem se destacado pela sua eficiência é o WebP. Desenvolvido pelo Google, ele oferece compressão superior e qualidade de imagem comparável a formatos populares como JPEG e PNG, mas com arquivos menores. Mas como transformar suas imagens para o formato WebP de maneira simples e eficiente?

Hoje vamos explicar em detalhes como funciona a conversão de imagens. Nossa agência criou um script em Python que usamos para converter imagens em WebP com parâmetros ajustáveis, como method e lossless. No final, disponibilizamos um arquivo executável para que qualquer pessoa possa usar a ferramenta e otimizar suas imagens de forma prática, sem precisar de configurações complexas.

Um exemplo prático: a mágica por trás da conversão

Imagine que você tem uma foto que deseja colocar em um site. Agora, imagine que essa foto é como um bolo delicioso, mas muito grande, difícil de transportar e compartilhar com os outros. O que queremos fazer é "compactar" esse bolo, ou seja, reduzir seu tamanho sem perder o sabor (a qualidade da imagem). O formato WebP entra como uma ferramenta mágica que nos permite fazer isso de maneira muito eficiente.

Para essa "compactação", existem dois parâmetros principais que podem ser ajustados: method e lossless. O primeiro está relacionado ao esforço que a ferramenta vai fazer para reduzir o tamanho da imagem. O segundo determina se a imagem vai perder qualidade ou não durante o processo. Antes de entrar nos detalhes técnicos, pense na seguinte metáfora:

• Method (esforço de compressão): é como escolher o tipo de forno para assar o bolo. Se você escolher um forno de alta performance (maior esforço), o bolo pode ficar menor, mas vai demorar mais para assar.
• Lossless (sem perda de qualidade): é como escolher se você quer manter a textura perfeita do bolo, sem deixar que ele perca um pedaço durante a "compactação". Quando você opta por lossless, o bolo não perde nada da sua essência. Quando não escolhe, o bolo pode perder um pouco da textura para ficar mais fácil de transportar.

Agora que você tem essa analogia, vamos entender como esses parâmetros funcionam de forma técnica.

Como os parâmetros method e lossless funcionam

Method: o nível de compressão

O parâmetro method se refere ao esforço que a ferramenta fará para comprimir a imagem. O valor vai de 0 a 6: 0 é o menor esforço (e o mais rápido), e 6 é o maior esforço (e o mais demorado). Quanto maior o valor, maior a tentativa de compactação, o que resulta em arquivos menores. Em compensação, o tempo de processamento aumenta com o esforço, e isso deve ser considerado ao escolher o nível de compressão.

• Method 0: o processo é mais rápido, mas a compactação não é tão eficaz. Use quando o tempo é crucial.
• Method 6: o processo leva mais tempo, mas a compactação é muito eficiente e gera arquivos bem menores, com maior custo de processamento.

O method afeta diretamente o tamanho do arquivo final. É uma escolha entre velocidade e eficiência.

Lossless: manter a qualidade ou reduzir?

O parâmetro lossless define o tipo de compressão aplicada à imagem. Quando ele está ativado (valor True), a ferramenta garante que a imagem seja comprimida sem nenhuma perda de qualidade: o resultado é idêntico ao original. Essa opção é perfeita quando a qualidade precisa ser preservada a todo custo, mas costuma gerar arquivos maiores.

Quando lossless está desativado (valor False), a ferramenta permite uma compressão com perda de qualidade. Esse tipo de compressão reduz o tamanho do arquivo de maneira mais agressiva, mas pode causar uma leve perda de qualidade visual, especialmente em imagens com detalhes finos. É a opção certa quando o foco é o tamanho do arquivo e o tempo de carregamento.

Resumo das opções:

• Lossless = True: a imagem é comprimida sem perder qualidade, mas o arquivo pode ficar maior.
• Lossless = False: a imagem é comprimida de forma agressiva, com alguma perda de qualidade, e o arquivo fica menor.

A integração entre method e lossless

Quando você usa method e lossless em conjunto, o resultado da conversão muda conforme os valores escolhidos para os dois. Se você escolher um method alto (digamos, 6) e ativar lossless, a conversão vai demorar mais, mas a qualidade será preservada, com o menor arquivo possível sem perda de detalhes. Se escolher um method baixo e desativar lossless, a conversão será mais rápida, mas a qualidade pode ser um pouco comprometida para chegar a um arquivo mais compacto.

A combinação dos dois parâmetros é o ajuste fino que deixa suas imagens com o mínimo de peso e a máxima qualidade. Imagens LOSSY usam lossless: false: abrem mão de alguns pixels, mas mantêm a qualidade alta, e são as mais indicadas para fotos e imagens com muitos tons e sombras. Imagens LOSSLESS usam lossless: true: mantêm exatamente a mesma qualidade e resolução, a fim de não perder nenhum ponto claro ou escuro, e são ideais para imagens com texto, logos, vetores e gráficos.

Fizemos o teste com duas imagens, e os tamanhos caíram de forma considerável. Veja os registros das conversões.

Comparativo de compressão: Encomenda.jpg

O gráfico acima é um benchmark da conversão para WebP. Ele mostra como as diferentes configurações de method e lossless afetam o tamanho final dos arquivos e ajuda a comparar o desempenho do algoritmo em cada cenário.

Abaixo, a imagem original que usamos como base e a versão convertida pelo nosso script:

Comparativo de compressão: Plano de fundo.png

Agora, os dados da conversão de um arquivo mais leve, em outro formato e com resolução 2K:

Este segundo gráfico mostra o mesmo benchmark para o PNG: o impacto de method e lossless no tamanho final do arquivo.

Abaixo, a imagem original e a versão convertida pelo nosso script:

O registro das conversões

Durante a conversão, o script gera um registro detalhado com o nome do arquivo, a resolução, o tamanho da imagem antes e depois, o nível de qualidade aplicado, o method usado, se a compressão foi lossless ou não e o tempo total de conversão. Assim você tem controle completo sobre as conversões feitas e pode revisar o processo para ajustes futuros.

O registro leva data e hora no formato brasileiro, DD/MM/AAAA, para que as informações fiquem sempre registradas com precisão.

Como usar o conversor

Agora que você entende os parâmetros e a lógica por trás da conversão para WebP, pode usar a ferramenta para automatizar o processo. Ela foi pensada para que qualquer pessoa consiga usar, sem precisar programar: baixe o arquivo, selecione a pasta com as imagens que deseja converter, escolha os parâmetros method e lossless e aguarde o processamento.

O arquivo é um .zip com o programa para Windows. Para baixar, use o botão abaixo.