CMPT 165 Unit 5: Graphics Part 1 - Simon Fraser University › CourseCentral › 165 › lisat › lectures › ... · 2015-11-01 · RGB Model & Colour Depth •Additive model: 3

CMPT 165 Unit 5: Graphics – Part 1

Oct. 27th, 2015

Admin

• Today’s 6-7pm office hours moved to Thurs. instead

• Schedule coming up:

– Next class: Colours + go through Unit 6

– Return to Unit 5 (Graphics) - Part 2 next Tues.

– Rationale:

• Give you time to get concepts fully understood (via office hours, read through S.G., etc.)

• Can start A2 (ideas on Unit 6) asap

PNG ?

3

JPG GIF TIF

BMP …

Agenda items

• File formats

– Pro’s and Con’s

• Terminologies & Concepts:

– Image resolution

– Colour-depth

– Colour dithering

– Compression

4

File formats for storing graphics

Today we’ll focus on these:

• GIF

• JPEG

• PNG

• …

Each format uses different strategies to store image data

…But what is image data?

5

Bit ?

6

Bit: data unit (recap)

• Binary digit

• 2 states/levels: 0 or 1

• Q: 2 bits, how many levels can one get? – A: 2 x 2 = 4 levels

• Q: 3 bits, how many levels? • A: 2 x 2 x 2 = 8 levels

• Q: 8 bits, how many? – A: 2 x 2 x 2 x 2x 2 x 2 x 2 x 2 = 28 = 256 levels

– 8 bits = 1 byte

– 1 byte of storage: we can store 256 possible colours using 1 byte of data

px ?

8

Pixels • Picture elements (element: a unit of an image) • Measurement unit for images: px (pixel) • E.g.

– Take screenshot of “We ha” (PrtScn button on keyboard) – When zoomed it, one sees a grid of pixels:

• Each pixel emits an amount of intensity (FYI: in physics, defined as amount of power transmitted through a surface) – High vs. low – “Strong” vs. “weak”, “bright” vs. “dark”

9

Low intensity High intensity

Image resolution • Refers to total number of pixels an image has

– Represented as # of pixel columns by # of rows (width X height)

– Historically:

• High resolution: 1024 X 765 pixels

• Lower resolution: any thing less

– e.g.

• Higher resolution larger file size

• Unit of file size: bytes (kilo-, mega-, giga-, tera)

– E.g. 8MP camera

MP: mega-byte pixel 1 Mega = 106

– Photo size: 3,264 x 2,448 pixels

(3,264 x 2,448) pixels x 1 bytes/pixel

= 7,990,272 bytes ~8 MB

10

https://upload.wikimedia.org/wikipedia/commons/f/f2/Resolution_illustration.png

Bytes Conversion

1024 byte 1 KB (Kilo)

1024 KB 1 MB (Mega)

1024 MB 1 GB (Giga)

1024 GB 1 TB (Tera)

1024 TB 1 PB (Peta)

FYI:

Aspect ratio • Remains if you scale equally in both width and height

• If not respected, you get distorted images; e.g.:

Scaled (multiply) by ½: 512px X 382 px

Original image resolution of 1024px X 764px

L. Tang ©

Pixelation • Artifacts you see when you “zoom in”

• There are countless computer algorithms to address this problem

– Learn about them in, e.g., these courses:

• Image processing (CMPT 419 )

• Computer graphics (CMPT 361) 12

Remember this notation???

f(x)

x: an input variable

f is a function that

outputs another variable, given an input

e.g. f(x) = x2+1

Pixels • Each pixel is indexed by x-, y- coordinates

• Denote with the function notation (input,output):

