FORMATO DE IMAGEM

.PNG
Apresentação de:
Alexandre Lemke
Augusto Schmidt
Carlos Drumm
Jul/2014
 Sumário
• Definições
• Histórico
• Aspectos Técnicos
• Compressão
• Utilização
• Comparações
• Referências
 Definições
• Imagem: termo que provem do latim ‘imāgo’ e que se refere
à figura, representação, semelhança ou aparência de algo ou
alguém.

• Pixel: aglutinação de Picture e Element (elemento de

imagem), é o menor elemento num dispositivo de exibição ao
qual é possível atribuir-se uma cor no sistema RGB.

• Paleta: subconjunto determinado da gama total de cores

suportadas pelo sistema gráfico de um computador. Para cada
cor da paleta se designa um número, e em cada pixel é
armazenado um destes números.
 Definições
• Canal Alfa: O canal alfa define a opacidade de um pixel numa
imagem e pode ser visto como a quarta variante na definição
da cor.
• Cor: A cor é uma percepção visual provocada pela ação de um
feixe de fotons sobre células especializadas da retina, que
transmitem através de informação pré-processada no nervo
óptico.
• RGB: abreviatura do sistema de cores aditivas formado por
Vermelho (Red), Verde (Green) e Azul (Blue). O propósito
principal do sistema RGB é a reprodução de cores em
dispositivos eletrônicos como monitores.
 Definições
• Visão Humana
 Definições
• Profundidade de Cores
 Definições
• Entrelaçamento de Imagens
• Método de Exibição onde faixas intercaladas da imagem são
mostradas antes das outras no intuito de otimizar a
velocidade em que a imagem é percebida.
 Definições
• Resolução de Imagens
 Definições
• Tipos de Imagens

Vetoriais Bitmap
 Histórico
– O PNG (pronuncia-se “ping”) foi proposto
primeiramente na lista de discussão
comp.graphics da Usenet, após o anúncio, pelas
empresas Unisys e CompuServe, de que o
algoritmo de compressão do formato GIF havia
sido patenteado, e que seus utilizadores
(desenvolvedores, não consumidores finais)
deveriam pagar royalties para seu uso.
 Histórico
• O formato foi inicialmente proposto por Thomas Boutell. Em
pouco tempo, grandes nomes da área de TI e de imagens se
juntaram ao projeto, como Adam Costello (responsável pelo
algoritmo de entrelaçamento), Greg Roelofs (responsável
pela ideia do CRC e mantenedor do projeto na internet), Lee
Daniel Crocker (programador presente também na criação
do GIF e do JPEG), entre outros.
• O nome original seria Portable Bitmap Format. A sugestão de
PING como sigla para “PNG Is Not GIF”, com extensão .PNG,
foi mantida em parte no projeto, mas com a alteração do
significado para Portable Network Graphics.
 Aspectos Técnicos
Estrutura do Arquivo .PNG:
• Um arquivo PNG é constituído por:
– Uma Assinatura ou Cabeçalho (8 bytes);
• Em notação hexadecimal é: [89 50 4E 47 0D 0A 1A 0A]

– Um conjunto de elementos chamados Chunks

(pedaços) ou “Segmentos”:
• Dizem respeito as varias partes do arquivo que contem
diversas informações;
 Aspectos Técnicos
Estrutura do Cabeçalho:
• Bit Inicial: (89, em hexadecimal): Bit de valor alto,
define que o arquivo não deve ser lido em
codificações de texto, como ASCII;
• Nomeação (50, 4E e 47): São os valores em HEX para
as letras PNG;
• Quebras de linha (0D0A e 0A): São usadas para
detectar o sistema no qual o arquivo está sendo
aberto;
• Fim de Arquivo (1A0A) (“End-of-File”): Dá início à
seção dos segmentos.
 Aspectos Técnicos
