Como reduzir o tamanho de arquivos de imagem sem perder qualidade
Nosso adorado Robot /image/optimize e o Robot /image/resize são nossas ferramentas mais poderosas para combater arquivos inchados e tempos de execução longos. Hoje, vamos analisar alguns números reais para ver exatamente o quanto esses Robots podem reduzir o tamanho dos seus arquivos.
Método
Para coletar os dados deste post, criei um pequeno script em Python que cria uma Assembly para otimizar várias imagens de teste diferentes, ajustando um único parâmetro a cada iteração. Assim, cada Assembly fica isolada das anteriores, o que nos dá resultados mais limpos. Cada tipo de arquivo testado também tem pelo menos duas imagens de teste.
Você pode encontrar o código do script aqui no GitHub.
Foram usados dois Templates para testar cada Robot individualmente. Isolar cada Robot é importante para garantir que nossos dados reflitam apenas o impacto daquele Robot específico. Os dois Templates são mostrados abaixo.
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"optimize": {
"use": ":original",
"robot": "/image/optimize",
"preserve_meta_data": false,
"priority": "conversion-speed"
}
}
}
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"quality": {
"use": ":original",
"robot": "/image/resize",
"result": true,
"quality": 20,
"imagemagick_stack": "v3.0.1"
}
}
}
Também precisamos definir uma métrica para medir a redução geral do tamanho dos arquivos: a % de diferença de tamanho. Ela é a diferença percentual entre os tamanhos dos arquivos de entrada e de saída. Esta é a fórmula que usamos para calculá-la:
Agora, vamos dar uma olhada em alguns dados.
Prioridade
O primeiro parâmetro que vamos analisar é o priority. Podemos escolher entre dois algoritmos
diferentes, compression-ratio e conversion-speed, dependendo se preferimos uma taxa de compressão um pouco
menor, de ~18%, em troca de tempos de execução mais rápidos, ou uma taxa de compressão maior, de
~31%, para obter o menor tamanho de arquivo possível.
Prioridade compression-ratio
Como você pode ver abaixo, usar a prioridade compression-ratio geralmente resulta em uma redução de
tamanho de arquivo maior do que usar a prioridade conversion-speed.
No entanto, se você decidir não preservar os metadados do arquivo, as duas prioridades usarão o mesmo algoritmo de compressão, o que explica por que a redução de tamanho é a mesma em ambas.
Prioridade conversion-speed
A prioridade conversion-speed, como o nome sugere, ajuda a combater tempos de execução longos. Como
mostrado abaixo, entre as cerca de cinquenta Assemblies executadas, o tempo total de
execução foi reduzido, em média, em um segundo ao usar a prioridade conversion-speed.
Formato de entrada
É claro que o alcance das nossas otimizações é limitado pelo tipo de arquivo. Vamos ver com quais tipos de arquivo você pode esperar os maiores ganhos.
Diferença de tamanho
Como fica bem claro abaixo, os arquivos .webp apresentam uma redução média de tamanho drasticamente maior, enquanto os arquivos .jpg quase não apresentam redução. A faixa entre .gif, .png, .svg e .jpg também é estreita, então os resultados podem variar mais dependendo dos arquivos que você escolher usar.
Tempo de execução
Em termos de tempo de execução, o .gif é o vencedor claro, com o .webp em segundo lugar, logo atrás. No entanto, talvez o resultado mais surpreendente seja o quanto os arquivos .svg e .png demoraram mais para ser processados, talvez porque ambos usam compressão sem perdas.
Experimente o mesmo fluxo de trabalho de otimização no nosso compressor de GIF (English) interativo.
Qualidade
Tamanho do arquivo
Uma das melhores formas de reduzir o tamanho do arquivo é diminuir a qualidade com o Robot /image/resize. Como você pode ver no gráfico abaixo, uma qualidade de 75 ou menos resulta em reduções significativas no tamanho do arquivo. No entanto, valores de qualidade acima de 75 fazem o tamanho do arquivo, na verdade, aumentar.
Reduzir a qualidade também melhora o tempo total de execução de uma Assembly. Nesse caso, as diferenças são mais lineares.
Qualidade da imagem
Então, que impacto a qualidade realmente tem na aparência de uma imagem?
Aqui está a mesma imagem em quatro qualidades diferentes. Em qualidades mais baixas, o número de cores é reduzido, o que resulta nas faixas de cor (color banding) que você pode ver abaixo.
No entanto, esta é uma imagem bem grande, com muitas cores diferentes. A diferença de qualidade é praticamente invisível em imagens mais simples, como o logotipo da Transloadit.
Há apenas duas cores nesta imagem, o que significa que você pode baixar o valor de qualidade sem ver nenhuma diferença.
Claro, o ideal é fazer alguns pequenos experimentos por conta própria para encontrar um valor de qualidade que ofereça um bom equilíbrio entre tamanho do arquivo e qualidade da imagem.
Conclusões
Depois de tanta informação, vamos analisar com calma como tudo isso pode beneficiar você agora mesmo.
Talvez o detalhe mais importante a levar daqui seja o uso do formato .webp. Quer você queira reduzir os tempos de execução ou o tamanho dos arquivos, verá um benefício aqui. Você pode comparar o resultado com nossos conversores interativos de PNG para WebP (English) e JPG para WebP (English). Combinar isso com uma qualidade de arquivo levemente reduzida em um único Step do /image/resize provavelmente trará os melhores resultados.
Outro ponto importante é escolher o valor de priority adequado ao seu caso de uso. O
algoritmo compression-ratio seria a minha escolha, pela redução de tamanho significativa que ele pode
proporcionar. Mas, de novo, fique à vontade para testar por conta própria.
Por fim, espero que este post tenha inspirado você a fazer uma maratona de otimização nos seus Templates e que ele seja um bom ponto de partida para a sua jornada. Teremos prazer em ajudar e orientar você no que for possível, então entre em contato conosco pelo suporte ou pelo Twitter.