2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

60
Multimídia Imagem Digital - Bitmaps 2014 Prof. Willian Magalhães [email protected]

Transcript of 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Page 1: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

MultimídiaImagem Digital - Bitmaps

2014

Prof. Willian Magalhã[email protected]

Page 2: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Bitmaps

Page 3: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

• Bitmap é um termos em inglês que traduzido para o português significa mapa de bits

• Imagens bitmaps também são conhecidas como imagens raster

Bitmap = Mapas de Bits = Raster

[email protected]

Bitmaps

Page 4: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Bitmaps

Page 5: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Características

• Geralmente corresponde a imagens fotográficas

[email protected]

Bitmaps

Page 6: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Características

• Imagens do tipo bitmap são formadas por uma matriz de pontos

• Cada posição da matriz corresponde a uma cor / um ponto da tela

• O número de bits que um pixel contem determina o intervalo de cores que este pode representar

[email protected]

Bitmaps

Page 7: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Bit?

Page 8: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Unidades de Medida

Unidade Equivalência Símbolo

Bit Menor unidade de medida ( 0 e 1 )

Byte 8 bits B

Kilobyte 1024 Bytes KB

Megabyte 1024 Kilobytes MB

Gigabyte 1024 Megabytes GB

Terabyte 1024 Gigabytes TB

Page 9: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Profundidade

Page 10: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

• A cor de um pixel depende do número de bits disponíveis para armazena-la

• Este número de bits também é conhecido como pixel depht (profundidade do pixel)

[email protected]

Profundidade

Page 11: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

[email protected]

Profundidade

1 bit 4 bits 8 bits 24 bits

Page 12: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

12

Imagem com 1 bit

21 = 2 cores possíveis

Profundidade

Page 13: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Imagem com 4 bits

24 = 16 cores possíveis

13

Profundidade

Page 14: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Imagem com 8 bits

28 = 256 cores possíveis

14

Profundidade

Page 15: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Imagem com 24 bits

224 = 16,8 milhões de cores possíveis

15

Profundidade

Page 16: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Como calcular?

• Imagem com 4 bits de profundidade

[email protected]

Profundidade

2Cores possíveisVariações de um bit

(zero ou um)

Quantidade de bits do pixel

4 = 2x2x2x2 = 16

Page 17: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Podemos concluir que...

• Quanto mais bits, mais cores na imagem

• Quanto mais cores, mais informações

• Quanto mais informações, maior tamanho físico

[email protected]

Profundidade

Page 18: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Tamanho físico

Page 19: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Tamanho físico

[email protected]

Profundidade

1 bit = 2 coresTamanho físico 58,5kb

24 bits = 16,8 milhões de coresTamanho físico 1,37mb

Page 20: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Calculo tamanho físico (sem compressão)

• (640 x 480 x 1bit) / 8 = 38.400 bytes

• (800 x 600 x 8bits) / 8 = 480.000 bytes

• (1024 x 768 x 24bits) / 8 = 2.359.296 bytes

[email protected]

Profundidade

𝐵𝑦𝑡𝑒𝑠=𝐿𝐴𝑅𝐺𝑈𝑅𝐴 𝑥 𝐴𝐿𝑇𝑈𝑅𝐴𝑥 𝐵𝐼𝑇𝑆

8

Page 21: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Unidades de Medida

Unidade Equivalência Símbolo

Bit Menor unidade de medida ( 0 e 1 )

Byte 8 bits B

Kilobyte 1024 Bytes KB

Megabyte 1024 Kilobytes MB

Gigabyte 1024 Megabytes GB

Terabyte 1024 Gigabytes TB

Page 22: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Resolução

Page 23: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

• A resolução de uma imagem bitmap está relacionada à quantidade pixels que a imagem contém

• Em imagens digitais a resolução é medida em megapixels

[email protected]

Resolução

Page 24: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Megapixel

Page 25: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

• Unidade de medida utilizada em câmeras digitais

• Determina o grau da resolução / definição de uma imagem

• Um megapixel corresponde a 1.000.000 (um milhão) de pixels

[email protected]

Megapixel

Page 26: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Calculo Megapixel

[email protected]

Megapixel

LARGURA (px)

ALTURA(px)

𝐿𝐴𝑅𝐺𝑈𝑅𝐴 (𝑝𝑥 ) 𝑥 𝐴𝐿𝑇𝑈𝑅𝐴(𝑝𝑥 )1.000 .000

=𝑀𝑒𝑔𝑎𝑝𝑖𝑥𝑒𝑙

700𝑥 7001.000 .000

=0,49𝑚𝑒𝑔𝑎𝑝𝑖𝑥𝑒𝑙𝑠

Page 27: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Megapixel na prática

Page 28: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Samsung Galaxy SIII

• Especificação no site do fabricante

Megapixel na Prática

[email protected]

Page 29: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Nokia Lumia 1020

• Segundo o site Tudo Celular o smartphone Lumia 1020 da fabricante Nokia é capaz de capturar imagens com as dimensões de 7152x5368 pixels.

Megapixel na Prática

Page 30: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Nokia Lumia 1020

• Segundo o site Tudo Celular o smartphone Lumia 1020 da fabricante Nokia é capaz de capturar imagens com as dimensões de 7152x5368 pixels.

Megapixel na Prática

Qual a resolução desta câmera?

Page 31: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

E a resolução dos televisores?

Page 32: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

• NTSC – 720x480 pixels

• PAL – 768x576 pixel

• HDTV – 1280x720 pixels