Estrutura dos Segmentos:
• Cada segmento (Chunk) é composto por 4 partes:
– a Dimensão, um número inteiro (sem sinal) de 4 bytes,
descrevendo a dimensão do Segmento;
– o Tipo de Segmento (Chunk Type): um código de 4
caracteres (4 bytes) compostos por caracteres ASCII
alfanuméricos que permitem qualificar a natureza do
segmento;
– Os Dados do segmento (Chunk Data);
– O CRC (Cyclic Redundancy Check), um código corretor de 4
bytes que permitem verificar a integridade do segmento;
 Aspectos Técnicos
Estrutura dos Segmentos:
• São divididos em dois tipos: 1º
– Segmentos Críticos (Obrigatórios - Critical Chunks);
• IHDR - Image Header (Cabeçalho da imagem);
• PLTE - Palette (Paleta de cores usadas na imagem): obrigatório
somente para imagens com cores indexadas;
• IDAT - Image Data (Chunks de dados da imagem): contém os
dados da imagem em si - pode ser dividido em vários
segmentos;
• IEND - Image Trailer (Indicador de fim de dados): o fim do
arquivo;
 Aspectos Técnicos
Estrutura dos Segmentos:
• São divididos em dois tipos: 2º
– Segmentos Auxiliares (Opcionais - Anciliary Chunks): contém
parâmetros, que vão da cor de fundo à data da última modificação do
arquivo, passando por segmentos que definem a transparência, e
outros:
• bKGD - Background Color;
• cHRM - Primary Chromaticities and White Point;
• gAMA - Image Gamma;
• hIST - Image Histogram;
• pHYs - Physical Pixel Dimensions
• sBIT - Significant Bits
• tEXt - Textual Data
• tIME - Image Last-Modification Time
• tRNS - Transparency
• zTXt - Compressed Textual Data
 Aspectos Técnicos
Estrutura dos Segmentos:
• Podem estar em qualquer ordem, desde que o
primeiro segmento seja “IHDR”, e o último seja
“IEND”;
 Aspectos Técnicos
Profundidade de Cor:
• Existem 5 níveis:
– Cores Indexadas (paleta, até 8 bits);
– Escala de Cinza (16 bits);
– Escala de Cinza com Canal Alfa (com
transparência, 24 bits);
– True-Color (24 bits);
– True-Color com Canal Alfa (32 bits);
 Aspectos Técnicos
Profundidade de Cor:
• Alguns computadores e monitores podem
trabalhar com um modo especial de 16 bits
por canal + 16 bits de transparência, criando
PNGs de 64 bits.
 Aspectos Técnicos
• Opções de Cores:
 Aspectos Técnicos
Transparência:
• O PNG possui um canal dedicado para transparência, com
até 8 bits (diferentemente do GIF, onde apenas um nível de
transparência era possível, sacrificando-se uma cor da
paleta);
• Possibilita anti-aliasing com fundos de qualquer cor, não
possuindo o problema de “efeito fantasma” criado por
transparências no GIF;
• Pode ser usado também no modo de cores indexadas,
onde uma cor com transparência ocupa um espaço na
paleta.
 Aspectos Técnicos
• Transparência:
• 1) 24 bit PNG com transparência
alfa.
• 2) 8 bit PNG com transparência
binária.
• 3) Exemplo nas versões do IE
anteriores ao IE 7.
• 4) 8 bit GIF com transparência
binária.
 Aspectos Técnicos
Compressão:
• Usa um método Lossless (sem perdas) chamado
DEFLATE;
• O método DEFLATE foi criado, originalmente, para
arquivos ZIP. Seu autor colaborou diretamente na
criação do PNG, e é citado como co-autor do formato;
• O método DEFLATE mistura os métodos LZ77 e
Huffman para criar uma compressão sem perdas;
• Essa característica faz do PNG um método sem perda
geracional de qualidade, ao contrário do JPEG.
 Compressão PNG
• Reconstrução sem perda de dados;
– Compressão: Método DEFLATE;
– Descompressão: Método INFLATE.
 Compressão PNG - Deflate
