Dicas

Diferenças básicas entre os principais formatos de imagem

Anúncios Google

As imagens com que trabalhamos diariamente em meios digitais apresentam-se numa grande variedade de formatos de arquivo. Você já deve ter se deparado com extensões como JPEG, GIF, BMP, entre muitas outras, mas sabe qual a diferença entre elas e as características de imagens nesses formatos? Por que o GIF, por exemplo, pode ser animado, ou um JPG não tem transparência como o PNG? Qual a diferença entre JPG de alta qualidade e bitmap, já que quase não se nota vendo a imagem?

Vamos ver aqui os mais conhecidos e usados em nosso cotidiano, junto com o formato de arquivo do Photoshop (PSD). Aproveitando o “embalo”, veremos também o WebP, formato desenvolvido pelo Google com a dura missão de ser um “substituto” para os populares JPG e PNG.

Bitmap

Extensão .bmp, é um formato para imagens em mapas de bit. É como uma tela quadriculada, em que cada quadrado (pixel) tem uma cor, formando uma imagem maior. Quanto maior a qualidade da imagem, menor a chance de vermos esses pontos, que são cada vez menores.

Não tem compactação, portanto os arquivos de imagens em bitmap são bem maiores que em outros formatos. Uma mesma imagem em bitmap e jpg, pode ter vários megabytes no primeiro, e alguns kilobytes no segundo.

Imagem em bitmap

Assim quanto mais “quadradinhos” tiver a grade (maior a resolução), melhor será a qualidade da imagem, consequentemente maior será o tamanho de arquivo. Não é um indicado para uso na internet, onde isso faz grande diferença no tráfego de dados e velocidade de carregamento.

Para essa e outras finalidades surgiram os formatos compactados.

JPG ou JPEG

Da sigla Joint Photographic Experts Group, pode ser usado tanto com a extensão .jpg ou .jpeg. É um formato de compactação, ou seja, as informações originais sobre como a imagem deve ser gerada na tela é compactado, e descompactado quando o arquivo é lido, gerando arquivos menores. Câmeras digitais, navegadores, leitores de DVD, entre uma infinidade de equipamentos e softwares, aceitam o formato.

No JPG, a imagem é formada por blocos bem maiores que os pixels do bitmap. Quanto maior a resolução do arquivo, mais blocos tem. Assim, se a imagem for salva em uma qualidade não tão alta, será possível ver esses blocos, o que não é desejável na maioria dos casos.

Jpg de baixa e alta qualidade
Jpg de baixa e alta qualidade: note como blocos ficam visíveis quando a qualidade é reduzida. Por outro lado, o arquivo da segunda imagem será muito menor em bytes.

Deve ser usada como método de armazenamento de fotografias e imagens (não para impressão) em geral, sempre lembrando que dados perdidos na compactação não podem ser recuperados (ou seja, se ficou com qualidade baixa após salvar, não tem volta).

Além disso, imagens que precisem de alta resolução, como ícones, devem usar outros formatos com melhores contrastes e degradês sem artefato, como TIFF e PNG.

GIF

Sigla de Graphics Interchange Format, criado pela Compuserve em 1987 e desde então vastamente usado na rede, sendo capaz de exibir transparência e animações. Muito popular no começo da internet, foi perdendo espaço para outros formatos, como o próprio JPG e o PNG – este com tem transparências muito melhores, mais suaves, e com muito mais cores.

Animação em gif. Fonte: Wikipedia
Exemplo de animação em gif. Fonte: Wikipedia

Com um máximo de 256 cores (cores 8-bit), fotografias ou desenhos mais complexos sofrem perdas sensíveis – você já deve ter visto imagens originalmente bem coloridas e cheias de degradê, que ficam cheias de “pontilhados” depois de salvas como gif. Essa limitação torna o formato praticamente inútil para impressões, mas aproveitável para a internet, pelo seu tamanho reduzido.

Outro problema é a forma como a transparência é gerada – substituindo uma cor. É como se a região transparente fosse trocada por uma cor, e todos os pixels com essa cor serão transparentes. Mas como não suporta transparência em mais de uma, se a borda da imagem tiver degradês (normalmente tem no efeito de suavização de borda), surge aquele horrível efeito serrilhado.

Continua sendo uma opção interessante para coisas mais simples, como logos e ícones com poucos detalhes ou resolução não tão alta. Sua principal utilidade na internet, sem dúvidas, é a capacidade de gerar animações através do armazenamento de múltiplas camadas e dados para interpretá-las (qual exibir, por quanto tempo, com ou sem looping, etc).

PNG

