Otimização aprimorada de PNG com integração do Pngquant

Kevin van Zonneveld

Cofundador · Amsterdã, Países Baixos · Mostrar biografia

Atualização: este artigo descreve o lançamento de 2014. O parâmetro png_tool mostrado abaixo foi removido em 2015 EN (English). Para integrações atuais, use a documentação do /image/optimize; lossy: true ativa a otimização de PNG com perdas. O exemplo histórico abaixo não é válido com a API atual.

Alguns clientes comentaram que a nossa otimização de PNG deixava a desejar. Embora já conseguíssemos reduzir o tamanho de PNGs grandes por um fator de oito, esses clientes relataram que serviços dedicados como o TinyPNG⁠ e o kraken.io⁠ estavam obtendo resultados ainda melhores, especialmente com imagens menores.

Obviamente, se esses serviços conseguem alcançar economias maiores, é isso que também devemos buscar.

Começamos a pesquisar diferentes ferramentas e chegamos ao pngquant⁠. Hoje, estamos lançando essa ferramenta como uma extensão do nosso Robot /image/optimize existente. No entanto, não vamos tornar o pngquant o padrão, não só porque isso quebraria a compatibilidade com versões anteriores, mas também porque essa ferramenta não consegue preservar metadados.

Preservar metadados é considerado uma boa prática de cidadania na internet, já que eles podem conter informações de direitos autorais. Também é por isso que, se você optar por usar pngquant, é obrigatório que você defina a opção preserve_meta_data como false e também especifique o png_tool. Queremos evitar que as pessoas removam acidentalmente as informações de propriedade dos seus arquivos.

É assim que um Step poderia ficar nos seus Templates:

optimize: {
  robot             : "/image/optimize",
  use               : ":original",
  preserve_meta_data: false,
  png_tool          : "pngquant"
}

Como acontece com todos os Robots, você pode encaixar este Robot diretamente sobre outro, como peças de LEGO®. Assim, suas miniaturas de vídeo, avatares enviados por upload etc. serão armazenados automaticamente de forma otimizada.

Depois de testar essa nova funcionalidade com alguns dos nossos clientes, conseguimos alcançar reduções de 65% em imagens de tamanho médio, apenas alguns pontos atrás de serviços como o TinyPNG e o kraken.io.

Simon⁠, do Yarnee, comentou o seguinte:

Com o Yarnee, você pode criar coleções de mídia que, de outra forma, se perderiam em serviços baseados em feed, como o Facebook. Já usávamos o Robot /html/convert da Transloadit para capturar prévias, mas, para serem aceitas pelo Facebook, elas precisavam ter o tamanho reduzido. Com a nova compressão da Transloadit, conseguimos fazer tudo funcionar lindamente!

É claro que vamos continuar otimizando para extrair também esses últimos pontos percentuais, mas já queríamos compartilhar a novidade com você hoje. 😄

Aproveite!