Representing Representing ImagesImages

Goals for Image Goals for Image RepresentationRepresentation

digitization & resolutiondigitization & resolution

representing colorrepresenting color

color depth (bits per pixel)color depth (bits per pixel)

image compression (lossy vs lossless)image compression (lossy vs lossless)

Picture is represented by “dots”, Picture is represented by “dots”, or or pixels pixels (picture elements).(picture elements).

Other examples: Other examples: • newsprintnewsprint• televisiontelevision• computer computer monitor.monitor.

More dotsMore dots = higher = higher qualityquality = higher = higher resolutionresolution

(ppi = (ppi = pixels/inch)pixels/inch)

Digitization examplesDigitization examples

Place grid over image; color square Place grid over image; color square if more than half is black.if more than half is black.

Digitization examplesDigitization examples

Place grid over image; color square Place grid over image; color square if more than half is black.if more than half is black.

etc..

Typical Typical resolutions…resolutions…

225 x 225 pixels (small image)

854 x 480 and higher

1920 x 1080 and

~ 100 ppi (i.e., 100x100)

300dpi + details…

12 12 megapixelsmegapixels

Space considerationsSpace considerations

Why not use highest resolution (best Why not use highest resolution (best quality)quality)

Tradeoff between quality and space Tradeoff between quality and space (file size on disk; time to transmit (file size on disk; time to transmit over network)over network)

100 x 100 = 10,000 bits, but100 x 100 = 10,000 bits, but 200 x 200 = 40,000 bits, and200 x 200 = 40,000 bits, and 300 x 300 = 90,000 bits300 x 300 = 90,000 bits SPACE GROWS QUADRATICALLY: n x n = SPACE GROWS QUADRATICALLY: n x n = nn22

Color RepresentationColor Representation

What kind of images can we What kind of images can we create if we use 1 bit per create if we use 1 bit per pixel?pixel?

How can we get more colors?How can we get more colors?

Color RepresentationColor Representation

IDEA: represent a pixel with 3 bits:

000 = no dot lit (black)111 = R, G, B lit (white light) 100 = R lit (pure red)110 = R, G lit (yellow light)

Each pixel has 3 color dots: RGB: the three primary colors

of light.

PROBLEM: only allows 8 different pixel colors

3-bit color(8 colors)

dithering

Dithering: to create the illusion of different colors in a region, use different colored pixels.

E.g., orange = alternate red and yellow pixels

Color Depth Color Depth (also “Bit Depth”)(also “Bit Depth”)

Allocate more bits for each of R, G, B to describe amount of light (intensity) for each color.

6-bit color depth:01 11 00 = intensity 1 for redintensity 3 for greenintensity 0 for blue

Allows for ______________ different colors

what is code for pink?

26 = 64

“True color” = 24 bits = 8 bits/colormillions of colors: more than eye can discern

Indicate RGB by 3 (decimal) numbers between 0 and 255

[example: 102, 223, 46 ]

OR by 6 hex values = 2 per color = 8 bits/color)

[example: 66DF2E]

Color DepthColor Depth

Color CubeColor CubeR, G, B are three axes of a R, G, B are three axes of a three-dimensional “cube” of three-dimensional “cube” of colorcolor

http://www.draac.com/colorcube.html

Color Depth & QualityColor Depth & Qualityhttp://en.wikipedia.org/wiki/Color_depth

1 bit

4 bits

8 bits

24 bits

Space considerationsSpace considerations Quality depends on:

resolution, color depth.

Space required depends on:resolution, color depth.

Bits Needed = num pixels x bits/pixel

e.g. 600x600, truecolor --> 6002 x 24= 8,640,000 bits= 1,080,000 bytes= 1.08 Mb file (.bmp)

More on Resolutions….More on Resolutions….

http://www.earthboundlight.com/phototips/printer-resolution.html– resolutions greater than 300dpi refer resolutions greater than 300dpi refer to individual color dots used to make to individual color dots used to make up a single pixel.up a single pixel.

