MULTIMÍDIA

Prof. Diógenes C. Furlan

Obra: “Old Couple or Musician”, de Salvador Dali
• Uma imagem digital 2D é apresentada sob a
forma de uma matriz de pontos;
• O tamanho da imagem é dado pela quantidade
de pontos com os quais esta imagem é
apresentada (formada);
• Os pontos são chamados de pixels – Picture
Elements (elementos de imagem)
 DIGITALIZAÇÃO
IMAGEM ORIGINAL
(17 X 17 pixels)
• A resolução de uma imagem é dada pela
quantidade de pontos por unidade de medida de
espaço (centímetro, por exemplo);
• Quanto maior a quantidade de pontos por
unidade de espaço, maior é a resolução;
• Duas imagens com mesmo tamanho físico
podem ser digitalizadas com resoluções
diferentes.
MENOR RESOLUÇÃO MAIOR RESOLUÇÃO
(20 x 20 pixels) (40 X 40 pixels)
• O sistema métrico decimal não é utilizado para
medir resolução de imagem;
• É utilizado o sistema imperial (polegada);
• Para expressar a resolução de uma imagem,
utiliza-se a unidade/expressão “dots per inch”
(pontos por polegada) ou na forma abreviada:
dpi.
• Uma imagem que possui resolução de 200 dpi é uma
imagem que, para cada polegada, foi “fatiada” 200
vezes para ter sua representação digital
• DPI (dots per inch)
• associado à “qualidade” de impressão
• scanner, impressora
• mundo real
• PPI (pixels per inch)
• associado à “qualidade” de reprodução de imagens em
displays
• monitores
• mundo virtual
• Largura do arquivo digital: 1.920 pixels
• Altura do arquivo digital: 1.080 pixels
• Total: 2.073.600 pixels

Resolução Largura Altura Dispositivo

72 DPI 67,73 cm 38,10 cm TV
150 DPI 32,51 cm 18,29 cm
300 DPI 16,26 cm 9,14 cm Celular
720 DPI 6,77 cm 3,81 cm
• Com a popularização das máquinas fotográficas
digitais também emergiu outra unidade para
designar o tamanho e resolução de uma imagem
digital: o megapixel.
• Por exemplo: do que se trata uma imagem de
108 megapixels?
• uma imagem composta por 108 milhões de pixels
• 12.000 x 9.000 pixels = 108.000.000 pixels
 Samsung Galaxy S22 Ultra:
16.000 x 12.500 pixels =
200.000.000 pixels =
200MP (megapixels)

Esta imagem:
40 x 40 = 1600 pixels =
1,6 kilopixels
• Sabendo-se que uma imagem é uma matriz de
pontos, é necessário entender como as cores
são representadas nesta matriz;
• As imagens digitais possuem padrões
específicos de colorização que estão
relacionados diretamente com a quantidade de
bits que são utilizados para representar um pixel;
• A este conceito denomina-se profundidade de
cor.
• Black and White: 1 bit por pixel
• Ligado/Desligado → o parser escolhe as cores
• Grayscale (escala de cinzas): 8 bits (1 byte)
por pixel
• Até 256 tons (0 a 255) de luminosidade do pixel
• Paletted (palheta de cores): 8 bits por pixel
• Até 256 cores: a informação da cor é informada no
header do arquivo
• RGB (true color): 24 bits por pixel
• 8 bits (1 byte) para cada cor da tríade RGB;
• 256 x 256 x 256 = 16 milhões de cores
• CMYK (true color): 32 bits por pixel
• 8 bits (1 byte) para cada cor da composição CMYK;
• 256 x 256 x 256 x 256 = 4 bilhões de cores
• Além da informação de cor, alguns formatos
bitmap podem trazer uma informação a mais
para cada pixel: o nível alpha.
• Sendo uma informação de 8 bits (1 Byte), o
canal alpha indica qual o nível de
transparência/opacidade do pixel em questão;
• Um formato bastante difundido entre diferentes
plataformas que trabalha com esta informação é o
PNG – Portable Network Graphics.
Tipos de Imagens
 (2,2) (3,2) (4,2) (5,2) (6,2) (7,2)
(8,2) (5,3) (5,4) (5,5) (5,6) (5,7)
(5,8) (5,9)
Dados em bitmap: 14 bytes.

Traçar linha de (2,2) até (2,8)

Traçar linha de (5,3) até (5,10)

Dados em vetorial: 8 bytes.

• Bitmap:
• Grande número de cores;
• Fotografias.

• Vetorial:
• Traçado de linhas;
• Polígonos;
• Uso de cores limitado;
• Desenho técnico e logotipos.
 Vetorização
Raster Vector
• BMP • SVG
• PNG • CDR
• GIF • EPS
• JPG • PDF
• TIFF • CGM
• RAW • DXF
• ICO • DPX
• DWG • AI
Rasterização
• Scalable Vector Graphics
• Gráfico
• linhas, polígonos, figuras, texto, filtros, efeitos
• Escalável
• zoom eficiente e rápido
• pode ampliar e reduzir sem perder qualidade
• Vetorial
• armazena a equação dos gráficos (e não um mapa de
pixels como imagens bitmap)
• imagens maiores ocupam mesmo espaço que imagens
menores, e não perdem qualidade
• Tudo expresso em XML:
• Pode ser alterado em editor de textos
• Pode ser processado como texto
• Pode ter a aparência de objetos alteradas com CSS
• Pode ser validado com XML Schema
• Pode ser embutido em HTML como texto
• Qualquer elemento pode ser animado
• Elemento raiz
• <svg>
• Namespace
• http://www.w3.org/2000/svg
• Um gráfico SVG muito simples:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%">
<circle r="50" cx="100" cy="100" fill="green"/>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="100" height="100">
<rect x="10" y="10" width="80" height="80"
stroke="black" stroke-width="2" fill="blue" />
</svg>
Dúvidas?
1. Quantos bytes requer para ser armazenada uma imagem:
a) de 32 x 24 pixels, com true color?
b) de 128 x 128 pixels, com 64 níveis de cinza
c) 1024 x 768, preta e branca

2. Qual é a maior imagem (dimensões) que eu posso guardar

em 1 Megabyte?
a) True color?
b) Com 256 cores?
c) Preto e branco
3. Faça uma imagem SVG, como mostrado na
aula. Por exemplo, você pode tentar fazer um
logo como o da Microsoft ou da Apple.
4. (PRÁTICA) Pegue uma imagem colorida HD ou Full
HD na Internet (ou outra resolução grande). É ideal que
a imagem seja BMP ou PNG. Anote seu tamanho em
bytes. Vá fazendo divisões por 2 no seu tamanho, até
obter uma imagem pequena (32x24 pixels, por
exemplo) (use o Paint). Anote seus tamanhos e
compare-os.
5. Faça observações visuais das imagens. Em qual
resolução ela perde a nitidez?

Entrega: https://forms.gle/jA1QEEiyT6fTmnWt5