Sigla de Portable Network Graphics, desenvolvido a partir de 1995 para atender às necessidade de compartilhamento de imagem pela internet, sem as limitações do GIF, mas usando o mesmo tipo de compactação (LZW). Com melhor qualidade, seus arquivos são geralmente ligeiramente menores que o GIF (até cerca de 10%), e muito raramente maiores (até 5%). Dependendo da imagem, o arquivo pode ser um pouco maior ou menor também que o JPG.

Tal como o GIF, pode exibir transparência, mas com qualidade muito superior; não é compatível com animações. Ao contrário do outro, não se limita apenas às cores 8-bit, podendo usar até truecolor, com transições suaves e transparências sem bordas serrilhadas. Geralmente é superior também à qualidade do JPG – se quer uma imagem com ótima resolução e não se importa com o tamanho maior do arquivo, vá de PNG.

Imagem em formato PNG com transparência
Imagem em formato PNG com transparência

Embora tenha compatibilidade total com navegadores atuais, versões antigas como o Internet Explorer 6 apresentam suporte limitado (não suporta as transparências. aparece uma cor sólida no lugar). Praticamente todos os softwares gráficos modernos têm suporte integral a PNG.

TIFF

Sigla de Tagged Image File Format, foi criado pela Aldus Corp. e mais tarde adquirida pela Adobe, inicialmente com intuito de padronizar o formato de arquivo para scanners, evitando que cada marca tivesse que usar um formato proprietário.

Um arquivo TIFF pode conter vários tipos de imagem, como compactadas, vetoriais, lossless (compactação sem perdas), entre outras. É portanto um formato de armazenamento, que mantém informações (tags) de cabeçalho sobre o conteúdo, que pode ser comprimido ou sem compressão.

Ao contrário do que alguns pensam, não é igual ao bitmap. O TIFF é bem mais versátil, podendo ainda salvar camadas e ter diferentes tipos de compactação, enquanto o bitmap suporta apenas a compactação RLE.

PSD

O arquivo PSD é o formato do Photoshop, que armazena informações diversas, incluindo camadas, perfis de cores, canais, entre outros. Sendo um software basicamente de edição bitmap, alguns podem imaginar que todo seu conteúdo é assim, mas na verdade ele pode conter dados vetoriais como Objetos Inteligentes (Smart Objects) e Formas Vetoriais (Vector Shapes), entre muitas outras informações.

Os arquivos do Photoshop tem relativa compatibilidade através de importação em outros softwares, como Illustrator e Corel Draw, mas não podem ser vistos no navegador, nem com miniaturas no sistema operacional (exceto com ocasionais plugins).

SVG

De Scalable Vector Graphics, está em desenvolvimento desde 1999, e define as características da imagem através de marcações XML. Assim, uma imagem poderia ser feita em um editor de texto como o Bloco de Notas, contendo todas as instruções para que o software, como um navegador, “siga as instruções” para desenhar. Claro que seria bem complicado, sendo mais indicado o uso de um software para a criação.

Todos os navegadores modernos tem algum nível de compatibilidade com o SVG, incluindo o Internet Explorer. Navegadores de dispositivos móveis também são compatíveis – ele é usado, por exemplo, na substituição de fontes embutidas no design. Suporta transições suaves, preenchimentos, contornos, textos, e pode ser redimensionado sem perdas, o que o torna excelente para imagens vetoriais.

Sua importância tem crescido nos últimos tempos, já que o SVG também tem suporte à criação de animações, ícones em alta resolução, etc. Experimente: tente desenhar alguma coisa e depois confira o código: o conceito é o mesmo das marcações de HTML.

WebP

Formato desenvolvido pelo Google, promete ser um padrão para a internet, com qualidade comparável ao JPEG, mas tamanhos reduzidos, além de suporte à animação, transparência, metadados XMP e perfis ICC. Suporta transparência tanto no modo sem perdas como no compactado. Os navegadores Chrome e Opera tem compatibilidade, mas em softwares como o Photoshop CS5 (e anteriores), só com uso de plugin.

Compare as imagem nos formatos WebP e PNG. Se seu navegador não tiver suporte ao WebP, não verá a primeira imagem.

Webp com transparência
Webp com transparência
PNG com transparência
PNG com transparência

O que acha? Me parece que há uma quase imperceptível perda de qualidade na imagem em WebP, mas a diferença de tamanho entre elas é enorme: 215 KB do PNG, contra apenas 55 KB no WebP! Veja mais comparações entre JPEG, PNG e WebP aqui. Ou baixe o plugin para o Photoshop aqui (não salva o canal alpha, de transparências).

Segundo os desenvolvedores, no formato WebP os arquivos são 28% menores que PNG, e de 25 a 34% menores que JPEG. Se quiser criar as suas próprias, pode tentar usar este conversor online.

 

Imagens: Dominique ToussaintWikimedia CommonsDZUM.

Author

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Write A Comment

Pin