http://www.earthboundlight.com/phototips/digital-versus-film-resolution.html– ““grain size” for film comparable to grain size” for film comparable to resolution on high-end digital camera resolution on high-end digital camera (about 5 microns).(about 5 microns).

http://www.hdtvinfoport.com/HDTV-Resolution.html– sdtv versus hdtv (various versions)sdtv versus hdtv (various versions)

CompressionCompression Run-length encoding of image: lossless

.gif works by reducing 24 bit color by rounding to 256 colors (8 bits total per pixel) derived from the image, then using LZ compression. Good for drawings, images without great color depth.

.jpg (too complex to describe here) advantages over gif: many colors (note: uses Huffman coding)

Pros and cons: gif good for sharp lines, bad for good color. jpg good for photographs.

.gif and .jpg are lossy compression techniques.

Vector-based Vector-based representationsrepresentations

(as opposed to “bit-map” = .bmp, .gif, .jpg)(as opposed to “bit-map” = .bmp, .gif, .jpg) Store equations of lines, edges, Store equations of lines, edges, regionsregions

Very efficient for geometric contentsVery efficient for geometric contents Scales beautifullyScales beautifully Scalable fonts without jaggiesScalable fonts without jaggies Flash filesFlash files Disadv: hard to obtain directly from Disadv: hard to obtain directly from scanned images, hard to edit pixel-scanned images, hard to edit pixel-wisewise

http://www.cambridgeincolour.com/tutorials.htm

VideoVideo Video = many, many, many, many imagesVideo = many, many, many, many images Typical 30 frames per second.Typical 30 frames per second. Space requirement is simply:Space requirement is simply:

