Curso Web Design | Afinal, qual o melhor formato de imagem para web?

Link to Blog do Curso Web Design - Microcamp SP

Afinal, qual o melhor formato de imagem para web?

Posted: 21 Aug 2014 05:40 AM PDT

Muita gente não dá a devida atenção para as imagens na hora de fazer um site – pelo menos não como deveria. E não me refiro a beleza: escolher a extensão da imagem da maneira correta pode fazer com que suas páginas tenham um carregamento mais dinâmico, promovendo uma experiência melhor de navegação para o usuário. E ainda é possível obter mais alguns benefícios observando algumas regrinhas simples e que podem fazer toda a diferença para o seu trabalho.

Nesse processo de busca pela imagem ideal para páginas da web, apresentarei para você alguns posts sobre o assunto, tais como: o tamanho, a resolução, a profundidade de cores e até algumas dicas que envolvem HTML e CSS que irão somar alguns benefícios ao seu trabalho. Hoje, no entanto, discorrerei sobre um assunto que ainda deixa muitos estudantes com dúvidas: afinal, qual o melhor formato de imagem para web?

Como sabemos, são muitos as extensões de imagens digitais existentes, mas em páginas para a internet trabalhamos preferencialmente com 03 formatos, cada uma deles com suas devidas vantagens e desvantagens. São eles:

JPEG ou JPG – o formato de imagem mais utilizado na web

O formato JPEG (ou Joint Photographics Experts Group) é o melhor formato de imagens digitais para web, de uma maneira geral.

Dito assim, de forma curta e grossa, você pode pensar que o assunto acabou aqui. Mas não é bem assim. Afinal, tudo depende de qual será a finalidade da sua imagem!

O JPEG é na verdade um formato de compressão de imagem e também uma extensão de arquivo. Ele pode armazenar milhões de cores em arquivos com tamanhos variáveis, podendo chegar a altas compactações de acordo com o nível de compressão (que pode ser ajustada de acordo com a necessidade do utilizador). Nesse método, algumas redundâncias da imagem são eliminadas para criar uma versão mais 'leve' da mesma.

Exemplo de compressão JPEG no Photoshop

Esse formato de imagem foi criado justamente com esse objetivo: auxiliar a compressão de arquivos de imagem em tamanhos grandes para o seu devido armazenamento. Como mencionei, a grande virtude de sua compactação é que você pode escolher diferentes níveis de compressão escolhendo o tamanho e a qualidade que necessitar, o que é especialmente útil em imagens para web. Isso explica porque o formato JPEG acabou se tornando o 'formato padrão' e o queridinho para imagens na internet.

Existem desvantagens, claro: o fato de o JPEG ser um formato de imagem de compressão com perdas faz com que seu uso seja visto sempre com alguma precaução. Afinal, a cada vez que você salva o arquivo essas perdas podem se acumular, não sendo possível recuperar sua qualidade original.

A mesma imagem salva em qualidades diferentes: pixelização ocorre em arquivos menores e com baixa qualidade

Outra característica negativa é que o formato JPEG não possui a capacidade de salvar a imagem com detalhes transparentes. Infelizmente, essa é uma característica do formato e não pode ser modificada. Se você recortar uma imagem no Photoshop e salva-la nesse formato com intenção de gravar o recorte, esqueça. Ele sempre irá "forçar" um fundo branco ao salvar o arquivo, justamente por não possuir suporte a canal alfa , recurso que permite criar efeito de opacidade nos pixels de uma imagem.

Á esquerda, o arquivo original e á direita, o mesmo arquivo recortado e salvo, mas que ganhou um fundo branco ao ser aberto.

GIF – um formato de imagem em decadência?

O GIF (Graphics Interchange Format) é um dos formatos pioneiros da internet.

Geralmente é utilizado em imagens com cores sólidas e alguns gradientes, como desenhos lineares (como cartoons), logotipos entre outros exemplos. Embora hoje em dia seja visto como um formato não muito indicado já que atualmente os dispositivos de saída como monitores podem exibir uma gama maior de cores, ainda é possível encontrar uma grande quantidade desses arquivos na rede.

Um dos benefícios da utilização do GIF é que os arquivos gerados nessa extensão resultam em tamanhos pequenos, que podem ser exibidos rapidamente em uma página. E, ao contrário do JPEG, ele tem suporte a transparências, ou seja, você pode recortar uma imagem (removendo o seu fundo, por exemplo) e utiliza-la com o recorte que fez. O GIF também não atribui perdas a um arquivo como o JPEG, o que o torna indicado para imagens que reproduzam elementos de texto e formas geométricas precisas, já que não há o tradicional "serrilhamento" das bordas, como ocorre com o JPEG.

Arquivo de imagem em GIF: repare na pobreza da profundidade das cores na imagem à esquerda, e à direita, a mesma imagem com o fundo recortado.

Sua principal característica, claro, é a possibilidade de permitir animações. Em geral, são animações bem simples, sem grande detalhamento das imagens e cores, mas de tamanho reduzido, o que propicia um carregamento rápido, como você pode ver na imagem a seguir:

