- 04 Jun 2012, 22:57
#22472
Faz tempo que eu queria contribuir com a comunidade e finalmente consegui um tempinho. Temos a sorte de termos excelentes profissionais aqui, principalmente na parte de programação. 
Como vi que muitos aqui têm dúvidas/problemas com os formatos de imagem e resolução, resolvi ajudar com o que eu sei. Então vamos lá...
Os formatos
Atualmente para internet usamos basicamente três formatos de imagem: jpg, png e gif.
O jpg é um formato voltado principalmente a fotografias, imagens com muitas cores e/ou de alta resolução. Uma característica importante é que a quantidade de cores contida na imagem não tem um peso tão grande no tamanho do arquivo. A principal vantagem é poder controlar o nível de compressão, podendo ajustá-lo de uma forma a conseguir um bom equilíbrio entre tamanho de arquivo e qualidade. A desvantagem do jpg é que quanto maior a compressão mais artefatos as imagens terão (artefatos são aqueles quadradinhos meio embaçados que aparecem na imagem) e menor será a nitidez e a fidelidade de cores da imagem. Existe o recurso Blur (desfoque) para compensar um pouco esta compactação, mas deve ser usado com cuidado para não deixar a imagem desfocada demais.
Onde usar:
-Fotografias;
-Quando for necessário imagens de resolução alta, porém de tamanho de arquivo reduzido.
Onde não usar:
-Elementos de design (ícones, gradientes, fundos pequenos que se repetem e pequenas imagens que comporão o design de sua loja);
-Imagens que precisem de fidelidade de cores e maior nitidez;
-Quando há necessidade de transparência (não é suportado por este formato).
A principal característica do gif é o suporte a animação. São quadros que são executados na sequencia e no tempo especificado. Este formato suporta até 256 cores (8 bits) e transparência. Como o suporte a cores é limitado (em quantidade simultânea de cores e não na palheta de cores) o uso em fotos não é recomendado. A compressão da imagem não afeta a qualidade. A quantidade de cores influi em peso no tamanho do arquivo. Como é um formato antigo (foi lançado em 1989) é preferível a utilização do png que tem uma melhor compressão, a menos que seja necessário o recurso de animação.
Onde usar:
-Animações;
-Elementos de design (somente se o arquivo final for menor que o png, o que é muito improvável);
Onde não usar:
-Fotografias;
-Imagens de alta resolução ou com muitas cores;
O png é um formato feito para substituir o gif em quase tudo. Ele pode ser 8 bits ou 24 bits em relação a cores. Também suporta transparência, porém não suporta animações. A quantidade de cores também influi com peso no tamanho do arquivo. A compressão suportada é bem mais robusta que o gif - resultando em arquivos menores – e como o gif o nível de compressão não afeta a qualidade da imagem. Resoluções altas podem ser usadas com cuidado, evitando imagens como muitas cores.
Onde usar:
-Elementos de design;
-Imagens pequenas que precisem de fidelidade de nitidez e cores;
-Imagens de alta resolução com poucas cores e/ou muitas áreas de transparência (sprites).
Onde não usar:
-Imagens com muitas cores (pode ser usado com fotos se forem de resolução bem baixa, porém é preferido o jpg);
-Imagens de alta resolução.
Resolução (dimensões):
A resolução é algo muito relativo ao uso. Não existe uma formula ou algo do tipo. O importante é usar o bom senso. Nunca use uma imagem com dimensões maiores do que serão exibidas (ex.: uma imagem 640x480 que só será exibida em 320x240) pois você só estará deixando o seu site mais lento e ainda perderá a qualidade da imagem.
Para imagens dos produtos um tamanho de 500px por 500px geralmente é suficiente. Se você for utilizar algum recurso como o Cloud Zoom (ampliar ao passar o mouse) então será necessário uma resolução maior, algo como 1024px por 800px é o suficiente para o básico. Em alguns casos, como na loja de roupas que estou montando, é necessário a visualização de mais detalhes, logo a resolução aumentará para algo em torno de 1536px por 1024 px. Lembrando que resoluções altas pedem o uso de jpg e um pouco de paciência para balancear qualidade x tamanho.
Para os slides da página principal vai depender do seu tema, mas geralmente é algo em torno de 980px por 280px e provavelmente jpg será a melhor opção. O mais importante é manter o tamanho abaixo dos 100kb, e não utilizar muitas fotos (4 fotos de 100kb já somam 400kb!)
Para elementos de design é necessário o uso de imagens com resolução menor. Esta parte é muito relativa e a regra geral é quanto menos melhor. Atenção especial para os fundos (background). Se for utilizado uma imagem pequena que se repete (até cerca de 200x200), utilize o png. Se for uma imagem de alta resolução como uma fotografia, utilize o jpg.
Para finalizar, a melhor opção sempre é testar, principalmente se você estiver com alguma dúvida. Às vezes mudar o formato ou diminuir em 10% ou um pouco mais a resolução da imagem pode diminuir drasticamente o tamanho do arquivo.
Não se esqueçam de que quanto menor o tamanho dos arquivos, menor será o tempo de carga e maiores as chances de conseguir mais vendas ;D.
Espero ter ajudado alguém. Qualquer dúvida ou erro é só perguntar ou avisar.
Como vi que muitos aqui têm dúvidas/problemas com os formatos de imagem e resolução, resolvi ajudar com o que eu sei. Então vamos lá...Os formatos
Atualmente para internet usamos basicamente três formatos de imagem: jpg, png e gif.
O jpg é um formato voltado principalmente a fotografias, imagens com muitas cores e/ou de alta resolução. Uma característica importante é que a quantidade de cores contida na imagem não tem um peso tão grande no tamanho do arquivo. A principal vantagem é poder controlar o nível de compressão, podendo ajustá-lo de uma forma a conseguir um bom equilíbrio entre tamanho de arquivo e qualidade. A desvantagem do jpg é que quanto maior a compressão mais artefatos as imagens terão (artefatos são aqueles quadradinhos meio embaçados que aparecem na imagem) e menor será a nitidez e a fidelidade de cores da imagem. Existe o recurso Blur (desfoque) para compensar um pouco esta compactação, mas deve ser usado com cuidado para não deixar a imagem desfocada demais.
Onde usar:
-Fotografias;
-Quando for necessário imagens de resolução alta, porém de tamanho de arquivo reduzido.
Onde não usar:
-Elementos de design (ícones, gradientes, fundos pequenos que se repetem e pequenas imagens que comporão o design de sua loja);
-Imagens que precisem de fidelidade de cores e maior nitidez;
-Quando há necessidade de transparência (não é suportado por este formato).
A principal característica do gif é o suporte a animação. São quadros que são executados na sequencia e no tempo especificado. Este formato suporta até 256 cores (8 bits) e transparência. Como o suporte a cores é limitado (em quantidade simultânea de cores e não na palheta de cores) o uso em fotos não é recomendado. A compressão da imagem não afeta a qualidade. A quantidade de cores influi em peso no tamanho do arquivo. Como é um formato antigo (foi lançado em 1989) é preferível a utilização do png que tem uma melhor compressão, a menos que seja necessário o recurso de animação.
Onde usar:
-Animações;
-Elementos de design (somente se o arquivo final for menor que o png, o que é muito improvável);
Onde não usar:
-Fotografias;
-Imagens de alta resolução ou com muitas cores;
O png é um formato feito para substituir o gif em quase tudo. Ele pode ser 8 bits ou 24 bits em relação a cores. Também suporta transparência, porém não suporta animações. A quantidade de cores também influi com peso no tamanho do arquivo. A compressão suportada é bem mais robusta que o gif - resultando em arquivos menores – e como o gif o nível de compressão não afeta a qualidade da imagem. Resoluções altas podem ser usadas com cuidado, evitando imagens como muitas cores.
Onde usar:
-Elementos de design;
-Imagens pequenas que precisem de fidelidade de nitidez e cores;
-Imagens de alta resolução com poucas cores e/ou muitas áreas de transparência (sprites).
Onde não usar:
-Imagens com muitas cores (pode ser usado com fotos se forem de resolução bem baixa, porém é preferido o jpg);
-Imagens de alta resolução.
Resolução (dimensões):
A resolução é algo muito relativo ao uso. Não existe uma formula ou algo do tipo. O importante é usar o bom senso. Nunca use uma imagem com dimensões maiores do que serão exibidas (ex.: uma imagem 640x480 que só será exibida em 320x240) pois você só estará deixando o seu site mais lento e ainda perderá a qualidade da imagem.
Para imagens dos produtos um tamanho de 500px por 500px geralmente é suficiente. Se você for utilizar algum recurso como o Cloud Zoom (ampliar ao passar o mouse) então será necessário uma resolução maior, algo como 1024px por 800px é o suficiente para o básico. Em alguns casos, como na loja de roupas que estou montando, é necessário a visualização de mais detalhes, logo a resolução aumentará para algo em torno de 1536px por 1024 px. Lembrando que resoluções altas pedem o uso de jpg e um pouco de paciência para balancear qualidade x tamanho.
Para os slides da página principal vai depender do seu tema, mas geralmente é algo em torno de 980px por 280px e provavelmente jpg será a melhor opção. O mais importante é manter o tamanho abaixo dos 100kb, e não utilizar muitas fotos (4 fotos de 100kb já somam 400kb!)
Para elementos de design é necessário o uso de imagens com resolução menor. Esta parte é muito relativa e a regra geral é quanto menos melhor. Atenção especial para os fundos (background). Se for utilizado uma imagem pequena que se repete (até cerca de 200x200), utilize o png. Se for uma imagem de alta resolução como uma fotografia, utilize o jpg.
Para finalizar, a melhor opção sempre é testar, principalmente se você estiver com alguma dúvida. Às vezes mudar o formato ou diminuir em 10% ou um pouco mais a resolução da imagem pode diminuir drasticamente o tamanho do arquivo.
Não se esqueçam de que quanto menor o tamanho dos arquivos, menor será o tempo de carga e maiores as chances de conseguir mais vendas ;D.
Espero ter ajudado alguém. Qualquer dúvida ou erro é só perguntar ou avisar.
Editado pela última vez por unknown1140 em 05 Jun 2012, 11:59, em um total de 1 vez.
Elton Mesquita
http://paranoidrobot.com
http://paranoidrobot.com
