Central do Cliente

Lembrar-me

Conheça o TinyPNG e deixe seu site mais leve

É 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 original

Logotipo no navegador Firefox gerado pelo TinyPNG
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 original

Logotipo da Kosbit gerado pelo TinyPNG
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.

Publicado em 18 de maio de 2013 às 14:41.



Comentários