Images

A Picture Tells A Thousand Words
 Forms of Images
 Photograph
 Painting
 Symbol
 Logo
 Flag
 Map
 Diagram
 Functions
 Provide facts
 Explain a process
 Set a mood
 Evoke an idea
 Pinpoint location
 Illustrate relationships

Digitalization & Pixel

Numeric Representation & RGB
 16 digits instead of 10
 0  9 & A  F
 Base 16 can represent 0 to 255 color scales
 Two digits of hexadecimal numbers
 00 in Hex.  0 in decimal
 FF in Hex.
 255 in decimal

RBG Colors
Sample Colors
Color
Black
Red
Green
Red Green Blue Hexadecimal Color
0
255
0
0
0
255
0
0
0
# 00 00 00
# ff 00 00
# 00 ff 00
Blue
White
0
Blue-green 0
0
255 255 255
153
255
153
# 00 00 ff
# ff ff ff
# 00 99 99
Color Chart: http://quasar.unl.edu/tutorials/rgb.html

Color Depth
 16-bit vs. 8-bit
 30,000 colors vs. 256 colors
 Web-safe colors (No longer a concern?)

Compression
 Purpose
 Reduce file size for transmission
 Fast download

JPEG
 Photographs
 From 255 levels of color and brightness to lower levels
 Group pixels into blocks. Adjacent and similar color and brightness  block or average
 Example: The next slide

Example
 9 values with 3 different colors for 9 pixels 
1 value for the average and 2 values for difference from the average for other colors
 A string of values such as #FF3399,
#FF3399, #FF3399, #CC3399 … for all 9 pixels  #FF3399 as the average, 2 values for other colors differentiating from the average

GIF
 For line drawings
 Reduce color depth of every pixel to 8 bits or less
 Repeated colors across a row of pixels are reduce to the color value, the value of the repetition, other instructions.

Vector Graphics
 Web images use bitmapped format or pixel-by-pixel
 Collection of lines & shapes defined by mathematical formula (e.g. Flash)

Source of Image
 Scanned image
 Digital camera
 Original artwork
 Web site
 CD-ROM
 Clip art
 Stock photograph

Photoshop
 Explore editing, compressing, & saving for Web

Image & HTML
 IMG tag
 Linking with image
 Image map