• HDTV FullHD – 1920x1080 pixels

• UHDTV 4K – 3840x2160 pixels

• UHDTV 8K – 7680x4320 pixels

Resolução - Televisores

[email protected]

Page 33: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

[email protected]

Proporção das Resoluções

Page 34: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Densidade

Page 35: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

• É uma medida relacionada à composição de imagens

• Geralmente medida em :

• DPI – Dots Per Inch / Termo em inglês

• PPP – Pontos Por Polegada / Termo em português

Densidade

[email protected]

Page 36: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

• Expressa o número de pontos individuais que existem em uma polegada linear na superfície onde a imagem é apresentada

Densidade

1” = 2,54

10 DPI

1” = 2,54

20 [email protected]

Page 37: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

É possível classificar as imagens de acordo com sua densidade (DPI), da seguinte maneira:

• Pontos por polegada - imagens gravadas em algum suporte por uma impressora (ex. papel)

• Pixels por polegada - imagens apresentadas em monitores de vídeo

Densidade

[email protected]

Page 38: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Padrões

• 72 dpi para exibição

• 300 dpi para impressão

Densidade

[email protected]

Page 39: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Compressão de imagens

Page 40: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

• Métodos específicos

Compressão de Imagens

BMP 2,301kb GIF 82kb JPG 251kb PNG 279kb

[email protected]

Page 41: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

.BMP

• Formato de codificação adotado pela Microsoft

• Utilizado para armazenamento de imagens em memória

• Gera arquivos não compactados

Principais Formatos

[email protected]

Page 42: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

.GIF

• Abreviação de (Graphics Interchange Format)

• Desenvolvido pela CompuServ para transmissão de imagens por linhas discadas

• Utiliza codificação LZW para compressão de imagens

Principais Formatos

[email protected]

Page 43: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

.GIF

• Suporte a fundos transparentes

• Suporte a animações

• Imagens com 8 bits de profundidade

• Utiliza apenas 256 cores

• Algoritmo de compactação proprietário

Principais Formatos

[email protected]

Page 44: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

.GIF

Principais Formatos

[email protected]

Page 45: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

.PNG

• Portable Network Graphics

• Surgiu em 1996 como substituto ao GIF

• Formato livre

• Permite compressão de imagens sem perda de qualidade

• Formato recomendado pelo W3C

Principais Formatos

[email protected]

Page 46: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

.PNG

• Suporta fundos transparentes

• Não suporta animações

Principais Formatos

[email protected]

Page 47: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

.PNG

Principais Formatos

[email protected]

Page 48: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

.JPG

• Método para comprimir fotografias

• Padrão utilizado nas câmeras digitas domesticas

• Profundidade de 8 a 24 bits

• Extensões utilizadas JPG ou JPEG

Principais Formatos

[email protected]

Page 49: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Sistemas de Cores

Page 50: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Existem diversos sistemas para se obter cores

• RGB

• CMYK

• HSB

• Lab

• Entre outros

Sistemas de Cores

[email protected]

• RGB

• CMYK

Page 51: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Sistema RGB

• Utilizado em dispositivos eletrônicos como:

• Monitores

• TV

• Projetores

• Câmeras digitais

Sistemas de Cores

[email protected]

Page 52: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Sistema RGB

• O padrão RGB é composto da união das três cores primárias

• RED - Vermelho

• GREEN - Verde

• BLUE - Azul

Sistemas de Cores

[email protected]

Page 53: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Sistema RGB

• No sistema RGB cada pixel é formado através de porções de cada uma das cores

Sistemas de Cores

[email protected]

Page 54: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Sistema RGB

Sistemas de Cores

[email protected]

Page 55: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Sistema RGB

• Neste sistema o intervalo de cada cor pode ser representado de diversas maneiras

• Entre 0 e 1

• Entre 0 e 100 (percentual)

• Entre 0 e 255

• Entre 00 e FF (hexadecimal)

Sistemas de Cores

[email protected]

Page 56: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Sistema CMYK

• Sistema utilizado em impressoras

• Baseado na mistura de tinta sobre o papel

Sistemas de Cores

[email protected]

Page 57: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Sistema CMYK

• O padrão CMYK é composto da união das cores seguintes:

• CYAN - Ciano

• MAGENTA - Magenta

• YELLOW – Amarelo

• BLACK - Preto

Sistemas de Cores

[email protected]

Page 58: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Sistema CMYK

• Nem todas as cores vistas no monitor podem ser conseguidas na impressão

Sistemas de Cores

[email protected]

Page 59: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

• PAULA FILHO, Wilson de Pádua. Multimídia: Conceitos e Aplicações. 1ª ed. Rio de Janeiro: LTC, 2000.

• Slides Prof. Rodrigo Rocha. Disponível em: <http://www.bolinhabolinha.com> Acesso em janeiro de 2104

• Apostila Prof. Alexandre C. B. Ramos. Disponível em: <http://www.ebah.com.br/content/ABAAAAQWAAI/apostila-sistemas-multimidia> Acesso em janeiro de 2104

Referências

Page 60: 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

• Samsung. Galaxy SIII. Disponível em: <http://www.samsung.com/br/consumer/cellular-phone/cellular-phone-tablets/smartphones/GT-I9300RWPZTM-spec> Acesso em março de 2014

• Tudo Celular. Nokia Lumia 1020. Disponível em: <http://www.tudocelular.com/Nokia/fichas-tecnicas/n2485/Nokia-Lumia-1020.html> Acesso em março de 2014

Referências