(space per image) x (#seconds) x 30(space per image) x (#seconds) x 30Example: 600 x 600 truecolor image = 1.08 MbExample: 600 x 600 truecolor image = 1.08 MbThus, roughly 30Mb per second.Thus, roughly 30Mb per second.

5400 seconds in a 90 min video5400 seconds in a 90 min video 5400 x 30Mb = 162000 Mb = 162Gb5400 x 30Mb = 162000 Mb = 162Gb

(without compression)(without compression)DVD capacity 4.7Gb. Blue Ray 50 GbDVD capacity 4.7Gb. Blue Ray 50 GbSpecial temporal compression techniques used for Special temporal compression techniques used for VideoVideo

SummarySummary Higher Resolution (pixels/inch) gives better Higher Resolution (pixels/inch) gives better quality, but space increases quadratically.quality, but space increases quadratically.

Bit depth (color depth) measured in bits/pixel. Bit depth (color depth) measured in bits/pixel. “Truecolor” = 24 bits, 8 for each of R, G, B. “Truecolor” = 24 bits, 8 for each of R, G, B.

Space = num_pixels x bits/pixelSpace = num_pixels x bits/pixel Compression techniques: run-length, .gif, .jpg.Compression techniques: run-length, .gif, .jpg. Vector-based representations have adv, disadv. Vector-based representations have adv, disadv. Video is big; compression is both spatial and Video is big; compression is both spatial and temporaltemporal

See See http://jmerritt.warpax.com/graphics_for_beginners/index.html http://jmerritt.warpax.com/graphics_for_beginners/index.html for a good survey.for a good survey.

Representing Representing SoundsSounds

GoalsGoals

Understand how sound is Understand how sound is represented digitallyrepresented digitally

Understand sampling rate, Understand sampling rate, quantization and tradeoff quantization and tradeoff between quality and file sizebetween quality and file size

Know typical factors used in Know typical factors used in sound compressionsound compression

Sound RepresentationSound RepresentationSound is a (continuous) waveSound is a (continuous) wavehttp://www.cs.wfu.edu/~burg/CCLI/Templates/flash.php?file=Chapter5/http://www.cs.wfu.edu/~burg/CCLI/Templates/flash.php?file=Chapter5/

Sampling_and_Aliasing.swfSampling_and_Aliasing.swf

To represent digitally, To represent digitally, decide on:decide on: Sampling rateSampling rate

–how often to read the how often to read the amplitude of the waveamplitude of the wave

QuantizationQuantization–how many bits used to how many bits used to represent the amplituderepresent the amplitude

These two values are analogous to resolution and color depth for images…

SamplingSampling

sampling rates vs. quality of sampling rates vs. quality of soundsound

<-- sampling rate -->slow rate misses peaks, valleys

time

intensity of compression wave (e.g., as measured by voltage from microphone)

Sampling - examplesSampling - examples

Not a very good approximation of the original sound curve

Sampling - examplesSampling - examples

How much sampling is enough? http://en.wikipedia.org/wiki/Sampling_theorem

A better approximation of the original sound curve

Flash tutorial

QuantizationQuantization quantization vs. quality of quantization vs. quality of soundsound

quantization

Number of distinct amplitudes we choose to represent.Fewer values available creates large rounding errors

Quantization - examplesQuantization - examples

Number of distinct amplitudes we can represent depends on the number of bits we use. Values must be rounded to nearest number… in the 1-bit case, “0” or “1”

1

0

http://www.cs.wfu.edu/~burg/CCLI/Templates/flash.php?file=Chapter5/Quantization.swfhttp://www.cs.wfu.edu/~burg/CCLI/Templates/flash.php?file=Chapter5/Quantization.swf

Quantization - examplesQuantization - examples1

0

.66

.33

With 2 bits, we can represent 4 values (0, .33, .66, 1). We still must round, but rounding error is less, and curve is more closely approximated.

A/D and D/A A/D and D/A convertersconverters

Sound Cards and what they do: http://computer.howstuffworks.com/sound-card.htm

Space considerationsSpace considerations

Sample Rate x Quantization x DurationSample Rate x Quantization x Duration

Raw audio Raw audio 44.1Khz44.1Khz x x 16 16 bits = bits = 705Kbits/sec705Kbits/sec

= .7 Mbits/sec= .7 Mbits/sec

stereo = 1.4 stereo = 1.4 Mbits/secMbits/sec

3-minute song = 252 Mbits ≈ 32 M3-minute song = 252 Mbits ≈ 32 Mbytesbytes 16 Gb iPod holds 16000/32 = 500 songs 16 Gb iPod holds 16000/32 = 500 songs

(without compression. with compression: 4000 songs)(without compression. with compression: 4000 songs)

CompressionCompression

Use limitations of human hearing to decide Use limitations of human hearing to decide on sampling rate and quantization.on sampling rate and quantization.

Human ear can’t hear much better than Human ear can’t hear much better than 20Khz, so sampling at 44.1Khz is adequate. 20Khz, so sampling at 44.1Khz is adequate.

Other limitations of our hearing, as well Other limitations of our hearing, as well as as psychoacoustics, are used in compression algorithms (e.g. masking effects), together with other compression techniques (e.g. Huffman coding).

Typical file types: .wav (raw), .mp3 Typical file types: .wav (raw), .mp3 (compressed)(compressed)

SummarySummary Sound is analog, we have digital Sound is analog, we have digital representationrepresentation

D/A and A/D converters used on sound cardsD/A and A/D converters used on sound cards Sampling rate is how many samples/sec are Sampling rate is how many samples/sec are represented. represented. (Typical = 44.1K)(Typical = 44.1K)

Quantization is how many distinct amplitude Quantization is how many distinct amplitude values we can represent. values we can represent. (Typical = 16 bits: (Typical = 16 bits: 65536)65536)

Higher sampling, better quantization means Higher sampling, better quantization means better sound, but more spacebetter sound, but more space

Chosen sampling rate, quantization, and Chosen sampling rate, quantization, and compression techniques rely on human compression techniques rely on human perceptual capabilities (psychoacoustics)perceptual capabilities (psychoacoustics)