• Deflate
- LZ77: percorre a imagem, trocando cadeias
repetidas por referências
- Codificação Huffman: substitui símbolos mais
usados por representações menores, e
símbolos menos usados por representações
maiores
- Tabelas Hash – armazenar posição dos padrões
reconhecidos
 Algoritmo de Compressão PNG
• Divide a imagem em blocos (sequência de bits)
• Para cada Bloco
– Aplica LZ: procura sequências repetidas
– substituindo-as por ponteiros (D,C)
– Usa codificação Huffman para sequências
maiores ou iguais a 1 byte (Comprimento)
– Monta a tabela hash (Distâncias)
 Compressão PNG - Deflate
• Deflate (LZ77)
- O arquivo é dividido em blocos de tamanho arbitrário
(necessidade nova árvore huffman)

- O codificador PNG pode definir o tamanho da janela em

potência de 2 (Janela móvel de no máximo 32 Kbytes -
registro dos últimos 32768 bytes)
- Encontra strings que são repetidas.
 Compressão PNG - Deflate
• Deflate (LZ77)
• Uma linha de pixels é uma sequência de bytes.
• Cada sequência de bytes é comprimida pelo método
de compressão LZ
• A seqüência de caracteres repetida é substituída por
dois números:
(distância, comprimento).
• Exemplo P(D=5,C=3)
 Compressão PNG - Deflate
• Codificação Huffman:
dados compactados são
0 1
armazenados como blocos,
representando dados
originais
0 1 0 1
(dados LZ77-compactados)
 Compressão PNG - Deflate
• Deflate (Hash)
- Codificar as distancias entre as cadeias e a posição
atual
 Descompressão PNG - Inflate
• Para cada bloco:
- Monta uma tabela consultando a codificação
huffman:
Segmento A: 00
Segmento B: 01
Segmento C: 10
Segmento D: 11
 Descompressão PNG - Inflate
• Para cada bloco:
- Consulta a tabela hash com as distâncias e reconstrói
o bloco
• 00: 0,5,9
• 01: 3,13,
• 10: 4,12,15
• 11: 8,14
 Compressão PNG
• Uma grande vantagem em relação ao GIF
• Consegue melhores taxas de compressão (entre 5% e
25%)
• Utiliza Compressão Assimétrica:
• Demora mais tempo para comprimir do que para
descomprimir, o que faz com que o PNG seja um formato
indicado para a Internet.
• O DEFLATE não garante encontrar a melhor
sequencia, mas sim uma sequencia razoavelmente
longa.
 Aspectos Técnicos
Entrelaçamento:
• Utiliza o algoritmo Adam7, de 7 passos;
• Permite ao usuário identificar traços-chave da
imagem antes que a mesma seja completamente
carregada;
• O entrelaçamento é opcional no PNG. Todavia, seu
método é superior ao método padrão de
entrelaçamento do GIF.
 Aspectos Técnicos
Entrelaçamento:
 Aspectos Técnicos
Animação e Variações do Formato:
• O PNG não suporta animações. Todavia, os
formatos MNG (oficial) e APNG (não oficial,
desenvolvido pela Mozilla) são alternativas;
• O formato JNG é uma mescla de JPEG com
PNG, possibilitando compressão a nível de JPG
com uma camada de transparência;
• Nenhum dos 3 formatos tem ampla aceitação
ou uso.
 PNG - Resumo
• Formato de arquivo de imagens do tipo bitmap
(mapa de bits), similar ao GIF, JPEG e BMP;
• Proposto em 1995/6 como alternativa livre em
substituição ao formato GIF recém-patenteado;
• Pretendia melhorar alguns aspectos do GIF, como
sua limitação a 256 cores, entre outras coisas;
• Utiliza compressão sem perdas;
• Suporte a entrelaçamento;
• É suportado pela maioria dos navegadores e editores
de imagem
 PNG - Resumo