– Image f is a function of (x,y) coordinates; i.e. given an input of coordinates (x,y), it outputs a colour (#000)

– E.g. f(0,0) = #FFF (white) f(20,17) = #FA0 (orange)

14

f(0,0)=“white colour”

f(20,17)

f(x,y) = #000

Each pixel refers to colour info, i.e. not coordinates!

Examining pixels in an image editor

15

Storing images

• Pixel: intensity value of a light source

• Each pixel has (x,y) coordinates

• Image: grid of pixels

• Using fewer bits to store each pixel is desirable…

– Why? Smaller file size!

• How to store these info?

– Depends on file format: • Choice of colour model & colour-depth

• Compression scheme (to reduce file size)

• … 16

RGB Model & Colour Depth • Additive model: 3 channels of Red, Blue, Green

• Colour-depth: number of bits to represent a pixel

• In CSS, we can specify with a 24-bit colour code:

e.g. #FFF = # FFFFFF

• In actual files, depends on format used:

– Some formats use 5 bits to encode each channel: 2(5x3) = 215

– Some formats only use 8-bit for all 3 channels: 2(8) = 256

17

Q: why it’s called 24-bit? A: store 8 bits/channel (8 bits x 3 channels)

Each digit gives 16 levels 2 digits give 16x16=256 levels

Storing colours

18

24-bit (256 X 256 X 256 colours) 4-bit colour:

4-bit colour (24=16 shades) 1-bit?

known as monochrome

(mono=1, chrome=colour)

…Can be any colour

Examples from https://en.wikipedia.org/wiki/Dither

colour-depth of 7-bit colourmap of 128 choices:

16 shades 8 shades

https://upload.wikimedia.org/wikipedia/commons/d/d1/Atari2600_NTSC_palette.png

Examples

19 Images from https://upload.wikimedia.org/wikipedia/commons/d/d1/Atari2600_NTSC_palette.png

colour-depth of 8-bit colourmap of 256 choices:

Examples

20

https://upload.wikimedia.org/wikipedia/commons/9/93/256colour.png

32 shades

8 shades

Images from https://upload.wikimedia.org/wikipedia/commons/d/d1/Atari2600_NTSC_palette.png

1 1 1 1 1 1 1 1 1 1

1 1 1 1 1 1 1 1 1 1

1 1 1 1 1 1 1 17 17 17

1 1 1 1 1 1 1 17 29 29

Indexed colour

1 1 1 1 1 1 1 1 1 1

1 1 1 1 1 1 1 1 1 1

1 1 1 1 1 1 1

1 1 1 1 1 1 1

21

https://upload.wikimedia.org/wikipedia/commons/9/93/256colour.png

1st index 29th index 17th index

Size/quality trade-off

• Fewer bits to store each pixel

smaller file size

quality suffers

• Methods to deal with this trade-off:

– Colour-dithering

– Compression

22

GIF JPEG PNG

Colour depth 8-bit 24-bit or 8-bit 24-bit

Colour dithering

• Use of special patterns that might involve interlacing a number of colours to allow for perception of additional colours not actually used

• Allows viewer to perceive more colours

– E.g. By interlacing only black + white, one can perceive grey when zoomed out:

23

Colour dithering

24

24-bit (256 X 256 X 256 colours)

1-bit with dithering:

Examples from https://en.wikipedia.org/wiki/Dither

Colour dithering

25

24-bit (256 X 256 X 256 colours)

4-bit with dithering:

Examples from https://en.wikipedia.org/wiki/Dither

Size/quality trade-off

• Fewer bits to store each pixel

smaller file size

quality suffers

• Methods to deal with this trade-off:

– Colour-dithering

– Compression

26

Compression • A method to reduce file size

– Many compression algorithms (computer programs) exist

– Algorithms work by exploiting some properties of the image

• E.g. leverage redundancies in pixels

• Rather than store X-bit of data for every pixel, save this info instead: “Ten 1’s in first 2 rows”…

L. Tang © L. Tang ©

Compression • Compression ratio:

FILESIZE_BEFORE : FILESIZE_AFTER

– Higher generally preferred… more compact

• 2 categories:

1. Lossless: no loss of data

2. Lossy: involves loss of data…

• Achieves higher compression ratio …

• At expense of lower image quality

28

GIF JPEG PNG

Compression Lossless compression Lossy compression Lossless compression

You may choose compression ratio (% of original file size)