Images
Why use Images?
• Provide Facts
• Explain a Process
• Set a Mood
• Pinpoint a location
• Show relationships (hierarchy, flow chart…)
• Compare (before and after)
Digitization
• Images come in (scanned) as a string of
pixels
• Stored as numbers on disk
• Called a “bitmap”
• Also have “vector” graphics (later)
• Different file formats
Color Theory
• Colors are comprised of three primary colors:
– Red
– Green
– Blue
• All colors can be made from these 3 colors
• Number of colors available depends on the
number of bits used to store the color
• Example: 24 bits = 8R + 8G + 8B
Color Theory
• With 8 bits, you have a range of 0 – 255
• Common colors:
– Red 255, 0, 0
– Green 0, 255, 0
– Blue: 0, 0, 255
– Purple: 255, 0, 255
– Black: 0, 0, 0
– White: 255, 255, 255
– Gray: 100, 100, 100
Hexadecimal Representation
• Sometimes, colors are represented in hex
• Range of 0 – F (0 – 15)
• Example: #FF 00 50
• To covert to base 10, multiply first number by
16!
• Example:
FF16 = (16xF) + F = (16x15) + 15 = 25510
5016 = (16x5) + 0 = (80) + 0 = 80 10
• Can also have range of 0.0 – 1.0
Color Depth
(per pixel)
• 8 bits: 256 colors (3-3-2 RGB)
• 16 bits: 65K colors (5-6-5 RGB)
• 24 bits: 16M colors (8-8-8 RGB)
• Would you want 32-bits for color alone?
Color Cube Macintosh 256 Color palette
Alpha
• RGBA - Use an extra 8 bits to represent the
visibility level of an image (total 32-bits)
• Can be done with .gifs
• Can’t be done with .jpgs
JPEG Compression
• JPEG – Joint Photographic Experts Group
• Best for photographic images
• Algorithm
– Store 255 levels of color, and 255 levels of brightness
– Group pixels into block (of 4 or 16)
• Find average color
• Store differences from average of each pixel
– Quantize the blocks (look at adjacent blocks and
calculate difference from average of all the blocks)
GIF Compression
• GIF – Graphics Interchange Format
• Best for line images
• Algorithm:
– Reduce color depth to 8 bits or less (256 colors)
– Look for repetition
The Math
• If you have 320x240 image with standard 32-
bit RGBA color information, and you get 10:1
compression, how big is the file?
• Answer: 320x240x32/10
Vector Graphics
• Made up of mathematical equations for lines
and arcs
• Completely scalable (no resolution loss if
stretched)
• PNG file
Animated Images
• Animated GIFs
– Simply a series of gifs with timing information
– File size depends on size of image, and number
of frames
• Vector animation
– Animator creates image
– Creates a (mathematical) path for image to
follow
– No series of frames is needed
Acquiring Images
• Scanner
• Digital Camera
• Drawn from Scratch
• CD-ROM collections
• Stills from Video Capture