fbpx

Blog

Quando usar JPG ou PNG: formatos de arquivo para sites e lojas virtuais

Avaliação do Usuário

Estrela ativaEstrela ativaEstrela ativaEstrela inativaEstrela inativa
 

Quando escolher o formato PNG e quando escolher JPG? Faz tempo que estes são os formatos principais para imagens na web, seja em sites ou lojas virtuais, blogs, etc. Por isso é essencial saber quando usar um ou outro formato.

Estamos falando de criação de imagens para, por exemplo, logotipos ou ícones em geral. E também das imagens de produtos ou banners, etc. 

Velocidade e cores da imagem

Você precisa levar algumas coisas em consideração quando vai colocar imagens na Web. A primeira é a velocidade de carregamento. Não adianta ter uma imagem maravilhosa que ninguém quer ver porque demora tanto para carregar que “perde a graça” ou seu público simplesmente sai da página porque não tem tempo para esperar (quem tem tempo hoje em dia?). Então precisamos ter a imagem no menor tamanho possível, este é o primeiro objetivo. 


A segunda coisa a considerar é a quantidade de cores que a imagem tem. Não precisa quebrar a cabeça, te dou uma dica bem fácil: se tiver degradê, tem muitas cores. Se não tem degradê, tem o que chamamos de cores “chapadas”, como é o caso dos ícones e logotipos em geral (degradê em logotipo já saiu de modo há muitos anos). As fotos, no entanto, em 99,9% dos casos tem muitas cores, sempre tem nuances e tons diversos.

Quando usar formato PNG ou formato JPG?

O formato PNG é indicado para imagens que NÃO tenham nenhum tipo de degradê, tenham poucas cores e chapadas, por exemplo logotipos, ícones, etc. Já o formato JPG é indicado para imagens com degradês e todo tipo de foto de produto, banners, etc. Além da qualidade ser melhor o tamanho da imagem também vai ser menor.  Veja a seguir um comparativo da mesma imagem em cada formato, simulando no Photoshop:

Logotipo (cores chapadas) JPG x PNG, qual leva a melhor?

Na simulação abaixo, veja como a mesma imagem tem 25% menos de tamanho usando PNG (e a qualidade é ótima)






Foto de Produto (degradês) qual leva a melhor, PNG ou JPG?

Na próxima simulação uma imagem grande e bem detalhada de produto em lojas virtuais, com 1000 pixels de largura e de altura:

A mesma imagem fica com quase 2 Mb (MEGAS!) no formato PNG e cai para 319 Kb no formato JPG, uma redução de MAIS DE 80% no tamanho final do arquivo.

Os últimos dois itens a considerar para usar o melhor formato de arquivo

Ainda tem mais duas coisas para considerar. A resolução correta e o tamanho adequado. A resolução é sempre 72dpi (que é uma sigla para dots per inch, ou pontos/pixels por polegada - não vamos nos aprofundar na diferença entre pontos e pixels, basta lembrar que a medida universal é em polegadas (inch, ou inches em inglês).

Já o tamanho adequado é para verificar se sua criação está sendo salva no tamanho que efetivamente será usada no espaço da página. Redimensione a imagem, criando as cópias que forem utilizadas, na versão desktop, mobile e retina (quando sua plataforma permitir). Por que ter “todo” este trabalho? O tamanho “físico” da imagem também interfere no tamanho final do arquivo e também na qualidade visual. Ou seja, nada de aproveitar a imagem maior! Menor, então, nem se fala.


Repetindo, a dica rápida é que a quantidade de cores do arquivo vai te ajudar a decidir se o formato JPG o o formato PNG geram uma uma imagem menor e com ótima visualização.
 

É isso. Espero que tenha ajudado!

Boa Sorte com suas imagens!





Direitos Reservados © 2010-2024 IEC Agência Digital IEC Internet E-Commerce. Proibida reprodução sem autorização expressa.

Ao navegar neste site, você aceita os cookies que usamos para melhorar sua experiência, de acordo com nossa Política de Privacidade