Formatos de imagem para a web no Photoshop

O que você precisa saber para gerar imagens para a Web

por Mário Amaya



Conforme anteriormente explicado, sempre deve haver a preocupação com o peso das páginas, isto é, o tamanho total dos arquivos que a compõem. Seu site (ou o de seu cliente) será acessado por milhares de pessoas. Imagine o total de tráfego combinado a milhares de downloads de um arquivo desnecessariamente grande, além do incômodo causado a cada um dos usuários devido a esses downloads mais lentos e ao esforço extra do computador em processá-los. Em um web site típico, as imagens compõem a maior parcela do conteúdo em tamanho de arquivo. Por tudo isso, saber dimensionar as imagens é fundamental para o sucesso no design para a  Web. Existem apenas três formatos fundamentais de imagem exportados pelo Photoshop e usados na Web: JPG, GIF e PNG.

JPG

É também conhecido pela sigla de quatro letras JPEG, de Joint Photographic Experts Group,  nome da comissão técnica que lançou o formato, em 1991. É uma extensão de uso geral para fotografias, e por isso é a mais usada.

A razão de sua popularidade é a capacidade de encolher o tamanho do arquivo de imagem. O  processo de compressão joga fora parte da informação visual, mas de uma maneira que engana o olho humano; a maioria das pessoas não nota defeitos na imagem salva com compressão de qualidade média. Compressões mais agressivas produzem sujeiras visíveis na imagem, pixels de coloração e brilho estranhos, que se concentram ao redor das áreas de contraste e contorno na foto. Compressões suaves produzem imagens indistinguíveis da original, mas representam um desperdício, caso seja possível comprimir a imagem ainda mais sem prejudicar a qualidade visual.

É aí que entra o critério do webdesigner sobre qual será a máxima compressão que poderá ser aplicada à imagem sem que ela pareça deteriorada aos olhos do cliente ou usuário do site. Vamos a uma série de dicas importantes para a criação eficiente de imagens JPG para seus sites:

1 Ao usar o Photoshop para exportar imagens para a Web, use sempre o comando File » Save for Web & Devices. O comando Save As também gera JPG publicável na Web, mas seu tamanho é maior, por conter algumas informações extras (metadados) que não têm utilidade em um web site.

2 Escolha a compressão média (50) e avance para mais ou para menos no controle deslizante, sempre comparando a imagem original à comprimida na mesma janela, na escala de 100% (sem zoom).

3 A opção Progressive gera uma imagem que carrega no browser inteira em blocos grandes, e depois esses blocos vão sendo substituídos por outros cada vez menores, até atingir a nitidez normal. A utilidade disso é permitir ao usuário ter uma idéia da imagem antecipadamente, ainda no começo do download. Essa opção não é muito usada devido ao fato de não ser amplamente suportada pelos browsers, mas hoje é uma opção segura. Os elementos menores do site podem ser salvos sem a opção Progressive.

4 Como a sujeira da compressão JPG se concentra em áreas muito contrastadas, um controle de Blur foi incluído para atenuar o contraste, e assim reduzir o ruído. Pode funcionar, ou não, o que depende muito da foto.

5 Você notará, também, que a sujeira da compressão é muito mais visível nas áreas de cores saturadas. Experimente abrir Image » Adjustments » Hue & Saturation e reduzir um pouco a saturação dessa cor na imagem – caso não se exija um realismo muito grande no resultado, é claro.

6 Parece um paradoxo, mas imagens maiores são comprimidas com mais facilidade do que as menores. Ao definir o tamanho de uma foto para apresentá-la em um web site, além do tamanho da tela, você deve experimentar para descobrir o equilíbrio entre tamanho de arquivo razoável com qualidade aceitável. Salve a mesma imagem em diversos tamanhos um pouco diferentes e compare os resultados.

GIF

O segundo formato gráfico mais usado na Web é o GIF, que já era usado antes mesmo da existência da Web para transmitir imagens entre computadores. Atualmente, o GIF tem duas aplicações básicas: animações e gráficos. O uso em animações é detalhado no tutorial sobre animação GIF. A vantagem no uso em gráficos é que as áreas de cores chapadas, comuns nesse tipo de imagem, podem ser comprimidas em GIF de maneira extremamente eficiente e sem as sujeiras visuais características do JPG. Outra vantagem é o suporte a transparência rudimentar para criar objetos de contornos irregulares.

A desvantagem é que o GIF não é bom para fotos, por suportar apenas um máximo de 256 cores simultâneas. Ele “falsifica” as cores faltantes por meio de um processo de dithering (difusão de pixels). Fotografias indevidamente comprimidas em GIF são raras atualmente, mas eram fáceis de reconhecer no passado por terem uma aparência “arenosa”.

PNG

O PNG é uma evolução do GIF, que tem algumas vantagens interessantes: suporta toda a gama de cores da tela, usa um esquema de compressão que não danifica a imagem (embora o resultado seja menos comprimido que o JPG) e também inclui a capacidade única de aceitar recortes suaves. Mas não é largamente usado na Web, devido à falta crônica de suporte no browser majoritário (Microsoft Internet Explorer). Não recomendamos que você use PNG, a não ser que saiba exatamente o que está fazendo, pois ele certamente dará problema em um browser mais antigo – e o mundo ainda está cheio deles, queiram ou não os designers. O PNG encontra sua principal utilidade como componente de projetos em Flash.