BASES SOBRE A TEORIA DA COR APLICADA AOS SISTEMAS DIGITAIS
1. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 1
3.2 BASES SOBRE A TEORIA DA COR APLICADA AOS
SISTEMAS DIGITAIS
Luz e Cor
Para entender as cores, é preciso antes falar de luz. A luz branca (praticamente a
totalidade da luz proveniente do Sol) é composta de radiações de diversos comprimentos
de onda. Cada comprimento de onda corresponde a uma cor – ou seja, ao ser captado
individualmente pelos nossos olhos, ele é convertido em impulsos eléctricos que fazem o
cérebro perceber aquela cor.
Fig. 1 – Espectro electromagnético
Por exemplo, o vermelho tem um comprimento de onda de 700 nm ou 0,7µm.
A cor de um material é determinada pelas médias de frequência dos pacotes de onda que
as suas moléculas constituintes reflectem. Um objecto terá determinada cor se não
absorver justamente os raios correspondentes à frequência daquela cor.
Considerando as cores como luz, a cor branca resulta da sobreposição de todas as cores,
enquanto o preto é a ausência de luz. Uma luz branca pode ser decomposta em todas as
cores (o espectro) por meio de um prisma. Na natureza, esta decomposição origina um
arco-íris.
Cores Primárias e cores Secundárias
Cor primária é uma cor que não pode ser decomposta noutras cores. Nunca é obtida a
partir da mistura de outras cores. As cores primárias são um conceito, baseado na
resposta do olho humano à luz. O olho humano normal possui três tipos de receptores,
chamados cones, que respondem a comprimentos de onda diferentes: vermelha e laranja,
verde e amarelo e azul e violeta. O primeiro tipo é denominado R (red), G (green) e B
(blue). Foram eles que deram origem ao sistema RGB, que será analisado mais à frente.
As cores, vermelho, verde e azul são consideradas cores primárias em fontes de luz, pois
cada uma delas pode estimular os cones de forma praticamente independente,
proporcionando uma ampla gama de cores.
Quando duas cores primárias são misturadas em partes iguais, duas a duas, elas geram
outras três cores: Ciano, Magenta e Amarelo, chamadas cores secundárias.
2. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 2
Cores complementares
Duas cores são complementares se, ao
serem misturadas, produzem o preto, o
branco ou uma graduação de cinza.
Uma cor primária tem sempre uma cor
secundária como complementar e vice-
versa.
A cor secundária complementar de
uma cor primária é aquela formada
pelas outras duas cores primárias.
As cores complementares são as que
mais diferem umas das outras.
Nos sistemas RGB e CMY, as primárias
de um sistema são secundárias do
outro e vice-versa.
Fig. 2 – Cores primárias e cores complementares
Cada cor é sempre a intermediária entre as duas vizinhas. Em posição diametralmente
opostas estão as cores complementares.
Modelo CIE XYZ
A Commission Internationale de l’Eclairage, CIE, propôs este modelo em 1931 como
standard de medida de cor, a partir de uma série de experiências realizadas por David W.
Wright e John Guild.
O modelo baseia-se nas três cores primárias da luz, vermelho, verde e azul com valores
estímulo X, Y e Z respectivamente. Dado que o olho humano tem três tipos de cones que
respondem a diferentes comprimentos de onda, este modelo representa numa figura
tridimensional todas as cores visíveis pelo olho humano.
Fig. 3- Diagrama de cromaticidade XYZ
3. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 3
− As cores espectrais puras são representadas por uma curva em forma de ferradura;
− A base da ferradura (magenta) representa cores não-espectrais;
− O branco é um ponto no interior da ferradura;
− As restantes cores são também pontos interiores.
− A saturação corresponde à distância do ponto branco;
− O matiz corresponde à intersecção da recta que passa pelo ponto com a ferradura;
− A luminância corresponde ao eixo z.
Ref:
http://upload.wikimedia.org/wikipedia/en/5/52/Chromaticity_diagram_full.pdf
http://en.wikipedia.org/wiki/Chromaticity_diagram#The_CIE_xy_chromaticity_diagram_and_the_C
IE_xyY_color_space
Modelo RYB
Nas artes plásticas usa-se um sistema de cores diferente, chamado sistema RYB, que tem
em conta os pigmentos existentes. Nesse sistema o (Red) Vermelho, o (Blue) Azul e o
(Yellow) Amarelo são tratados como cores primárias. A teoria das cores diz que
misturando cores primárias, pode-se obter qualquer cor.
Modelo RYB
CORES SECUNDÁRIAS:
Verde = Azul + Amarelo
Laranja = Amarelo + Vermelho
Violeta = Azul + Vermelho
Modelo RGB
CORES SECUNDÁRIAS:
Ciano = Azul + Verde
Magenta = Azul + Vermelho
Amarelo = Vermelho + Verde
Fig. 4 – Modelos de cor RYB e RGB
Como o sistema RYB não representa todas as cores perceptíveis pelo olho humano
actualmente são considerados dois modelos de classificação de cores: o modelo aditivo
(ou luminoso) RGB e o modelo subtractivo (ou reflexivo) CMY. O sistema CMYK consiste
no modelo CMY acrescido de Preto (K) e é usado pela indústria gráfica em vários sistemas
de impressão.
4. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 4
Modelo RGB
O modelo de cores RGB é um modelo aditivo no qual o vermelho, o verde e o azul são
combinados de várias maneiras para reproduzir outras cores. O nome do modelo e a
abreviatura RGB vêm das três cores primárias: vermelho, verde e azul (Red, Green e Blue,
em inglês), e só foi possível devido ao desenvolvimento tecnológico de tubos de raios
catódicos – com os quais foi possível fazer a representação de cores.
Fig. 5 – Modelo de cor RGB
O propósito principal do sistema RGB é a reprodução de cores em dispositivos
electrónicos como monitores, TV, "datashows", scanners e câmaras digitais, assim como na
fotografia tradicional. O modelo de cores RGB é baseado na teoria de visão colorida
tricromática, de Young-Helmholtz, e no triângulo de cores de Maxwell.
Funcionamento
Uma cor no modelo de cores RGB é descrita pela indicação da quantidade de vermelho,
verde e azul que contém. Cada uma pode variar entre o mínimo, 0, (completamente
escuro) e máximo, 255, (completamente intenso), conforme mostra a Fig. 6.
Este é um exemplo de uma cor RGB, com as componentes:
RGB (213,111,56)
Fig. 6 –Variação de cada cor; Cor resultante de uma combinação de RGB
Quando todas as cores estão no mínimo, o resultado é preto. Se todas estão no máximo, o
resultado é branco.
A representação com 24-bit
Os valores de RGB são uma codificação de 24 bit por pixel (bpp) que constituem uma
imagem. Cada uma das cores, R, G e B é codificada com 8 bit, ou seja, com um valor de 0 a
255, que representa a intensidade de vermelho, verde e azul, como já foi visto
anteriormente. Esta representação de cor é um standard na representação de imagem em
5. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 5
dispositivos gráficos, também conhecido como True Color, comum a vários formatos de
imagem, tais como BMP ou JPG. Permite a representação de cerca de 16,7 milhões de
combinações diferentes de cor.
Fig. 7 – A representação das cores num dispositivo gráfico
R G B COR
VALOR
HEXADECIMAL
0 0 0 PRETO #000000
255 0 0 VERMELHO #FF0000
0 255 0 VERDE #00FF00
0 0 255 AZUL #0000FF
255 255 0 AMARELO #FFFF00
0 255 255 CIANO #00FFFF
255 0 255 MAGENTA #FF00FF
255 255 255 BRANCO #FFFFFF
100 100 100 CINZA #646464
Neste modelo, as cores são complementares às do sistema CMYK - Ciano (Cyan), Magenta
(Magenta), Amarelo (Yellow) e Preto (blacK) e a mistura das três, forma o Branco.
Modelo CMY(K)
Este sistema (subtractivo ou de cor pigmento) consiste na mistura das cores secundárias
da luz (também chamadas de primárias em artes plásticas), Ciano (Cyan), Magenta
(Magenta), Amarelo (Yellow), CMY.
Como o sistema CMY não reproduz fielmente os tons mais escuros, é necessária a
aplicação de preto "puro", (blacK/Key). Este sistema é utilizado por impressoras, na
indústria gráfica e em fotocopiadores.
Fig. 8 – Modelo de cor CMY
6. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 6
Como se pode verificar na Fig. 3, o Ciano é a cor oposta ao Vermelho, significa que actua
como um filtro que absorve essa cor (-R +G +B). Da mesma forma, Magenta é a oposta ao
Verde (+R -G +B) e Amarelo é a oposta ao Azul (+R +G -B). Assim, as cores primárias de
pigmento combinadas duas a duas, na mesma proporção, geram o seguinte resultado:
+ = Magenta + Amarelo = Vermelho
+ = Magenta + Ciano = Azul
+ = Ciano + Amarelo = Verde
Focos de luz primária combinados dois a dois geram o seguinte resultado:
+ = Azul + Vermelho = Magenta
+ = Vermelho + Verde = Amarelo
+ = Verde + Azul = Ciano
As cores primárias de luz são as cores secundárias de pigmento, tal como as secundárias de luz são as
primárias de pigmento.
Modelo HSV (HSB)
O modelo HSV (Hue, Saturation, Value – Tonalidade, Saturação, Valor), também conhecido
por HSB (Hue, Saturation, Brightness – Tonalidade, Saturação, Brilho), define um modelo
de cor em função de três parâmetros, constituintes de um cone:
Matiz (tonalidade): Verifica o tipo de cor, abrangendo todas as cores do espectro, desde
o vermelho até o violeta. Varia entre os valores 0° e 360°, podendo em algumas
aplicações ser normalizado de 0 a 100%.
− 0° ou 360° VERMELHO ;
− 60° AMARELO ;
− 120° VERDE ;
− 180° CIANO ;
− 240° AZUL ;
− 300° MAGENTA.
Saturação: Quanto menor este valor, mais cinza é a imagem. Quanto maior o valor,
mais "berrante" é a imagem. Varia entre 0 e 100%.
Valor, ou brilho: Define o brilho da cor. Varia de 0 a 100%.
Fig. 9 - Cone de cores do espaço HSV
7. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 7
Este sistema foi criado em 1978, por Alvy Ray Smith. Consiste numa transformação não
linear, i.e, uma conversão que depende do dispositivo que a representa.
As cores são definidas por trios (h, s, v) e são dependentes das cores Red, Green e Blue
primárias do espaço RGB do dispositivo gráfico específico, e da compressão gamma[1]
usada para representar as quantidades dessas cores primárias.
Modelo YUV
YUV é um espaço de cor habitualmente usado em sistemas de vídeo a cores, NTSC, PAL,
SECAM e vídeo composto. Define um espaço de cor tendo em conta a percepção humana,
em termos de uma componente de luminância (Y) e duas componentes de crominância
(UV).
Fig. 10 - Plano de cores U-V, Y' = 0.5, representado com gamut[2] RGB
O modelo YUV está más próximo do modelo de percepção humana do que o RGB usado
em hardware gráfico de computador, mas mais afastado do espaço de cor HSV. Existem
outras nomenclaturas, por vezes ambíguas, para sistemas similares ou coincidentes,
designadas por termos como, Y'UV, YUV, YCbCr, YPbPr, etc…
Outros Modelos
MUNSELL
http://www.xrite.com/top_munsell.aspx
L.a.b. (LAB)
http://www.optics.arizona.edu/opti588/reading/CIE_Lab_color_space.pdf
NCS
http://www.ncscolour.com/en/lm/colour-knowledge/how-ncs-works/ncs-notation/
[1]
http://en.wikipedia.org/wiki/Gamma_correction
[2] Gamut ou cor gamut é um subconjunto completo de cores.
8. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 8
Pantone
Existem diferentes sistemas comerciais de definição de cores, sendo o mais conhecido
deles, o sistema Pantone, onde as cores são referenciadas por números.
Fig. 11 – Um excerto de um Pantone
O Pantone Matching System, foi criado em 1963 com o objectivo de alcançar um standard
para a comunicação e reprodução de cores nas artes gráficas. Baseia-se na edição de uma
série de catálogos em papel ou outros suportes, tabelando uma codificação
estandardizada, onde cada cor específica é referenciada por um número único.
A limitação do Gamut
A representação da gama completa de cores, gamut, que o olho humano consegue
distinguir é demasiado grande. Os modelos de representação de cor mais usados, RGB e
CMYK, possuem limitações na representação de toda essa gama que nós conseguimos
efectivamente ver, conforme se esquematiza na imagem seguinte.
Fig. 12 – Gamuts RGB e CMY sobre diagrama de cromaticidade CIE
A Fig. 12 mostra claramente uma sobreposição das gamas de cor dos modelos RGB e
CMYK, sobre o diagrama de cromaticidade CIE de 1931, que representa a gama completa
da percepção humana de cor.
O gamut exato de um modelo de cor depende de dispositivo que o representa. Todo o
dispositivo gráfico, monitor, scanner, impressora, tem o seu gamut individual.
http://www.youtube.com/watch?v=0AYNOF7gSFg&feature=related
9. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM 9
Estas diferenças no gamut podem criar problemas na reprodução de cor em gráficos ou
páginas gerados por computador, a um nível profissional. Este é um problema inerente à
produção de gráficos produzidos por computador.
Cores HTML
As cores HTML são definidas usando uma notação hexadecimal (Hex) para combinar
valores de Vermelho, Verde e Azul (RGB). Esses valores podem variar, para cada cor, entre
0 (Hex 00) e 255 (Hex FF). Os valores Hex são escritos juntando 3 grupos de dois dígitos
hexadecimais, antecedidos por um # (triplet). Vejamos os exemplos:
Cor HEX CorRGB Cor
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
Um exemplo de aplicação
O código seguinte representa o conteúdo de um ficheiro .htm.
<html>
<body>
<p style="background-color:#AA00FF">
Cor da linha definido em hexadecimal.
</p>
<p style="background-color:rgb(255,100,0)">
Cor da linha definido com RGB.
</p>
<p style="background-color:cyan">
Cor da linha definida por nome da cor.
</p>
</body>
</html>
O resultado da abertura desse ficheiro no browser, será:
Cor da linha definido em hexadecimal.
Cor da linha definido com RGB.
Cor da linha definida por nome da cor.
Como já foi visto, existe uma analogia entre este modelo e o modelo de cores HTML e o
modelo RGB, sendo então possível representar 256x256x256 = 16 777 216 cores
10. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
10
diferentes. Os tons de cinzento são representados usando igual quantidade das três cores
componentes.
Os browsers actuais são capazes de reconhecer cerca de 150 cores pelo seu nome,
conforme se pode verificar no link, www.w3schools.com/html/html_colornames.asp. No
entanto, o World Wide Web Consortium (W3C) definiu uma lista de 16 nomes de cores
válidos para o HTML e CSS.
aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, and yellow
Cores seguras
Há alguns anos atrás, quando surgiu o HTML, os computadores suportavam apenas 256
cores diferentes. Por essa razão, definiu-se nessa época uma lista de 216 cores diferentes,
como o padrão de cores Web, reservando 40 cores para uso exclusivo do sistema, de forma
a garantir que todos os browsers pudessem representar essas cores correctamente.
Convencionou-se usar apenas 6 bits de tonalidades para o vermelho, verde e azul,
resultando assim 6 x 6 x 6=216 cores.
Actualmente esse problema não se põe, já que qualquer computador tem a sua
configuração gráfica normalmente ajustada para no mínimo, 24 bits de cor (truecolor).
Fontes:
http://www.w3schools.com/html/html_colors.asp
http://en.wikipedia.org/wiki/Web_colors
Conversão Entre Modelos de Cor
Existem formas diferentes de conversão entre os vários modelos de representação de cor.
Algumas podem ser encontrados em http://www.easyrgb.com/index.php?X=MATH.
Exemplo: RGB para CMYK
Dada uma cor RGB, deve-se converter os valores para o intervalo de [0,1], correspondendo o
0 ao 0 e 1 ao 255.
Dada a cor RGB (0,150,250);
Depois de converter os valores para o intervalo [0,1], aplica-se o seguinte algoritmo:
C' = 1 – R;
M' = 1 – G;
Y' = 1 – B;
If C'=1 and M'=1 and Y'=1 then
CMYK = (0,0,0,1);
else
{
K = minimum (C', M', Y');
C = (C' – K) / (1 – K);
M = (M' – K) / (1 – K);
Y = (Y' – K) / (1 – K);
}
11. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
11
Através de uma folha de cálculo pode-se facilmente aplicar o algoritmo e obter o resultado,
RGB (0,150,250) CMYK (100,40,0,2).
VALOR [0..1]
R 0 0,000 C' 1,000 C 100%
G 150 0,588 M' 0,412 M 40%
B 250 0,980 Y' 0,020 Y 0%
K 2%
Confirmando através do programa de manipulação de imagem, GIMP, temos:
Através do site http://web.forret.com/tools/color.asp podemos confirmar os resultados
anteriores, bem como para os modelos, HSV e YUV.
Fontes
http://web.forret.com/tools/color.asp
http://www.alvyray.com/Papers/hsv2rgb.htm
http://www.cs.rit.edu/~ncs/color/t_convert.html
http://en.literateprograms.org/RGB_to_HSV_color_space_conversion_%28C%29
12. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
12
GRÁFICOS
Os gráficos de computador dividem-se em duas categorias: gráficos de rastreio ou bitmap
e gráficos vectoriais.
Bitmap ou Raster (Rastreio)
Basicamente um bitmap é um array (matriz) de pixels. Um bitmap pode ter uma
“profundidade” e uma resolução. O valor de cada ponto (cor) é armazenado
individualmente (pixel). Normalmente as imagens de bitmap ao serem ampliadas, os
pontos ficam maiores e surgem mais visíveis as imperfeições da imagem. Também na
impressão os resultados podem não ser muito bons.
Características
Fácil de implementar.
Funciona bem com imagens complexas.
Pouco flexível.
Pode necessitar de muita memória.
Gráficos Vectoriais
As imagens vectoriais são representações de entidades geométricas como um círculo, um
rectângulo ou um segmento, em vez de pixels. Estes são representados por fórmulas
matemáticas (um rectângulo é definido por dois pontos, um círculo por um centro e um
raio, uma curva por vários pontos e uma equação). É o processador que se encarrega de
“traduzir” estas formas em informação interpretável pela placa gráfica. Assim, é possível
aplicar-lhe facilmente transformações geométricas (expansão, redução, …) adequando-se à
escala. Tanto ao nível da visualização como da impressão, temos sempre curvas perfeitas.
As imagens vectoriais geralmente ocupam menos espaço que as imagens de bitmap.
Características
Funcionam bem como linhas de arte (aplicações CAD) e imagens com formas simples.
Flexíveis.
Requerem pouca memória.
Fig. 14 – Comparação entre uma imagem bitmap e uma vectorial
13. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
13
Picture Element - Pixel
Um pixel corresponde ao elemento mínimo que se pode representar num ecrã de
computador. Tem origem nas palavras “picture element”. Quando estes pixels são
representados num ecrã em forma de matriz, formam uma imagem. Esta matriz de pixels é
chamada de bitmap.
Não se deve confundir pixel com os pontos visíveis no ecrã. Quando nos aproximamos
junto deste, são visíveis ínfimos pontos que não são pixels, mas sim furos numa grelha
metálica através da qual passa a luz que constitui a imagem visível.
Numa imagem a preto e branco, cada pixel pode ser representado apenas por 1 bit, ou seja,
1 se o pixel for preto e 0 se o pixel for branco.
Fig 15a - Uma imagem bitmap Fig. 15b - A mesma imagem ampliada
Normalmente é necessário mais do que 1 bit por pixel para representar uma imagem. Isso
depende da “profundidade” de cor da imagem.
Profundidade de cor – em Bits
A profundidade de cor (color depth) corresponde ao número de bits usados por pixel para
armazenar em memória ou representar num monitor, a cor de um pixel numa imagem do
tipo bitmap. Este conceito é conhecido também por bits por pixel (bpp). Quanto maior o
valor da profundidade da cor de uma imagem, maior é a escala de cores disponível.
Bits Cores
1 2 = 21
2 4 = 22
4 16 = 24
8 256 = 28
16 65 536 = 216
24 16 777 216 = 224
A Fig. 16 mostra a mesma imagem representada com diferentes profundidades de cor.
Quanto maior a quantidade de bits por pixel, maior o tamanho em bytes do ficheiro que a
guarda.
1 bit (preto e branco) 4 bit (16 cores)
14. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
14
8 bit (256 cores) 24 bit (Truecolor)
Fig. 16 – Comparação de uma imagem com diferentes profundidades de cor
Padrões gráficos / “Resolução”
A resolução é o termo usado para descrever o número de pixels na horizontal e na vertical,
usados para mostrar uma imagem. Resoluções mais elevadas, implicam o uso de maior
quantidade de pixels. A resolução de um monitor é composta por milhares de pixels. Esse
valor é indicado por uma combinação, por exemplo 1024x768. Isto significa que o monitor
representa 1024 pontos na horizontal e 768 na vertical, contabilizando um total de 786
432 pontos que constituem a área de imagem no monitor.
Ao longo da história do desenvolvimento dos diferentes dispositivos de visualização
gráfica, foram adoptados vários padrões de referência, com resoluções fixas e aspect ratio
(razão entre comprimento e largura).
Na tabela seguinte resumem-se alguns padrões gráficos, de dispositivos de visualização
(monitores) destacando-se em cor os mais representativos.
Standard
Resolução
(pixels)
Aspect
Ratio
Standard
Resolução
(pixels)
Aspect
Ratio
CGA 4-
color
320×200 16:10 WSXGA 1600×1024 25:16
QVGA 320×240 4:3 WSXGA+ 1680×1050 16:10
EGA 640×350 64:35 UXGA 1600×1200 4:3
VGA 640×480 4:3 WUXGA 1920×1200 16:10
WGA ou
WVGA
800×480 5:3 QXGA 2048×1536 4:3
SVGA 800×600 4:3 WQXGA 2560×1600 16:10
XGA 1024×768 4:3 QSXGA 2560×2048 5:4
XGA+ 1152×864 4:3 WQSXGA 3200×2048 25:16
SXGA 1280×1024 5:4 QUXGA 3200×2400 4:3
WXGA 1280×800 16:10 WQUXGA 3840×2400 16:10
WXGA 1366×768 16:9 HSXGA 5120×4096 5:4
WSXGA or
WXGA+
1440×900 16:10 WHSXGA 6400×4096 25:16
SXGA+ 1400×1050 4:3 HUXGA 6400×4800 4:3
16. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
16
Formatos de Ficheiros de Imagem de Bitmap
Existe uma grande variedade de formatos de ficheiros para imagens. Cada um tem as suas
características específicas. Alguns, armazenam a imagem de uma forma comprimida,
outros armazenam uma imagem com uma profundidade de cor específica e outros são
específicos para uma determinada aplicação. Segue-se uma lista dos tipos de ficheiros
mais comuns.
BMP
Um formato standard de ficheiro de gráficos do
Microsoft Windows.
Usado no Paint (Paintbrush) e outros programas.
Capaz de armazenar imagens de 24-bit.
JPG
Um standard para imagem fotográfica
comprimida, criado pelo Joint Photographics
Experts Group.
Tira vantagem das limitações da visão humana
para atingir elevados níveis de compressão.
Pequena perda de qualidade com a compressão o
que permite ao utilizador estabelecer o nível de
compressão desejado sem grande perda de
qualidade.
TIFF
Tagged Image File Format (TIFF), pode
armazenar vários tipos de imagens:
monocromáticas, tons de cinzento, 8-bit e 24-bit
RGB, etc.).
Desenvolvido pela Aldus Corp nos anos 80 e mais
tarde suportada pela Microsoft.
TIFF é um formato com o mínimo de perda de
qualidade.
Hoje em dia já não apresenta vantagens sobre os
novos formatos JPEG. Caiu de popularidade.
Foi essencialmente usado em scanners.
GIF
Graphics Interchange Format (GIF) criado pela
UNISYS Corp. e Compuserve, inicialmente para
transmitir imagens através de linhas telefónicas
via modem, nos primórdios da Internet.
Usam o algoritmo de codificação de Lempel-Ziv
Welch (LZW), sem perdas.
Limitadas a imagens de cor de apenas 8-bit por
pixel (máximo de 256 cores).
17. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
17
PNG
O formato PNG, é um formato de imagem
desenvolvido por um consórcio de produtores de
software gráfico como um formato não
proprietário alternativo ao GIF.
O formato PNG foi desenvolvido especialmente
para ser usado em páginas Web, oferece uma
gama de atributos atractivos que deveriam
transformar este formato num dos mais
populares. Na verdade o formato não atingiu os
níveis previstos e alguns “browsers” nem sequer
o suportam.
Resumo
FORMATO
PROFUNDIDADE
DE COR (bits)
COMPRIMIDO
(S/N)
PERDAS
(S/N)
ALGORITMO
COMPRESSÃO
BMP 24 N − −
JPG/JPEG/JFIF 24 S S DCT
GIF 8 S N LZW
TIFF 24 S N LZW
PNG 24 S N DEFLATE
TGA 24 S N RLE
PICT/PCT/PIC 24
Formato criado e utilizado pela Apple. Suporta também
gráficos vectoriais.
PCX 8
Personal Computer eXchange foi o formato nativo do PC
Paintbrush tendo-se tornado no mais utilizado pelo DOS.
PGM
8
(256 tons cinza)
Ficheiros de texto ASCII ou binário, onde estão definidos
os parâmetros da imagem.
Algumas imagens aparentemente de 24-bit são na verdade imagens de 32-bit. O byte extra
para cada pixel é usado para armazenar um valor alpha, que representa informação sobre
alguns efeitos especiais, como pixel transparency, que pode ser usado para definir uma
máscara para composição de uma imagem sobre outra.
18. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
18
Formatos de Ficheiros de Imagens Vectoriais
SVG
Scalable Vector Graphics - SVG é uma linguagem para descrever gráficos vectoriais
bidimensionais, estáticos e dinâmicos (animações) em XML. Foi desenvolvido pela
W3C, como um open standard.
As imagens SVG são descritas num ficheiro de texto XML. Podem ser editadas com
qualquer editor de texto. Os browsers modernos suportam este formato, com excepção
do Internet Explorer, onde é necessário instalar pluggins para o interpretar, como o
Adobe SVG Viewer, http://www.adobe.com/svg/viewer/install/
A maioria dos programas de edição de gráficos vectoriais suporta este formato.
Existe em versão compactada, o SVGZ.
CDR Drawing (vector image) criado para o CorelDRAW. Formato proprietário usado pela
Corel não reconhecido pela maioria dos programas de edição de gráficos.
AI
Adobe Illustrator Artwork (AI) é um formato proprietário desenvolvido pela Adobe
Systems para representação de desenhos vectoriais. É suportado por vários programas
de edição.
WMF/
EMF
Windows Metafile (WMF) é um formato do Microsoft Windows. Este formato é portável
entre as várias aplicações da Microsoft e pode suportar componentes vectoriais e
bitmaps. A maioria dos Clipart do Windows está neste formato.
Existe uma versão melhorada, mais recente, designada por Enhanced Metafile (EMF).
CGM
Computer Graphics Metafile (CGM) é um formato para gráficos vectoriais 2D, rastreio e
texto. Foi criado para suportar várias aplicações, originalmente usado para bibliotecas
de clipart. É actualmente usado pelo AutoCAD.
Todos os elementos gráficos que constituem um desenho podem ser especificados num
ficheiro de texto, compilável num ficheiro binário. Este formato é transversal entre
plataformas e aplicações diferentes. Foi superado por formatos mais recentes, como o
SVG e DXF.
PICT/PC
T/PIC
PICT é um formato de gráficos desenvolvidos para o computador Apple Macintosh
como um formato standard. Suporta também imagens de bitmap e texto, transversal
entre aplicações Mac, muito utilizado pelo programa de desenho QuickDraw.
DXF
AutoCAD DXF (Drawing Interchange Format, ou Drawing Exchange Format) é um
formato desenvolvido pela Autodesk, para suportar a interoperacionalidade entre o
AutoCAD e uma extensa lista de outros programas.
DWG
DWG ("drawing") é um formato usado para armazenar desenho 2D e 3D. É o formato
nativo de várias aplicações CAD, como o AutoCAD, IntelliCAD ou Caddie.
PLT Ficheiro de gráficos vectoriais usado por plotters criado para software AutoCAD.
ODG
(Open Document Graphics) - ODG é um formato usado pelo OpenOffice para armazenar
desenhos criados pelo programa Draw. É um standard open.
SWF
"Small Web Format" ou "Shockwave Flash" da Macromedia. Um formato que ocupa
pouco espaço, desenvolvido essencialmente para publicação na Web. Os ficheiros SWF
podem conter animação e interactividade. São actualmente muito utilizados.
Um exemplo de um ficheiro SVG
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
19. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
19
Software habitual
Existe uma grande quantidade de programas de tratamento de imagem de rastreio e
também imagem vectorial. Segue-se uma lista de apenas alguns dos mais utilizados.
Tratamento de imagem de bitmap Tratamento de imagens vectoriais
Adobe Photoshop
GIMP (Free)
Xara
Paint Shop Pro (Free)
Paint Net (Free)
Adobe Illustrator
Adobe Freehand
Corel Draw
Inkscape (Free)
Algoritmos de Compressão
Com o evoluir dos sistemas de captura e síntese de imagem, cedo se constatou que um
ficheiro de imagem “pura” (.bmp, mapa de bits) ocupa bastante espaço (comp x larg x 3
Byte), chegando facilmente aos MegaBytes. Houve necessidade de criar ficheiros em que os
dados fossem comprimidos, de forma reduzir o espaço físico ocupado por esses ficheiros.
Surgiram então vários algoritmos de compressão. Existem dois tipos de algoritmos de
compressão de imagem: lossless (sem perda) e lossy (com perda).
Compressão sem perdas (Lossless)
O algoritmo reduz o tamanho do ficheiro sem reduzir a qualidade da imagem. No entanto,
a taxa de compressão deste algoritmo não é muito grande.
Compressão com perdas (Lossy)
O algoritmo tira vantagem das limitações da visão humana descartando informação
invisível. Muitos destes algoritmos têm vários níveis de compressão. Para níveis mais
elevados de compressão, a deterioração da imagem pode tornar-se perceptível. Vejamos
alguns dos mais conhecidos, já referidos quando se resumiu algumas das características
dos formatos mais comuns de ficheiros de imagem.
RLE - Run-Length Encoding
É uma forma simples de compressão de dados que no essencial contabiliza os dados
repetidos numa sequência de dados, e apresenta esses dados de uma outra forma mais
condensada. Não é muito eficiente, se o ficheiro não apresenta muitas repetições de dados.
Exemplo
Consideremos uma sequência de texto plano.
WWWWWWWWWWWWBWWWWWWWWWWWWBBBWWWWWWWWWWWWWWWWWWWWWWWWBWWWWWWWWWWWWWW
Se aplicarmos o algoritmo (RLE) a linha acima passaria a ser representada por,
12W1B12W3B24W1B14W
Passamos de 67 caracteres originalmente para apenas 18.
Como é óbvio, este algoritmo pode ser aplicado também a ficheiros binários.
20. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
20
LZW - Lempel–Ziv–Welch
É um algoritmo universal de compressão de dados sem perda criado por Abraham Lempel,
Jacob Ziv e Terry Welch. É um algoritmo de implementação rápida mas não muito eficiente.
LZ77 e LZ78
LZ77 e LZ78 são os nomes de dois algoritmos de compressão de dados sem perda, da
autoria de Abraham Lempel e Jacob Ziv, que são a base da maioria das variações LZ, e
incluem o LZW, LZSS, LZMA e outros.
DCT - Discrete Cosine Transform
O algoritmo DCT (Discrete Cosine Transform) exprime uma sequência finita de pontos,
como somas de funções co-seno oscilando entre frequências diferentes. Baseia-se nas
Transformadas de Fourrier e tem utilização em enumeras áreas científicas e de
engenharia. Por exemplo, na compressão áudio, com o formato MP3 e na compressão de
imagens com o formato JPEG.
Fig. 17 – DCT aplicado a uma imagem
DEFLATE
É um algoritmo de compressão de dados, sem perdas, que usa uma combinação do LZ77 e
codificação de Huffman. Foi originalmente desenvolvido por Phil Katz para a versão 2 do
compactador PKZIP. O Deflate não tem patente registada e é de utilização livre, tendo sido
utilizado como algoritmo de compressão, em ficheiros gzip, zip, 7-zip e em ficheiros de
imagem PNG.
Refs:
http://en.wikipedia.org/wiki/Lempel%E2%80%93Ziv%E2%80%93Welch
http://www.cs.cf.ac.uk/Dave/Multimedia/node214.html
http://michael.dipperstein.com/lzw/index.html
http://cnx.org/content/m11092/latest/
http://www.cs.cf.ac.uk/Dave/Multimedia/node234.html
http://en.wikipedia.org/wiki/DEFLATE
21. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
21
Anti-aliasing
Em processamento digital de sinal, anti-aliasing é a técnica de minimizar a distorção
conhecida por aliasing quando se pretende representar sinal de alta resolução em
resolução mais reduzida.
Anti-aliasing é utilizado em fotografia digital, gráficos de computador, áudio digital e
muitas outras aplicações.
Na representação de imagens, anti-aliasing consiste num processo de disfarçar os
contornos agudos nas imagens para fazer desaparecer o “efeito escada” das linhas. O
algoritmo usado para o efeito, procura os extremos na imagem e a seguir disfarça os pixels
adjacentes com tons mais claros. No exemplo abaixo (Fig. 18) pode ver-se uma imagem
sem o efeito e outra resultante da aplicação do efeito de anti-aliasing.
Imagem Original (x6) Imagem após Anti-aliasing (x6)
Fig. 18 – Anti-aliasing
Dithering
Dithering consiste no processo de converter uma imagem com uma determinada
profundidade de cor noutra com memos profundidade. Portanto, existe perda de
qualidade, mas em contrapartida ganha-se no espaço ocupado pela imagem.
Imagem Original Dithering para 256 cores
Quando se aplica o método de dithering numa imagem, este converte as cores que não
pode representar juntando duas ou mais cores que mais se aproximam, para gerar uma
única cor, próxima das originais.
22. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
22
Um formato “curioso”
Portable PixMap (PPM)
Portable BitMap (PBM)
Portable GrayMap (PGM)
http://en.wikipedia.org/wiki/Portable_Gray_Map
Each format differs in what colors it is designed to represent:
• PBM is for bitmaps (black and white, no grays)
• PGM is for grayscale
• PPM is for "pixmaps" which represent full RGB color.
File Descriptor Type Encoding
P1 Portable bitmap ASCII
P2 Portable graymap ASCII
P3 Portable pixmap ASCII
P4 Portable bitmap Binary
P5 Portable graymap Binary
P6 Portable pixmap Binary
PBM example
A simple example of the PBM format is as follows:
P1
# This is an example bitmap of the letter "J"
6 10
0 0 0 0 1 0
0 0 0 0 1 0
0 0 0 0 1 0
0 0 0 0 1 0
0 0 0 0 1 0
0 0 0 0 1 0
1 0 0 0 1 0
0 1 1 1 0 0
0 0 0 0 0 0
0 0 0 0 0 0
The string P1 identifies the file format. The hash sign introduces a comment. The next two numbers
give the width and the height. Then follows the matrix with the pixel values (in the monochrome
case here, only zeros and ones).
Here is the resulting image:
Here it is again magnified 20 times:
23. APIB-12B
3.2 SISTEMAS MULTIMEDIA - IMAGEM
23
PGM example
The PGM and PPM formats (both ASCII and binary versions) have an additional parameter for the
maximum value in a line between the X and Y dimensions and the actual pixel data.
P2
# Shows the word "FEEP" (example from Netpbm man page on PGM)
24 7
15
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 3 3 3 3 0 0 7 7 7 7 0 0 11 11 11 11 0 0 15 15 15 15 0
0 3 0 0 0 0 0 7 0 0 0 0 0 11 0 0 0 0 0 15 0 0 15 0
0 3 3 3 0 0 0 7 7 7 0 0 0 11 11 11 0 0 0 15 15 15 15 0
0 3 0 0 0 0 0 7 0 0 0 0 0 11 0 0 0 0 0 15 0 0 0 0
0 3 0 0 0 0 0 7 7 7 7 0 0 11 11 11 11 0 0 15 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
PPM example
P3
# The P3 means colors are in ASCII, then 3 columns and 2 rows, then
255 for max color, then RGB triplets
3 2
255
255 0 0 0 255 0 0 0 255
255 255 0 255 255 255 0 0 0
The image (expanded)
The P6 binary format of the same image will store each color component of each pixel with one byte
(thus three bytes per pixel) in the order red, green, then blue. The file will be smaller but the color
information will not be readable by humans.
The PPM format is not compressed and thus requires more space and bandwidth than a
compressed format would require. For example, the above 192x128 PNG image has a file size of
187 bytes. When converted to a 192x128 PPM image, the file size is 73848 bytes. The PPM format is
generally an intermediate format used for image work before converting to a more efficient format,
for example the PNG (Portable Network Graphics) format, without any loss of information in the
intermediate step.