High Resolution Website Image Formats

Todos já ouvimos o ditado: “uma imagem vale mais que mil palavras”, mas como você garante que está fazendo com que todas essas milhares de palavras valham a pena? Há uma maneira de fazer suas imagens valerem ainda mais? Escolher o formato ideal para uma imagem enviada para um determinado dispositivo em uma determinada condição de rede através de um navegador específico pode ajudá-lo a maximizar o impacto da sua imagem.

Vamos analisar as capacidades, características e compatibilidade para os formatos de imagem mais comuns utilizados nos websites atuais - GIF, JPEG, PNG. Também vamos fornecer a mesma informação para os formatos recentemente introduzidos (e específicos do navegador) - WebP, JPEG 2000 e JPEG XR. Finalmente, vamos analisar o BPG (Better Portable Graphics), um novo formato de imagem criado para substituir o JPEG.

GIF

O GIF (Graphics Interchange Format) é um formato de imagem bitmap que tem sido amplamente utilizado na Web devido ao seu amplo suporte e portabilidade.

O formato suporta até 8 bits por pixel para cada imagem, permitindo que uma única imagem faça referência a até 256 cores diferentes. Ele também suporta animação (permite uma paleta separada de até 256 cores para cada frame) e transparência de 1 bit.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
Sim
Sim
Sim    
Sim
Sim
Sim

JPEG

O JPEG (Joint Photographic Experts Group) é um arquivo gráfico com perdas. As imagens JPEG têm múltiplas extensões de arquivo, incluindo .jpg, .jpe, .jif, .jfif, e .jfi. Os arquivos JPG têm 2 subformatos, JPG/Exif (câmeras digitais e equipamentos fotográficos) e JPG/JFIF (Web).

O JPEG suporta até 16,8 milhões de cores diferentes. O JPEG não suporta animação ou transparência.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
Sim
Sim
Sim    
Sim
Sim
Sim

PNG

Os arquivos PNG (Portable Network Graphics) são um formato sem perdas, o que significa que a compressão não afeta a qualidade da imagem. O PNG foi criado como um substituto de código aberto melhorado para o GIF, e é o formato de compactação de imagem sem perdas mais utilizado na Internet.

PNG-8 suporta 256 cores e 1-bit de transparência, e PNG-24 suporta 24-bits e 16,8 milhões de cores. PNG suporta transparência escalável (de opaco a completamente transparente) via canal alfa.

A animação é suportada através da extensão APNG (Animated Portable Network Graphics). Ele permite arquivos PNG animados que funcionam de forma semelhante aos arquivos GIF animados, enquanto suporta imagens de 24 bits e 8 bits de transparência não disponíveis para GIFs. Ele também mantém compatibilidade retroativa com arquivos PNG não animados. Até o momento, o APNG não pegou, e portanto não recebeu suporte da maioria dos principais navegadores.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
Básico Sim
Sim
Sim    
Sim
>=7
Sim
Animado Não
Sim
Sim    
Sim
Não
Não

WebP

WebP é um formato de imagem moderno, desenvolvido pela Google, que emprega tanto a compactação com e sem perdas. Este formato aberto tornou-se amplamente disponível em 2010, para fornecer um novo padrão de compressão com perdas para gráficos da Web. Assim como o JPEG, ele poderia produzir gráficos de cores reais dentro de pacotes menores, mantendo uma qualidade de imagem similar.

O WebP suporta 24 bits e 16,8 milhões de cores. Ele também suporta animação, perfis ICC, metadados XMP e transparências via canal alfa.

Além do formato de arquivo simples/básico, o WebP também suporta formatos estendidos e animados. O recipiente estendido fornece metadados avançados, incluindo perfil de cor, controle de animação, EXIF e XMP. O formato de imagem animada inclui vários quadros, juntamente com os parâmetros ANIM (parâmetros globais de animação) e ANIMF (informações de um único quadro).

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
Básico >=9
>=29
Não  
Não
Não
>=11,5
Animado >=32
Não
Não   
Não
Não
>=20
Estendido >=23
>=29
Não   
Não
Não
>=12,1

JPEG 2000

O JPEG 2000 (JP2) é um sistema de compactação de imagem padrão e codificação sem perdas e com perdas. Foi criado pelo comitê do Joint Photographic Experts Group em 2000 com a intenção de substituir o padrão JPEG. Enquanto o JP2 pode suportar qualquer profundidade de bits de cor, a maioria das implementações utiliza cores de 24 bits.

JP2 (baseado em wavelet) não é retrocompatível com JPEG (baseado em cosseno discreto). JP suporta transparência, mas não animação.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
Não
Sim
Não
>=5
Não
Não

JPEG XR

JPEG XR (eXtended Range) é um padrão de compactação com e sem perdas e formato de arquivo para imagens fotográficas em tom contínuo, baseado em tecnologia originalmente desenvolvida e patenteada pela Microsoft sob o nome de HD Photo. O JPEG XR suporta até 32 bits de profundidade de cor, juntamente com a transparência através de um canal alfa. O JPEG XR não suporta animação.

Chrome
Chrome (iOS)
Firefox    
Safari
IE/Edge
Opera
Não
Não Não     Não
>=10
Não

BPG

BPG (Better Portable Graphics) é um novo formato de imagem, cujo objetivo é substituir o formato de imagem JPEG quando a qualidade ou o tamanho do arquivo é um problema. Ele apresenta uma alta taxa de compactação. Os arquivos são muito menores que os JPEG para qualidade semelhante. O BPG suporta compactação com e sem perdas, juntamente com transparência (via canal alfa), animação e metadados incorporados (perfis de cores, metadados XMP e EXIF). O BPG suporta 14 bits por canal de cor (versus 8 bits por canal para JPEG).

No momento, não há suporte nativo a navegadores para BPG. A exibição de imagens BPG requer uma biblioteca JavaScript de 56 KB (após a compactação).

Resumo

A tabela a seguir resume e fornece detalhes adicionais sobre os recursos e as características de cada um dos formatos de imagem discutidos.

GIF
JPEG PNG: Básico PNG: Animado
JPEG 2000
JPEG XR
WebP: Básico WebP: Estendido WebP: Animado
Cor indexada
Sim
Não
Sim
Sim
Não
Não Não Não Não  
Quatro cores
Não
Sim
Sim   Sim Sim Sim Sim
Sim Sim  
Transparência binária
Sim
Não
Sim   Sim Não
Não Não Não Não  
Transparência total
Não 
Não 
Sim   Sim
Não
Não Sim
Não
Não  
Subamostra de croma
Não
Sim
Não   Não  Sim 
Sim 4:2:0 4:2:0 4:2:0  
Carregamento progressivo
Sim
Sim
Sim   Sim
Sim
Sim Não
Não
Não  
Animação Sim
Não
Não  
Sim
Não Não Não
Não
Sim  
Compactação com perdas
Sim
Sim
Sim   Sim
Sim
Sim Sim
Sim
Sim  
Compactação sem perdas
Não
Não
Sim   Sim
Sim
Sim Não
Sim Sim  
Economia de bytes
Ruim
OK
Ruim  
OK
Bom
Bom Bom
Bom
Bom  

Saiba mais sobre como gerenciar os formatos de imagem on-line mais populares com o AkamaiImage & Video Manager.