• Permite profundidade de cor de até 64 bits;
– Escala de Cinza de até 16 bits/pixel.
– TrueColor de até 48 bits/pixel.
– Camada alfa com até 256 níveis de transparência
(8 bits).
• Formato de imagens estático, ou seja, Não
suporta animação;
• Não suporta esquema de cores CMYK.
 Principais Usos
• Transferência de imagens pela internet,
favorecida pelo algoritmo de entrelaçamento
Adam7.
– Este algoritmo permite que uma pessoa que
recebeu parcialmente uma imagem possa ver uma
cópia degradada da imagem original.
• Imagens com paletas bem pequenas, por ter
suporte a paletas com até 2 cores.
 Principais Usos
• Imagens com transparência variada,
favorecidas pela transparência em canal alfa,
que permite até 256 níveis diferentes de
transparência.
 Usos Desaconselhados
• Animação: seu formato de animação (.MNG),
ao contrário do GIF, não é suportado por
todos os browsers.

• Fotos e Imagens com Muitas Cores:

apresentam um tamanho muito grande no
formato PNG. O JPEG é mais aconselhável.
Comparação com outros Formatos
Nº Máximo de Perda
Formato Compressão Transparência
Cores Informação

GIF 256 cores (8 bits) Sim Não 1 Nível

16 milhões (24
PNG Sim Não 256 Níveis
bits)
Comparação com outros Formatos
GIF:
• Tamanho de arquivo: geralmente o PNG, nas mesmas configurações do
GIF, gera arquivos menores para a mesma imagens, porém, há exceções;
• Transparência: ambos os formatos suportam transparência, mas de
apenas um nível no GIF, e de 8 bits (256 níveis) no PNG;
• Profundidade de cor: O GIF está restrito a 8 bits, contra até 64 no PNG;
• Entrelaçamento: o tempo total para carregar uma mesma imagem é
semelhante, mas o método do PNG permite discernir a imagem mais
rapidamente;
• Animação: suportada no PNG somente através dos formatos MNG e
APNG, nativa no GIF;
• Compatibilidade: navegadores mais antigos não suportam
completamente o PNG.
Comparação com outros Formatos
JPEG:
• Compressão: sem perdas no PNG, perda geracional no JPEG;
• Transparência: suporte a alfa inexistente no JPEG (apenas com
JNG);
• Tamanho de arquivo: a compressão do JPEG garante arquivos
até 10 vezes menores. Para trabalhos profissionais, usa-se RAW
ou TIFF, e somente depois do trabalho pronto salva-se em JPEG
(a perda de qualidade com apenas uma compressão não é
significativa);
• Tags EXIF: O PNG não tem suporte a armazenamento EXIF,
presente no JPEG.
 Comparação com outros Formatos

• PNG suporte de três tipos de cor: greyscale, truecolor e pallete-based.

• GIF suporta apenas pallet-based.
• JPEG suporta truecolor e greyscale.

• PNG e JPEG apresentam maior precisão de cor relativamente ao GIF.

• Imagens pallet-based usam menor largura de banda comparativamente a imagens
truecolor.

• PNG fornece maior flexibilidade de implementação relativamente ao GIF.

• JPEG necessita de maior tempo de computação.
• PNG é pouco divulgado e suportado.
• GIF é o único formato dos três a suportar animação.
JPEG – 59 kb GIF – 61 kb PNG – 135 kb
• JPEG perde qualidade do formato entre alterações ao ficheiro.
Comparação com outros Formatos
• Apresenta maior tamanho de arquivo, porém
maior qualidade que JPEG, principalmente em
imagens com texto.
 Referências
• www.w3.org/Graphics/PNG/
• www.w3.org/TR/PNG/
• www.libpng.org/pub/png/
• www.libpng.org
• www.zlib.net/feldspar.html
• www.ime.usp.br/~fli/gzip.html
• en.wikipedia.org/wiki/Portable_Network_Graphics
• pt.kioskea.net/contents/video/format-png.php3
• pt.wikipedia.org/wiki/DEFLATE
• w3.uniroma1.it/cogfil/attribuzioni.html
• libmng.com/pub/png/pngbook.html