Cap.5: Cor e Imagem. Engenharia Informática (5385) - 2º ano, 2º semestre - PDF
Download "Cap.5: Cor e Imagem. Engenharia Informática (5385) - 2º ano, 2º semestre"
Vasco Borges Cortês
1 Cap.5: Cor e Imagem Engenharia Informática (5385) - 2º ano, 2º semestre 1
2 Sumário Modelos de cor Modelo RGB Modelo CMYK Modelo HSB Modelo de cor indexada Paletas de cor Dithering Correcção gamma Formatos de imagem digital: GIF, PNG, JPEG, TIFF 2
3 Modelos de cor RGB. Representa a cor natural como uma combinação de 3 canais: RED, GREEN e BLUE. CMYK. Emprega 4 canais para criar cor: CYAN, MAGENTA, YELLOW e BLACK. HSB. A cor HSB é definida por 3 valores distintos: HUE, SATURATION e BRIGHTNESS. 3
4 Modelo RGB (24 bits) RGB. Representa a cor natural como uma combinação de 3 canais de cor: RED, GREEN e BLUE. É um modelo aditivo. As cores são criadas por adição e mistura das cores primárias: RED, GREEN e BLUE. Funciona muito à semelhança do olho humano. Os monitores e os scanners seguem o modelo RGB. Zonas claras denotam elevadas concentrações de tinta ou pigmentação, ao passo que zonas escuras denotam baixas concentrações de tinta. Formatos RGB, também conhecidos por true-color, usam 8-bits por canal. A paleta de pixéis é, pois, de 24-bits, ou seja, 16.7 milhões de cores (224= cores). Imagens JPEG de 16, 24 e 32 bits são imagens RGB. imagem RGB canal RED canal GREEN (semelhante à imagem de tons de cinzento) canal BLUE 4
5 Modelo CMYK imagem CMYK CMYK. Emprega 4 canais para criar cor: CYAN, MAGENTA, YELLOW e BLACK. As cores CYAN, MAGENTA, YELLOW existem na natureza, e a cor BLACK indica ausência de cor. A cor BLACK foi adicionada ao modelo devido às necessidades das indústrias de edição de documentos em papel. O modelo baseia-se na forma como a natureza cria as suas cores, reflectindo parte do espectro de luz e absorvendo outras. É um modelo subtractivo. As cores são criadas pela redução do efeito de outras, muito à semelhança de processamento analógico de fotos. É utilizado em impressoras. As zonas em branco indicam inexistência de tinta ou pigmentação. As zonas escuras indicam concentração de tinta. canal CYAN canal YELLOW canal MAGENTA canal BLACK 5
6 Modelo HSB HSB. A cor HSB é definida por 3 valores distintos: HUE, SATURATION e BRIGHTNESS. Baseia-se na percepção humana da cor (modelo de cor dos artistas plásticos). É representado por um sistema 3D de coordenadas polares. HUE. É a matiz ou cor. O seu valor varia entre 0 (vermelho), passando pelo laranja, amarelo, verde, azul, púrpura, e 359 (novamente vermelho). SATURATION. Fornece a vivacidade da cor. O seu valor é percentual entre 0 e 100%. O valor 0% indica inexistência de cor (ou branca) e o valor 100% indica cor normal (ou muito viva). BRIGHTNESS. Fornece o brilho da cor. O seu valor é também percentual, O valor 0% indica que a cor é muito escura (ou preta) e o valor 100% indica que é normal. HUE SATURATION BRIGHTNESS 6
7 Modelo de cor indexada COR INDEXADA. É um submodelo RGB. As cores de cada imagem são armazenadas numa paleta (palette), também chamada tabela de cores (color lookup table). As imagens GIF são, por definição, imagens indexadas. paleta de 256 cores paleta de 256 cores 7
8 Paletas (cor indexada) A escolha duma paleta pode alterar substancialmente o aspecto e o tamanho dos objectos gráficos da imagem. Paletas estandartizadas: paleta Windows (256 cores) paleta Macintosh (256 cores) paleta "Web-Safe" (216 cores comuns às paletas Windows e Mac) Os formatos de cor indexada (GIF e PNG) permitem a criação de paletas adaptativas que contêm um conjunto reduzido de cores duma imagem específica. 24-bit/millions of colors/28k Original TIFF image Canal Web This is what the original 24-bit image would look like on a monitor displaying 8-bit color (256 colors) 22 Web-Safe colors were found in the original 24-bit image 8
9 Bit -Depth/Number of Colors/File Size Image Palette (color table) 24-bit/millions of colors/28k Original TIFF image Conversion to Indexed Color 8-bits/256 colors/7k Note: this image was indexed (reduced to 256 colors) from an original 24 -bit image file (containing millions of colors) Adaptive palette of the 256 colors selected by the indexing process. 6-bits/64 colors/4k 64-color adaptive palette. 4-bits/16 colors/2k 16-color adaptive palette. 2-bits/4 colors/1k Note how much color detail was lost by reducing from 256 to 4 colors. 4-color adaptive palette. Web-Safe colors This is what the original 24 -bit image would look like on a monitor display ing 8-bit color (256 colors) 22 Web -Safe colors were found in the original 24 -bit image 9
10 Dithering Processo de fazer parecer muitas cores com poucas cores. Dithering um processo em que pixéis adjacentes de cores diferentes são usados para simular cores e sombras que, de facto, não existem na paleta de cores da imagem. Na realidade, dithering engana o olho" ao fazer ver cores que não estão lá. É utilizado quando uma imagem true color é reduzida a uma imagem indexada, por forma a compensar a perda de cor. The original 24 -bit/ 16+million-color image (5,443 bytes) The image reduced to 4 -bit/16- color, undithered (1,965 byte s) The image reduced to 4 -bit/16- color, dithered (3,411 bytes) Enlarged view of dithered image Notes: Although the third image looks as if it contains more/different colors than the second image, both images contain, in fact, the same 16 colors. As you ca n see in the fourth image, dithering produces visible artifacts, but the dithered image is clearly an improvement over the undithered version. Dithering does, however, increase the image file size. 10
11 Correcção Gamma Um CRT é inerentemente não-linear As alterações de visualização são baseadas na voltagem alimentadora. A visão humana é também não-linear A sensação de luminosidade é função potência da intensidade de luz (y=x w ) Surpresas agradáveis acontecem CRT não-linear tem uma relação próxima com a luminosidade humana inversa A codificação da intensidade num sinal com correcção gamma maximiza a percepção da imagem 11
12 Correcção Gamma (cont.) 12
13 Tipos de ficheiros de imagem digital GIF (Graphics Interchange Format) a cair em desuso PNG (Portable Network Graphics) JPEG (Joint Photographics Experts Group) TIFF (Tagged Image File Format) MPEG (Moving Picture Experts Group) 13
14 GIF GIF foi desenvolvido para transmissão de imagens através de linhas de comunicação de baixo débito (modems de 2 ou 4kbits/s ligados a linhas telefónicas de comutação digital). O formato GIF permite armazenar e transmitir imagens com um máximo de 256 cores definidas num mapa de cor indexada. Cada pixel tem um índice de cor; o conjunto de índices da imagem é comprimido pelo algoritmo LZW (Lempel- Ziv-Welch) sem perdas. Na transmissão, cada pacote leva os dados respeitantes aos pixéis duma scan-line; neste sentido, a transmissão pode ser a lógica do varrimento progressivo ou do varrimento entrelaçado. Suporta transparências (duma só cor) e animação. Um ficheiro GIF c/ animação codifica uma sequência de várias imagens. Caiu em desuso, em parte devido às royalties de patente a que esteve sujeito até Julho de Evolução: GIF87a, GIF89a Origem: Unysis Corp. Compuserve Pantente: Unysis Corp. 14
15 GIF Duas imagens candidatas ao armazenamneto em ficheiros GIF. Têm uma paleta limitada de cores, e as cores aparecem em aglomerados de pixéis com contornos bem definidos. Tipo de compressão: LWZ sem perdas (só elimina redundâncias) Formato pixelizado: 24 bits (3bytes), 1 byte por canal de cor Espaços de cor: RGB indexada Esta imagem GIF gerada a partir duma foto mostra as limitações do formato GIF quando na imagem é suposto existir uma gradação suave de cores. Neste caso, é melhor usar um ficheiro JPEG. 15
16 GIF: estrutura em blocos Blocos de controlo (Control Blocks) Header (cabeçalho) Logical Screen Descriptor Graphics Control Extension Trailer Blocos de Imagem (Image Rendering) Image Descriptor Color Table Table Based Image Data Plain Text Extension Blocos Especiais (Special Purpose) GIF format Byte Order: Little-endian GIF Header Offset Length Contents! 0 3 bytes "GIF"! 3 3 bytes "87a" or "89a"! 6 2 bytes <Logical Screen Width>! 8 2 bytes <Logical Screen Height>! 10 1 byte bit 0: Global Color Table Flag (GCTF)!!! bit 1..3: Color Resolution!!! bit 4: Sort Flag to Global Color Table!! bit 5..7: Size of Global Color Table: 2^(1+n)! 11 1 byte <Background Color Index>! 12 1 byte <Pixel Aspect Ratio>! 13? bytes <Global Color Table( x 3 bytes) if GCTF is one>!!? bytes <Blocks>!! 1 bytes <Trailer> (0x3b)! 16
17 GIF: estrutura (cont.) Ver descrição completa da estrutura do formato GIF em: Blocos de controlo (Control Blocks) Header (cabeçalho) Logical Screen Descriptor Graphics Control Extension Trailer Blocos de Imagem (Image Rendering) Image Descriptor Color Table Table Based Image Data Plain Text Extension Blocos Especiais (Special Purpose) Image Block Offset Length Contents! 0 1 byte Image Separator (0x2c)! 1 2 bytes Image Left Position! 3 2 bytes Image Top Position! 5 2 bytes Image Width! 7 2 bytes Image Height! 8 1 byte bit 0: Local Color Table Flag (LCTF)!!! bit 1: Interlace Flag!!! bit 2: Sort Flag!!! bit 2..3: Reserved!!! bit 4..7: Size of Local Color Table: 2^(1+n)!!? bytes Local Color Table( x 3 bytes) if LCTF is one!!1 byte LZW Minimum Code Size! [ // Blocks!!1 byte Block Size (s)!!(s)bytes Image Data! ]*!!1 byte Block Terminator(0x00)! 17
18 PNG (Portable Network Graphics) Surgiu como reacção às limitações técnicas (máx. 256 cores indexadas) e direitos de propriedade do formato GIF. Reteve algumas características vantajosas do formato GIF: cor indexada (ou baseada em paleta de cores) 2 possibilidades de visualização e transmissão: sequencial e entrelaçada. transparência parcial da imagem inclusão de informação textual e controlo da temporização de vsualização das imagens independência da plataforma de hardware e software compressão sem perda. Características adicionais: true-color (ou RGB) com resolução até 48-bits. em tons de cinzento transparências variáveis através de um canal alfa (1 ou 2 bytes por pixel ou por componente de cor) correcção gamma da cor em função do dispositivo de saída gráfica; compensação automática do brilho entre monitores PCs e Macs. detecção da corrupção de dados em todos os blocos da imagem maior rapidez do algoritmo de entrelaçamento Adam7 uso de algoritmos de compressão de domínio público com um grau de compactação maior em 5% a 25% do que o algoritmo LZW ordenação única dos bytes segundo a ordem de transmissão por rede (network byte order), sendo que os MSBs precedem os LSBs. Origem: Pública, Proprietário actual da especificação do PNG: nenhum. 18
19 PNG Limitações: Não suporta animação; a animação a la GIF é facultativa. Nem todos os browsers suportam completamente o formato PNG, em particular as características de transparência e correcção de brilho. Tipo de compressão: Algoritmo LZ77, de domínio público. Sem perdas (só elimina redundâncias) O mesmo usado pelos zip, gzip e pkzip Formato pixelizado: 24, 32, 48 bits por pixel c/ ou s/ transparências Esta imagem GIF usa uma paleta de 155 cores. O tamanho do ficheiro é de 5125 bytes. Esta imagem PNG usa uma paleta idêntica. O tamanho do ficheiro é de 4253 bytes. Espaços de cor: RGB indexada RGB true colour Tons de cinzento 19
20 PNG: estrutura em chunks (blocos) Chunk IHDR (13 bytes) largura, altura, profundidade de cor, modelo de cor, canal alfa, método de compressão, método de entrelaçamento Chunk gamma contém informação referente às sucesssivas correcções gamma a que a imagem foi sujeita Chunk PLTE mapa de cores indexadas Chunk text contém texto Chunk IDAT contém conteúdo das imagens há normalmente vários blocos IDAT Chunk glfg facultativo, pois é um bloco de extensão à definição do formato PNG; serve para animações simples semelhantes às do formato GIF. Chunk IEND indica fim-de-ficheiro Imagem de cor (paleta) entrelaçada. Detalhes técnicos reportados pelo pngcheck 1.95: File: nurbcup2si.png! chunk IHDR at offset 0x0000c, length 13! 350 x 208 image, 8-bit colormap, interlaced! chunk gama at offset 0x00025, length 4: ! chunk PLTE at offset 0x00035, length 711: 237 palette entries! chunk text at offset 0x00308, length 56, keyword: Software! chunk IDAT at offset 0x0034c, length 8192! chunk IDAT at offset 0x02358, length 8192! chunk IDAT at offset 0x04364, length 8192! chunk IDAT at offset 0x06370, length 8192! chunk IDAT at offset 0x0837c, length 575! chunk time at offset 0x085c7, length 7: 14 Aug :23:35 GMT! chunk IEND at offset 0x085da, length 0! No errors detected in nurbcup2si.png.! 20
21 JFIF (JPEG File Interchange Format) JPEG não é um formato de imagem. JPEG (ISO ) é uma família de algoritmos normalizados de compressão/ descompressão, com e sem perdas, para imagens de qualidade fotográfica, também designadas por imagens de tons contínuos. JPEG é a sigla do Joint Photographics Experts Group, oficialmente designado por Joint Committee ISO/IEC JTC1 SC 29 Working Group 1. JFIF é um formato de imagem que usa os algoritmos JPEG, e é por isso que é também conhecido por formato JPEG. Grande aceitação na web em detrimento dos GIFs que só transmitem imagens com um máximo de 256 cores. Profundidade de côr: até 24 bits. Tira vantagem das limitações do sistema de visão humana por forma a atingir elevadas taxas de compressão. Ao criar um ficheiro JPEG, podemos escolher um nível baixo ou elevado de compressão. Um nível baixo implica maior qualidade de imagem, mas também um tamanho maior do ficheiro. Origem: Eric Hamilton, C- Cube Microsystems. Proprietário actual da especificação do JFIF: ISO (International Standards Organization). 21
22 JFIF Esta imagem tem variações graduais de cor. Aplicabilidade: Imagens com variações graduais de cor ou tonalidade; por exemplo, fotografia. Limitações: Esta imagem altamente comprimida surge com lixo de pigmentação em torno dos contornos de aglomerados de cor azul. Degradação visível em imagem com contornos bem definidos, quando sujeita a elevados níveis de compressão. Tipo de compressão: DCT (transformada discreta de coseno), derivada da transformada de Fourier A compressão processa grupos de 8x8 pixéis em cada componente de cor. Com perdas Formato pixelizado: 24 bits por pixel Não usa mapas de cor indexada Entrelaçamento: não Espaços de cor: YCbCr Não usa RGB 22
23 JFIF: estrutura em segments (blocos) Segment SOI (2 bytes) início do ficheiro Segment APP0 Identificador do tipo de ficheiro, versão, unidades de medida em X e Y, densidade de pixéis em X e Y, thumbnails, etc. Segments DQT Contém os valores duma das tabelas usadas na quantização da cor (antes da compressão) de uma componente (Y, Cb ou Cr) Segment SOF0 Descreve os principais parâmetros da imagem: precisão de bit por cada componente de cor (8), altura e largura da imagem em pixéis, etc. Segment DHT contém uma tabela de Huffman usada na compressão de imagem Segment SOS contém o conteúdo (comprimido) da imagem Segment EOI (2 bytes) fim-de-ficheiro?!? Detalhes técnicos reportados pelo jpegchecker?: 23
24 TIFF (Tag(ged) Image File Format): Flexível e independente da plataforma, sendo suportado por muitas aplicações de processamento de imagem. Por ter sido desenhado por engenheiros, de impressoras, scanners e monitores, este formato suporta vários espaços de cor: Grayscale Pseudocolor (any size) RGB YCbCr CMYK CIELab Possibilita a decomposição da imagem em tiles em vez de scanlines, sendo assim possível o acesso mais eficiente a imagens muito grandes que foram comprimidas. Teoricamente, suporta imagens com várias bandas (até 64K bandas), número arbitrário de bits/pixel, várias imagens/ficheiro incluindo thumbnail subsampled images. Origem: Aldus Corp. (1980) Microsoft Corp. Proprietário actual da especificação do TIFF (copyright): Adobe Systems Inc., após absorção da Aldus Inc. 24
25 TIFF Limitações: Não pode guardar imagens vectorizadas, nem anotações de texto,etc. Utiliza 4-byte integer file offsets; consequências: (1) tamanho máximo dum ficheiro é 4GB e (2) um ficheiro não é facilmente streamable como um JPEG. Flexibilidade e compatibilidade? MSB ("Motorola") and LSB ("Intel") byte order data podem ser armazenados com um header que indica qual é a ordem usada; consequência: é fácil implementar um escritor TIFF, mas é difícil implementar um leitor TIFF. Tipos de compressão: raw uncompressed PackBits Lempel-Ziv-Welch (LZW) CCITT Fax 3 & 4 JPEG (see below) Formatos pixelizados: 1-64 bit integer, signed or unsigned 32 or 64 bit IEEE floating point Espaços de cor: vários 25 FIM
Imagem tipo Bitmap. Introdução. Arquivos Gráficos. Arquivos Gráficos. Há dois métodos básicos de se representar uma imagem
Arquivos Gráficos Arquivos Gráficos Introdução Imagem tipo Bitmap Há dois métodos básicos de se representar uma imagem A imagem é subdividida pequenas áreas denominada pixels (picture elements) Bitmap
Aplicativos Web. Autor: Prof. Willamys Gomes Fonseca Araújo willamys.araujo@ifce.edu.br
Aplicativos Web Autor: Prof. Willamys Gomes Fonseca Araújo willamys.araujo@ifce.edu.br Sumário 1 PLANEJAMENTO DE INTERFACE DE USUÁRIO... 3 1.1 O que seria Interface?... 3 1.2 Por que estudar Interfaces?...