LAB – Testando formatos de Imagens

 

gif-png-jpg-diff

Olá pessoas, como muitos já sabem eu finalmente iniciei minha graduação na Faculdade Marista e por causa disso, o tempo que eu tinha para planejar/postar coisas no blog foi quase que completamente extinto. Mas como a proposta do blog foi postar minhas experiências e compartilhar o que eu aprendi,  vou continuar postando (mais eventualmente que nunca) no blog mesmo que sejam posts curtos e feitos a pressa.

Aproveitando um trabalho passado pela minha professora de Introdução ao planejamento visual (ministrada pela professora: Flavia da Fonte) vou fazer uma pequena comparação e algumas considerações sobre diferentes tipos de formatos de imagens e quais (na situação colocada) seriam as melhores possibilidades para o uso na internet. Lembrando apenas de que isso é baseado em um trabalho de faculdade, logo o conteúdo pode ser um tanto chato básico, mas valeu o esforço.

A situação proposta, é que tenho duas imagens (uma do campos da faculdade marista, e outra da logo da faculdade) que serão utilizadas em um website. O objetivo do exercício e  tentar varias formas de compressão de imagem e disertar sobre suas diferenças.

Imagem 1

GIF

Gif Perceptivo 128 Cores 68,8KB
Gif Perceptivo 128 Cores 68,8KB
Gif Limitado 256 Cores 52,6KB
Gif Limitado 256 Cores 52,6KB
Gif Seletivo 64 Cores 61,1KB
Gif Seletivo 64 Cores 61,1KB

As imagens GIF apresentaram um tamanho relativamente pequeno, Quanto menos cores foram usadas nas compressões menos detalhes pode se perceber na imagem. A GIF seletiva de 64 cores apresentou um tom acinzentado causado pela paleta reduzida de cores. A GIF perceptiva de 128 cores é menos acinzentada que a primeira mais, a imagem aparenta um ‘blur’ que diminui a nitidez. A GIF limitada 256 foi a que apresentou o menor tamanho, porem a compressão limitada gera certo granulado dando uma aparência estranha a imagem.

JPG

 

JPG Q10 Progressivo 13KB
JPG Q10 Progressivo 13KB
JPG Q60 Progressivo 19.1KB
JPG Q60 Progressivo 19.1KB
JPG Q100 Otimizado 153KB
JPG Q100 Otimizado 153KB

As imagens em JPG Apresentaram um tamanho mais variado, a primeira com qualidade 10 apresentou apenas 13kb, porém ela resultou em uma imagem sem detalhes e embaçada. A JPG progressiva com qualidade 60 apresentou um bom balanço de cores, a distorção ainda que presente, está menos perceptível tornando essa opção uma boa alternativa para uso na web. Por fim a JPG com qualidade 100 Otimizada apesar de não ter praticamente nenhuma distorção de cor ou de imagem, gerou um arquivo muito pesado.

PNG

PNG 8 Limitado 256 Cores 51,3KB
PNG 8 Limitado 256 Cores 51,3KB
PNG24 235KB
PNG24 235KB
PNG 8 Seletivo 128 Cores 68,9KB
PNG 8 Seletivo 128 Cores 68,9KB

O Formato PNG-24 trás como principal vantagem a possibilidade de utilizar imagens com transparência. Na imagem apresentada isso não é necessário. A imagem em png24 apresentou um tamanho muito superior ao máximo obtido no JPG, a imagem basicamente não tem distorções de cores nem baixa nitidez. Porém para web o arquivo ficou muito pesado sendo nessa situação o uso do PNG-24 não recomendado. Ambas as PNGs 8 apresentaram resultados bastante similares ao do formato GIF. Quanto menos cores menos nítidas as imagens e quando a compressão limitada  é utilizada a imagem fica com um aspecto granulado.

Considerações sobre a primeira imagem

Em vias gerais quanto menor o tamanho do arquivo menor a qualidade da imagem. Porém dependendo do tipo de imagem utilizada pode se obter um resultado satisfatório com um tamanho reduzido. Em um contexto de internet onde o tamanho das imagens importa muito o melhor formato para se utilizar a imagem proposta é o JPG comprimido a Qualidade de 60, pois nesta configuração a perda de qualidade e pouco sentida e o tamanho da imagem é consideravelmente menor.

 Créditos da foto: Márcia Mende Campos

Imagem 2

PNG

PNG 8 Limitado 256 Cores 51,3KB
PNG 8 Limitado 256 Cores 51,3KB
PNG24 235KB
PNG24 235KB
PNG 8 Seletivo 128 Cores 68,9KB
PNG 8 Seletivo 128 Cores 68,9KB

As imagens pngs aceitam fundo transparente, sendo a png24 capaz de reproduzir mais fielmente este efeito. Na primeira imagem a PNG 8 32 Cores apresenta uma leve distorção de cores percebida pelo tom mais claro do azul. Esta distorção e resultado da quantidade limitada de cores utilizada (32 no caso). A imagem png 8 de 256 cores já se mostra mais fiel ao original o tamanho apresentado também é mínimo.

Como dito anteriormente as PNGs aceitam fundo transparente, a PNG 24 é a que mais consegue se aproximar do original nessas situações. Porém em imagens com poucas cores as PNGS não são as mais indicadas, isso por que o mesmo efeito pode ser conseguido utilizando outros formatos que possibilitam um tamanho muito menor.

JPG

JPG Otimizado 10 6,86KB
JPG Otimizado 10 6,86KB
JPG Otimizado 45 11,9KB
JPG Otimizado 45 11,9KB
JPG Progressivo 100 43KB
JPG Progressivo 100 43KB

As imagens JPG não suportam fundo colorido, esse tipo de formato é recomendado para imagens com muitas cores e que não possuam fundo transparente. Nos Exemplos apresentados acima a principal diferença entre as imagens é a nitidez. A primeira apresenta a imagem levemente embaçada. A segunda a imagem está mas nítida porém o tamanho já se mostra grande em comparação as imagens em png-8. A terceira está muito nítida porem seu tamanho está muito alto para a simplicidade da imagem.

GIF

GIF 256 Adaptativo 6,42KB
GIF 256 Adaptativo 6,42KB
GIF 256 Perceptivo 6,42KB
GIF 256 Perceptivo 6,42KB
GIF 128 Seletivo 6,42KB
GIF 128 Seletivo 6,42KB

O formato GIF apresentou tamanhos iguais em todas as otimizações, as diferenças são tão imperceptíveis que eu não consigo descreve-las.

Considerações Finais.

Na situação apresentada os formatos  apresentados  png-8 e GIF se mostraram mais vantajosos, isto porque ambos apresentaram tamanhos reduzidos e poucas diferenças em relação a imagem original. A JPG seria a opção menos indicada, pois além de não possuir a possibilidade de fundo transparente as imagens ficam menos nítidas e maiores quando comparadas com os outros dois formatos.

Dúvidas, correções, sugestões e ou comentários abaixo, até a próxima.

 

Post a comment

* Copy This Password *

* Type Or Paste Password Here *

14,971 Spam Comments Blocked so far by Spam Free Wordpress

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>