Quando Utilizar JPEGs, BMPs, GIFs, PNGs?

Bem sei que vivemos numa época em que as ligações "de banda larga" à internet são mais comuns que nunca; mas mesmo assim não posso deixar de achar completamente ridículo que se continuem a encontrar autênticas obscenidades técnicas na escolha completamente errada dos formatos mais adequados para as imagens que vemos nas páginas web.

Já nem falo dos casos em que, num local onde se pode ver apenas uma pequena imagem de 100x100 pixeis, alguma mente brilhante tenha achado por bem utilizar uma imagem "original" de 4000x3000 pixeis, ocupando vários Megabytes, que depois o browser tem que reduzir para o tamanho pretendido - em vez de ser disponibilizado uma imagem à medida, com poucos KB, que tornaria tudo mais eficiente. Isto é outro problema (mental, talvez?)... mas hoje vou falar apenas sobre a questão das escolhas dos formatos apropriados para cada tipo de imagem.




A internet está repleta de imagens; de todos os tipos: fotografias, diagramas, capturas de ecrã, imagens animadas, com ou sem transparência, etc. etc.

E o que interessa saber é que há diferentes formatos, que se adequam de melhor ou pior forma a cada uma dessas imagens.

Certamente já se terão deparado com os famosos "JPEGs" e "BMPs", os "GIFs", e até os "PNGs" (para além de outros formatos como os TIFF, e outros).

Comecemos pelo aspecto mais básico: a representação de uma imagem em formato digital.


Imagens Digitais

No mínimo dos mínimos, para representar uma imagem digital, será necessário guardar a cor de cada pixel da imagem. Ou seja, para uma imagem de um único pixel, que fosse preto ou branco, necessitaríamos de um único bit.

E isso poderá servir de indício para um nome que vos será familiar: o "bitmap".

Na verdade as imagens digitais não passam de um "mapa de bits", representando uma imagem.

Claro que com um único bit, estamos limitados a imagens puramente monocromáticas: com pixeis pretos e brancos; mas isso é algo que se pode resolver facilmente, aumentando a quantidade de informação que guardamos por pixel. Se em vez de 1 bit, guardarmos 1 byte (8 bits), passamos a poder ter 256 cores por cada pixel; e se guardarmos 3 bytes (mais conhecidos como "24 bits"), então a gama de cores sobe para as 16,777,216 possibilidades - neste caso já suficientes para o que se considera uma "representação de cores reais".


A Compressão

Até aqui tudo bem, mas... sabendo-se que uma imagem de 1x1 pixel não nos servirá de muito, depressa se compreende porque motivo este sistema de representação de imagens digitais tem os seus inconvenientes.

Com 3 bytes guardados por pixel, uma imagem de 1280x720 pixeis ocuparia mais de 2.6MB, e no caso de um único frame FullHD (1920x1080) ocuparia quase 6MB! (Isto em vídeo representaria mais de 10GB para um minuto de gravacao!)

Ou seja... não é algo muito prático para se gerir, ou tão pouco servir para uma distribuição eficiente via internet, onde cada byte extra representa tempo e custo acrescido.

A solução passa então pela compressão das imagens.

Qual o sentido de estar a desperdiçar Megabytes a dizer que uma imagem de 1920x1080 tem a totalidade dos seus pixeis a preto, quando se poderia simplesmente dizer: "Está tudo a preto!" em pouco bytes?

E aqui entramos em duas áreas distintas, pois existem dois tipos de compressão: a lossless (sem perda de informação) e a lossy (com perda de informação).

Os nomes são auto-explicativos: a compressão sem perda de informação garante que a qualidade da imagem permanece intocada e que a imagem comprimida pode ser descomprimida de forma a que represente exactamente a imagem original. A outra, tenta fazer o melhor possível, mas não garante que a imagem resultante seja exactamente pixel-por-pixel igual à original.

Qual o interesse de uma compressão que perde informação? Obviamente, a maior taxa de compressão, resultando em ficheiros mais pequenos - um pouco à semelhança do que acontece com os ficheiros MP3 na música, onde mesmo perdendo alguma qualidade sonora, os benefícios dos tamanhos reduzidos compensam a quase inaudível perda de qualidade. (Claro que, depende da taxa de compressão: se se exagerar, começam a notar-se os efeitos.)


Os JPEGs, BMPs, GIFs, e PNGs

Para o nosso exemplo de uma imagem a preto, vemos que há diferenças substanciais quanto à escolha do formato de imagem: dos 88KB da imagem gravada em BMP, a meros 946 bytes do formato PNG.

Quererá então isto dizer que o formato PNG é o nosso vencedor?...

Nem por isso. Vamos ver que tal se comportam no caso de uma fotografia:

Aqui já se começam a notar umas coisas interessantes...

Podemos ver que o tamanho da imagem no formato BMP não se alterou - pois se estamos a guardar a informação de todo e cada pixel... é irrelevante qual a cor que contém. Já o JPEG e o GIF aumentaram de tamanho para os 10 e 14KB... e o nosso "vencedor" anterior torna-se agora o grande derrotado, ocupando 69KB!

Desta vez, o vencedor é o JPG. E se pensam que o GIF lhe chega perto... convém revelar qual o real resultado desta imagem em formato GIF:

É que o GIF é um formato antigo, e apenas capaz de guardar imagens com um máximo de 256 cores; o que faz com que não seja adequado para fotografias, provocando um efeito de "dithering" que se pode ver na imagem, tentando simular as cores não existentes através de padrões com as cores existentes. É esse um dos motivos pelos quais tem caído em desuso (a par de questões de direitos de utilização), e que só vai permanecendo em uso por ser um formato que permite a criação de imagens animadas.


Mas, que tal se comportam estes formatos noutros tipos de imagem?

Para diagramas e coisas semelhantes, uma vez mais verificamos a "consistência" do BMP, com o seu tamanho "gigante" completamente indiferente ao conteúdo, um JPG que gasta quase o mesmo que para uma "foto", um GIF poupadinho... e um PNG que volta a ser o mais eficiente.


Conclusões

Há muitas outras variáveis que aqui não consideramos: as diferentes taxas de compressão dos JPEGs, que vão do imperceptível ao inutilizável (e até alguns que são "lossless"); os diferentes tipos de BMP, alguns deles que incluem compressão; os formatos que suportam ou não transparência; etc. etc.


Mas por norma, as vossão opções deverão recair sobre dois formatos de imagem: JPEG para as fotografias; PNGs para diagramas e/ou imagens que tenham que ser "exactas".

Por outro lado, há novos formatos, como o WebP do Google, que prometem ser ainda mais eficientes; e que até suportam compressões diferenciadas para as imagens e para a transparência. (Mas que infelizmente necessitam ainda de se implementar de forma mais abrangente para que se possam utilizar "fora da web").