O motivo desse carregamento rápido tem origem em sua principal desvantagem: os GIFs possuem uma paleta de cores limitada, baseada em apenas 256 cores. Por isso, não é indicado seu uso para fotografia, por exemplo. Isso acontece porque em fotografias as passagens de tom entre uma cor e outra exigem mais do que as 256 cores nativas do formato para que se obtenha uma boa visualização. Se você tentar salvar uma fotografia no formato de imagem GIF, o resultado mostrará uma imagem repleta de pontos, pois quando uma cor não pode ser exibida em sua plenitude, os pixels são dispostos de maneira que criem uma compensação para essa cor, o que nem sempre resulta em uma imagem fiel ao modelo.

Por sua limitação de cores evidente e também algumas disputas envolvendo sua patente – em especial o algoritmo LZW, que é utilizado para a compressão de dados do formato de arquivo e foi desenvolvido pela empresa Unisys – esse formato de imagem vem caindo em desuso, o que tem desencorajado muitos profissionais e companhias de software a utilizarem-no.

PNG – a salvação?

Até este ponto, se você está lendo este post com atenção , deve ter percebido que temos um dilema com relação ao uso de imagens:

Se precisarmos de um formato de imagem com suporte a transparências, o formato GIF pode utilizado, mas como desvantagem, apresenta uma paleta de cores limitada a no máximo 256 cores;
Já o formato JPEG tem a vantagem de possuir suporte a milhões de tons de cores, mas ao salvar um arquivo, não é possível obter detalhes transparentes.

É nesse ponto que o formato PNG, ou Portable Network Graphics, vem de encontro a certas necessidades dos web designers.

Desenvolvido pela empresa Adobe e lançado em 1996 como uma opção para o formato GIF – em parte pelos já citados problemas envolvendo sua patente e estrutura de cores limitada – o formato de imagem tem suporte a transparências através do canal alfa (um recurso bem melhor que velha transparência do GIF). Ainda possui também uma alta gama de profundidade de cores e permite comprimir imagem sem perda de qualidade.

Arquivos em PNG: boa qualidade, profundidade de cores e recurso de transparência disponível

Existem 2 padrões de PNG:

PNG-8

O formato PNG‑8 utiliza cores de 8 bits, como o nome entrega. Portanto, suporta apenas 256 cores para o padrão RGB, a exemplo do GIF. Outra semelhança entre os dois formatos é que o PNG‑8 compacta a área de cores 'chapadas' (ou sólidas) ao mesmo tempo em que preserva detalhes nítidos, como nos desenhos que possuem linhas, como nos exemplos já citados no GIF, (logotipos e desenhos em geral).

A diferença se dá no ponto em que esse formato de imagem utiliza um sistema de compactação mais eficaz que o do GIF, chegando a alcançar níveis de 10 a 30% na redução de um arquivo em comparação com um GIF feito a partir de uma mesma imagem. Assim como o GIF, ele também é Lossless, ou seja, não apresenta perdas no arquivo final. Ideal para ícones (não é a toa que a web está cheia deles).

PNG-24

A exemplo do JPEG, o formato PNG 24 possui suporte para cores de 24 bits, ou seja, nada mais nada menos de 16 milhões de cores. Por isso, é altamente indicado para quando você precisar preservar variações na imagem como: brilho, contraste, saturação e matiz, entre outros atributos. Ele possui a capacidade de preservar detalhes de uma imagem de maneira bastante nítida, embora isso cause um tamanho final de arquivo ligeiramente maior. É um fator a levar em consideração quando você necessitar utilizar esse formato em uma página. Essa extensão também é Lossless, ou seja, sem perdas. Com isso, quando desejar criar uma imagem sem que aconteça algum tipo de decréscimo a sua qualidade, esse é o formato mais indicado.

Como nem tudo é perfeito, é obvio imaginar que um arquivo final em PNG-24 seja um pouco maior que o seu concorrente JPEG, certo? Em uma comparação direta feita com arquivos gerados a partir de uma mesma imagem, o JPEG consegue uma redução maior no tamanho final do arquivo com a mesma qualidade.

Conclusão

Agora que conhecemos os principais formatos de arquivos de imagem, podemos resumir sua utilização da seguinte forma:

Se você necessita de arquivos com um formato de imagem em que transparências não sejam necessárias e que possuam um alto grau de qualidade de cores, com um tamanho final bastante reduzido, você deve utilizar JPEG.
Se você necessita de arquivos com um formato de imagem em que transparências sejam necessárias e que não necessitem de uma grande quantidade de cores, com o tamanho do arquivo final bastante reduzido, você deve utilizar PNG-8.
Se você necessita de arquivos com um formato de imagem em que transparências sejam necessárias e que possuam um alto grau de qualidade de cores, sem grandes preocupações com o tamanho final do arquivo, você deve utilizar PNG-24.
Se você necessita de arquivos com um formato de imagem em que transparências sejam necessárias e que não necessitem de uma grande quantidade de cores, com o tamanho do arquivo final bastante reduzido e algum tipo de animação você deve utilizar GIF.

Espero ter contribuído para esclarecer suas dúvidas com relação a esse assunto. Em breve postarei uma segunda parte deste post sobre como otimizar as imagens para a web, com a máxima qualidade possível e de forma que tenham um carregamento rápido e correto. Fiquem ligados!

Um grande abraço e até a próxima semana!

Páginas

quinta-feira, 21 de agosto de 2014