Formatos de Imagens - profª msc. elizabete munzlinger

Introdução
à
Tecnologia
Web
HTML
­
HyperText
Markup
Language
XHTML
–
eXtensible
HyperText
Markup
Language
Formatos
de
Imagens
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
Formatos
de
Imagens
Índice
1 – FORMATOS DE IMAGEM......................................................................................... 2
1.1 – Imagem Bitmap ........................................................................................... 2
1.2 – Imagem Vetorial .......................................................................................... 2
1.3 – Alguns formatos de imagens: ........................................................................ 2
GIF: (Graphics Interchange Format) ................................................................. 2
JPG/JPEG: (Joint Photographic Experts Group) .................................................. 3
PNG: (Portable Network Graphics) .................................................................... 4
APNG: (Animated Portable Network Graphics) ................................................... 4
MNG: (Multiple-image Network Graphics) .......................................................... 5
BMP: (Bitmap)................................................................................................. 5
1.4 – Tamanho da imagem.................................................................................... 5
Referências Bibliográficas............................................................................................. 6
1
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
1
–
FORMATOS
DE
IMAGEM
Existem atualmente diversos formatos de imagens e são classificados em Bitmap e Vetorial.
1.1
–
Imagem
Bitmap
A imagem é dividida nos pontos de uma matriz. Cada ponto é gravado com seu valor particular
de luminosidade e cor formando um mapa (map) dos pontos (bit). Mesmo as áreas sem desenho
(fundo) fazem parte do arquivo. Trabalha as imagens com variações complexas de cores, tons ou
formas, como fotos, gravuras ou imagens digitalizadas de vídeo, câmeras fotográficas digitais ou
escaneadas.
Exemplo de imagem bitmap. Fonte [3]
1.2
–
Imagem
Vetorial
A palavra "vetor" refere-se a uma linha, mas a representação vetorial descreve um desenho
como uma série de linhas e formas. Possui algumas regiões preenchidas com cor sólida ou sombreada.
Os arquivos vetoriais podem ser escritos em ASCII em um processador de textos. Trabalha os
desenhos em linhas com formas geométricas simples e fórmulas matemáticas. Gráficos e ilustrações a
mão livre, imagens em 2D e 3D.
Exemplo de imagem vetorial. Fonte [3]
1.3
–
Alguns
formatos
de
imagens:
GIF:
(Graphics
Interchange
Format)
É um formato de imagem de mapa de bits. O GIF apresenta um bom rendimento no tamanho
e qualidade em imagens com cores "limpas", sem muito detalhes. Possui suporte para imagens
animadas e com partes "transparentes".
Características:
- Trabalha com cores indexadas, podendo representar um máximo de 256 cores.
- Armazena imagens com grandes áreas planas (da mesma cor) de forma bastante
eficiente.
- Não possui níveis de compressão, apesar de já ser naturalmente compactado (GIFs
tem uma compressão padrão).
- Podem ser entrelaçadas. Uma imagem entrelaçada (interlaced) pode ser vista à
medida que vai sendo carregada (melhorando a definição aos poucos).
- Pode-se definir uma das cores como sendo "transparente", permitindo que se veja o
que está por trás. O recurso de transparência é muito interessante, pois permite criar
a sensação de que as imagens não são todas retangulares.
- Permite a criação de animações (GIFs Animados). O Princípio do GIF Animado é o
mesmo de um filme que vemos no cinema, ou seja uma sequência de imagens
transmitida rapidamente, uma animação propriamente dita. Alguns dos anúncios
(chamados de banners) que se vê na Web, na verdade são, GIFs Animados.
2
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
a) Imagens GIF tamanho 400x200
b) Com fundo transparente
pixels com fundo fixo
Apesar deste formato parecer limitado devido ao número baixo de cores com que trabalha, o
GIF é muito utilizado por alguns recursos que oferece. Um deles é a capacidade de utilizar
fundo transparente. Com isso, é possível, por exemplo, que um site publique uma imagem em
GIF e esta terá como fundo a cor da página. Além disso, o GIF permite que uma seqüência de
imagens sejam salvas em um único arquivo, onde cada imagem surge no lugar da anterior após
um tempo pré-determinado. Isso dá a sensação de animação, como mostra a imagem abaixo
(Ex: http://www.infowester.com/img_art/gif_exemplo.gif). A extensão dos arquivos no
formato GIF é .gif.
JPG/JPEG:
(Joint
Photographic
Experts
Group)
É um formato de compressão, com perda de dados, aplicado em imagens fotográficas. A perda
de dados é proporcional ao fator de compressão desejado. O JPEG é melhor para imagens que
apresentam muitos tons de cor. Este formato é ideal para trabalhar com fotografias digitais e
imagens complexas.
Características:
- Pode representar imagens com até 16 milhões de cores.
- Armazena imagens complexas de forma eficiente.
- Tem uma compressão variável. Porém, como nem tudo é perfeito, quanto mais você
comprime, maior será a perda da qualidade. A compressão padrão é em torno de 33
(numa escala de 1 a 100), mas a ideal, só testando mesmo. Quanto maior o número,
pior fica a qualidade.
- Não possui o recurso de transparência, portanto sempre aparecem retangulares na
tela.
- O entrelaçamento pode ser conseguido utilizando o formato Progressive Rendered
JPEG, uma nova versão criada para possibilitar um carregamento igual ao de um
GIF entrelaçado. Os Browsers de última geração já entendem este formato numa
boa, mas não os antigos.
- Não permite a criação de animações.
Imagem JPEG tamanho 400x200 pixels
Algo interessante no JPEG, é que os arquivos podem ter diferentes níveis de compressão.
Quanto mais existir compressão, ou seja, retirada de informação, menor será o tamanho do
3
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
arquivo, porém pior será sua qualidade. Assim, se você for disponibilizar imagens na internet, é
interessante mantê-lo em um tamanho pequeno. No entanto, se a imagem for utilizada em um
documento, muitas vezes é melhor mantê-la com o máximo de qualidade possível, para que a
impressão seja satisfatória.
Uma desvantagem do JPEG é que a imagem normalmente perde qualidade a cada vez que o
arquivo é salvo. Os arquivos em JPEG têm a extensão .jpg.
PNG:
(Portable
Network
Graphics)
É um formato de dados utilizado para imagens, que surgiu em 1996 como substituto para o
formato GIF, devido ao fato de este último incluir algoritmos patenteados.
Um formato ainda não muito comum na Internet, mesmo sendo desenvolvido especialmente
com este fim. Ele é uma evolução das GIFs que conhecemos, mantendo diversas de suas
características e incorporando novas com pouco custo de implementacão aos desenvolvedores.
Foi desenvolvido para, substituir o GIF e o JPEG.
Características:
- Pode representar imagens com até 16 milhões de cores.
- Um bom substituto para o GIF.
- Suporta entrelaçamento e transparência, mas não animação.
Imagem PNG tamanho 400x200 pixels
O PNG também possui o recurso de transparência, o que o faz uma excelente alternativa ao
GIF neste caso, pois é possível ter imagens com fundo transparente, mas com o objeto
utilizando um número muito maior de cores. As imagens no formato PNG possuem extensão
.png.
APNG:
(Animated
Portable
Network
Graphics)
É uma extensão de imagens animada do PNG (Portable Network Graphics). Ele permite
imagens animadas que funcionam de forma semelhante aos arquivos de formato GIF animado,
mantendo a compatibilidade com arquivos PNG sem animação.
Características:
- Pode representar imagens com até 16 milhões de cores.
- O primeiro quadro de um arquivo APNG é armazenado como um fluxo PNG
normal, e portanto a maioria dos decodificadores PNG antigos poderão exibir o
primeiro quadro de um arquivo APNG. O quadro velocidade dos dados e quadros
de animação extra são armazenados em blocos extras (conforme fornecido pela
especificação PNG original).
- É um formato poderoso para animações bitmap, criado pela mesma equipe do PNG.
- A vantagem do APNG é o menor tamanho da biblioteca e compatibilidade com as
implementações mais antigas do PNG.
4
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
MNG:
(Multiple­image
Network
Graphics)
Formato de arquivo público para imagens animadas (múltiplas imagens sequenciais),
originalmente designado para substituir o uso de GIF animado na web. Livre da patente
associada ao GIF animado. A estrutura de arquivos MNG é essencialmente a mesma de
arquivos PNG, além de várias extensões serem compartilhadas.
Características:
- Pode representar imagens com até 16 milhões de cores.
- O formato MNG é superior ao APNG, pois permite, além de outras características,
um controle de animação mais avançado que permite obter imagens menores.
- Não é muito conhecido por desenvolvedores.
- Não é suportado por muitos navegadores.
- Diferente do formato APNG, imagens MNG suportam compressão sem perda de
qualidade (através da compressão png) e compressão com perda de qualidade
(através da compressão jpeg) e ainda pode usar canal Alpha mesmo usando a
compressão JPEG.
BMP:
(Bitmap)
O formato Bmp (bitmap ou mapeamento de bits) é o formato padrão de imagens do Windows.
Esse formato suporta cores e é o formato de imagens mais "puro". Não usa nenhum tipo de
compressão e, por isso, a qualidade de imagem é a melhor possível e também gera arquivos
mais “pesados”.
Características:
- Pode representar imagens com até 16 milhões de cores.
- Compressão: Não tem. Perda de informação: Não aplicável.
- Não possui transparência.
Imagem BMP tamanho 400x200 pixels
Existem ainda outros formatos de arquivos de imagens como: EPS (Encapsulated PostScript),
PCX, TIFF (Tagged-Image File Format), etc.
1.4
–
Tamanho
da
imagem
O tamanho do arquivo da imagem (em kb) depende da qualidade da imagem. Além disso,
alguns softwares permitem configurar a resolução da imagem . A maioria das imagens é salva com a
resolução de 300 dpi (pontos por polegada), que é a resolução mínima para imagens a serem impressas.
Porém como a resolução da maioria dos monitores (padrão SVGA) de computador é de 96 dpi, podese sempre diminuir para este valor, diminuindo qualidade e tamanho do arquivo.
Observe na tabela abaixo os direferentes tamanhos de arquivos para a mesma imagem nos
diferentes formatos:
5
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
Referências
Bibliográficas
1. BMP
Bitmap.
Disponível
em:
[http://msdn.microsoft.com/pt‐br/library/at62haz6.aspx]
2. Adobe.
Formato
de
gráficos.
Disponível
em:
[http://help.adobe.com/pt_BR/InDesign/5.0/help.html?content=WSa285fff53dea4f8617383751001ea8cb3f‐
6be2.html]
3. APNG.
Disponível
online
em
[http://animatedpng.com/]
4. Comparações
de
Imagens.
Disponível
online
em
[/index.php/category/samples/]
5. Vector
vs.
Bitmap
Graphics
‐
an
Introductory
Guide
for
Clients
and
Designers.
Disponível
em:
[http://www.eastbywest.com/pub/vectorbitmap/]
6. APNG.
Álbum
de
imagens
APNG.
Disponível
online
em:
[http://s826.photobucket.com/albums/zz190/apng/]
7. Vectors
and
Bitmaps.
Disponível
em:
[http://graphicssoft.about.com/od/aboutgraphics/a/bitmapvector.htm]
8. Webdesign.
Revista
Webdesign.
Rio
de
Janeiro:
Artecom,
2010.
6