Imagens para web – GIF, PNG ou JPG?

O Photoshop vem melhorando constantemente seu algoritmo de compressão para imagens web. E desde que a Adobe adquiriu a Macromedia (e seu Fireworks) o processo de salvar imagens mais leves e de melhor qualidade ficou ainda melhor. A opção “save for web” é repleta de opções e, por assim dizer, armadilhas para quem não é familiarizado com a ferramenta.

Com a imagem aberta no Photoshop selecione o menu File > Save for Web ou pressione Alt+Shift+Ctrl+S.

Da janela que se abre, o que interessa pra nós são as opções da coluna direita, apresentada abaixo:

a tela de opções da ferramenta save for web do Photoshop repleta de parâmatros e filtros

 

Para efeito de comparação entre o original e o resultado final, sugiro escolher a opção “2-Up”, que mantém as imagens lado a lado (ou em cima e abaixo se ela for muito comprida na horizontal).

escolha a opção 2-Up, para exibir as imagens original e optimizada lado a lado

1. GIF, JPG, PNG-8 ou PNG-24?

São as extensões de arquivo e definem a taxa de compressão e a qualidade da imagem. Discutir sobre qual extensão é a ideal depende tão somente do tipo de imagem (foto, figura, logomarca, textura, etc.) e a abordagem pode girar em torno do conceito técnico ou gosto pessoal.

A princípio, todas essas extensões têm um só objetivo: reduzir o peso do arquivo. Tanto melhor se mantiverem a qualidade da imagem. E é aí que reside o diferencial de cada uma.

GIF e PNG-8 trabalham com compressão de imagem através da quantidade de cores que você escolhe e permitem fundo transparente. JPG tem seu algorítimo de compressão baseado na qualidade desejada (baixa, média, alta, muito alta ou máxima) e não permite transparência. Já o PNG-24 não é configurável e se baseia na quantidade de cores da imagem e transparência. É o mais fiel ao arquivo original e também o que pode gerar os arquivos optimizados mais pesados.

  • GIF (Graphics Interchange Format) serve para imagens com cores sólidas (chapadas) sem muitas nuances (degradés) em grandes áreas e permite escolher a quantidade de cores para sua composição (item 8).
    Recomendado para: logomarcas, ícones e textos (como IR para títulos, por exemplo).
  • PNG-8 (Portable Network Graphics de 8 bits), como o próprio nome já diz, é uma extensão voltada para distribuição em rede. Veio para substituir o GIF mas nem sempre gera arquivos menores que seu concorrente. Por conta disso sempre procurei, sem sucesso, um estudo científico que comparasse o algorítimo de compressão de ambos para fins de benchmarking. Sendo assim, recomendo que você teste entre um e outro para ver qual gera o menor arquivo, pois a olho nu são absolutamente idênticos. Particularmente percebo que o PNG-8 se sai melhor do que o GIF. No entanto, se tiver fundo transparente você pode esbarrar em um problema ainda conhecido: compatibilidade com o IE6.
    Também é recomendado para: logomarcas, textos e ícones.
  • JPEG (Joint Picture Experts Group) – ou simplesmente JPG – foi criado para fins fotográficos e seu método de compressão foi pensado para fins de armazenamento. Imagens de alta qualidade necessitam de maior espaço, e vice-versa. Para fins de internet, configurar a qualidade em torno de 40% (média) a 60% (alta) geram resultados mais que satisfatórios e não existe padrão específico. Tudo vai depender do original e da necessidade. Lembrando que um original ruim gera uma imagem ruim e, nesse aspecto, o JPG se assemelha muito às fotocópias impressas. Ou seja, a cópia da cópia vai piorando gradativamente. Assim, o JPG do JPG perde cerca de 20% da qualidade. Portanto, mantenha sempre a matriz para eventuais alterações e poder gerar novos JPGs.
    Recomendado para: fotos, texturas, amplos degradés e imagens de grandes dimensões em geral.
  • PNG-24 (Portable Network Graphics de 24 bits) vem sendo utilizado amplamente não só por sua fidelidade ao original mas por permitir transparência real, sem matte (explico mais adiante o item 5D). Pensando no custo-benefício, se a imagem for uma foto, o JPG sai ganhando pela compressão.

2. Tipos de optimização (GIF e PNG-8)

É a maneira com que a tabela de cores é gerada. O extinto programa Adobe ImageReady (vinculado ao Photoshop 6) chamava isso de “algoritmo de redução de cores”.

  • Perceptiva gera uma tabela de cores com base na percepção do olho humano.
  • Seletiva é semelhante a anterior, porém tenta preservar cores sem contraste e também as web-safe colors. Tende a gerar arquivos ligeiramente maiores, mas é a mais recomendada.
  • Adaptativa se baseia na porção do espectro de cores que representa a maioria das cores na imagem e, portanto, também gera arquivos um pouco maiores que a anterior.
  • Restritiva é a que mais “foge” da semelhança com o original, pois transforma todas as cores da imagem em web-safe colors. E permite que você escolha a quantidade de cores. Curiosamente é a que pode gerar o arquivo de maior tamanho. Mas isso acontece devido a inserção de novos pixels na imagem para que duas ou mais cores, próximas, tentem se parecer mais com o original. O que, de fato, nem sempre acontece. Não recomendo essa optimização pois seu uso é muito específico.

2. Tipos de optimização (JPG)

