É comum encontrar sites que possuem grande parte de suas imagens PNG (Portable Network Graphics) devido ao suporte de imagens transparentes com uma grande definição das cores. Esse formato é principalmente utilizado em icones e logotipos, em que é necessário ter um fundo transparente e garantir uma qualidade agradável ao visitante.

O grande problema de utilizar o formato PNG é o tamanho (em bytes) que a imagem ocupa e quando se trata de internet. Isso é um grande problema porque quando se acessa um site, o que deseja é encontrar a informação de de forma fácil e rápida. Ter um site com imagens pesadas só irá dificultar o acesso do visitante à informação, retardando o carregamento do site. O problema se agrava quando o visitante está utilizando uma internet móvel como o 3G.

Solução para o problema

Visto que não existe outro formato de imagem que mantém a transparência de uma imagem de forma agradável, é necessário fazer um tratamento especial para as imagens PNG. Como?

A maioria dos programas de edição de imagem salvam a imagem PNG em 24-bit e isso significa que eles utilizam 24 bits para cada agrupação de pixels de mesma cor. Reduzindo essa quantidade de pixels a qualidade da imagem é reduzida, porém é possível fazer mais agrupamentos e ainda utiliza menos bits para cada agrupamento, deixando a imagem mais leve.

Uma outra informação desnecessária para a utilização na internet nas imagens PNG são os metadados. Metadados são informações do próprio arquivo, como título, autor, descrição, direitos autorais, etc.

Conheça o TinyPNG

O TinyPNG utiliza tecnicas de compressão inteligentes para que a perda de qualidade das imagens PNG seja pequena e o tamanho do arquivo seja reduzido consideravelmente, alterando a imagem para 8-bit e removendo os metadados.

A redução do tamanho do arquivo varia em relação a imagem. Com os testes realizados pela Kosbit, houveram reduções entre 50% e 90%, ou seja, uma imagem PNG de 100kb pode ser reduzida à 10kb.

http://tinypng.org/

1º teste – Firefox

O primeiro teste foi realizado com o logotipo do navegador Firefox, em que possui uma grande quantidade de cores em gradiente.

Logotipo no navegador Firefox original

Logotipo no navegador Firefox gerado pelo TinyPNG

Sendo a imagem original 274kb e a imagem gerada pelo TinyPNG 58kb, houve uma redução de 78% no tamanho da imagem. Porém, quando a imagem é vista em tamanho real, percebe-se que a qualidade da imagem foi afetada em regiões que possuem gradiente. Nesse caso, é importante analisar o que é mais importante: manter a qualidade da imagem ou priorizar a velocidade do site.

2º teste – Kosbit

O segundo teste foi relizaco com uma imagem mais simples, sem gradiente.

Logotipo da Kosbit original

Logotipo da Kosbit gerado pelo TinyPNG

A imagem original tem 14kb e a imagem gerada pelo TinyPNG tem 2kb, reduzindo o tamanho da imagem em 85%. A qualidade da imagem não foi alterada nesse teste.