Tanto em qualidade baixa, média, alta, muito alta e máxima, a compressão do JPG pode ser:

  • Progressiva exibe a imagem aos poucos, permitindo que o usuário perceba que uma imagem está sendo carregada. Deixe esta opção marcada caso sua finalidade seja para dispositivos móveis ou de conexão mais lenta. JPGs progessivos são ligeiramente mais pesados, pois carregam informações extras para a exibição gradativa.
  • Otimizada usa uma tabela de compressão mais efetiva e reduz consideravelmente o peso do arquivo sem perda visual de qualidade. Deixe essa opção marcada sempre.

3. Quantidade de cores (somente GIF e PNG-8)

Desnecessário explicar muito. Mas procure evitar a quantidade máxima (256). A diferença visual usando a metade das cores pode ser imperceptível, já o tamanho do arquivo, não. Na maioria das vezes, botões de menu, itens de navegação e ícones podem ser exibidos muito bem com 32 ou 64 cores. E vale lembrar que você pode escolher um número qualquer de cores além das pré-definidas, mas não recomendo, exceto em casos muito específicos.

4. Dithering

exemplo da atuação do dither, que usa de ruído para imitar visualmente um degradéDither é um “ruído” aplicado intencionalmente para tornar mais homogênea a passagem de uma cor para outra, prevenindo grandes áreas de cor chapada (steps visíveis do degradé). Sem ele a imagem pode ficar com um aspecto de ilustração.

Já os 3 métodos de dithering são muito parecidos a olho nu e o único que pode alterar significativamente no tamanho do arquivo é a 3ª opção.

  • Diffusion, o método mais comum e mais utilizado, por randomização de pixels. Permite ajustar sua intensidade.
  • Pattern, por porções da cor. Padrões definidos se misturam.
  • Noise resulta num ruído mais intenso, inserindo pixels de cor não semelhantes aos seus vizinhos.

5. Transparência (somente GIF, PNG-8 e PNG-24)

exemplo de GIF e PNG com transparência por matte, que é um calço de cor para simular uma transparência real

Apesar de GIF/PNG-8 e o PNG-24 permitirem transparência, somente no PNG-24 ela é, digamos, real. No GIF e PNG-8 a transparência é obtida pormatte, uma espécie de “calço de cor”. Veja na imagem ao lado, figuras com linhas retas como o quadrado não necessitam de matte (e nesse caso nem de transparência, concorda?).

Já rotacionando o quadrado temos linhas diagonais cujo efeito serrilhado, conhecido tecnicamente comoalias gera pixels com cores intermediárias para suavizar visualmente o limite de resolução da tela. Quanto menor a resolução da tela, mais perceptível o serrilhado.

matte entra exatamente onde o anti-alias age. Os pixels transparentes gerados pelo anti-alias são “calçados” previamente pela cor de fundo para causar um melhor recorte. Então, se gerarmos um GIF/PNG-8 transparente com matte em branco, como no exemplo ao lado, o serrilhado continua perceptível em fundos que não sejam o branco, dando uma impressão de falsa transparência.

O PNG-24 acaba com essa limitação, eliminando a necessidade do matte e ampliando o uso de imagens com muitas transparências, sombras, reflexos e etc.

6. Modo Entrelaçado

Entrelaçado e Não Entrelaçado são os modos de exibição da imagem no monitor.

GIFs não entrelaçados são exibidos de cima para baixo de uma só vez. Mesmo que muito rápido, dependendo do tamanho da imagem pode gerar um efeito chamado “flickering” (cintilante) pois o espaço a ser exibida a imagem aparece antes de ela própria.

Já imagens entrelaçadas são exibidas em 4 etapas. A primeira etapa exibe as linhas 8, 16, 24, … (1/8 dos dados da imagem) a segunda as linhas 4, 12, 20, … (1/4 dos dados), depois as linhas 2, 6, 10, … (1/2 dos dados) e finalmente as linhas 1, 3, 5, … completando o carregamento.

exemplo de imagem sendo exibida em 4 etapas para exemplificar o modo entrelaçado

Felizmente, desde a chegada da internet banda larga, não existe mais perceptível vantagem ou desvantagem entre um modo e outro. No entanto, para seu conhecimento, mesmo em conexões mais lentas a desvantagem do modo entrelaçado só era percebida em arquivos muito pequenos (algo em torno de 6Kb), pois este acrescenta alguns bytes no tamanho do arquivo. Por serem pequenos, carregavam mais rápido, não havendo necessidade de mudar seu modo de exibição. Afinal, alguns bytes para um arquivo de cerca de 6Kb faz fazia mais diferença do que uns poucos kbytes para um arquivo de 200, 300, 500Kb.

7. Perfil de cor

Explicar perfis de cores vai além do propósito deste artigo. Melhor deixar essa opção sempre marcada para que toda e qualquer imagem gerada saia com o perfil de cor ideal para internet: O padrão sRGB.

8. Tabela de cores (somente GIF e PNG-8)

Mesmo que você escolha a quantidade de cores (item 3) para compressão, se a imagem contiver um número menor de cores, a tabela exibirá apenas as cores existentes, ignorando a quantidade máxima que você escolheu. Já se a imagem for muito elaborada você pode limitar o número de cores a serem exibidas. Os pequenos losangos brancos em algumas cores representam as web-safe colors. Se você for editar a tabela (remover ou adicionar cores por sua conta) evite remover qualquer uma das web-safe colors.

Penso que isso seja suficiente para que você possa gerar imagens mais leves e de maior qualidade. Se ainda restar dúvidas ou tiver alguma crítica ou sugestão, comente!

Referências:

About professores

Professor particular de informática em Curitiba especializado em atender a Terceira Idade. Atendo apenas na casa do aluno.

Related Post