Multimedia in Web
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
Blue
White
Blue-green
Red
0
255
0
0
255
0
Green Blue
0
0
0
0
255
0
0
255
255
255
153
153
Hexadecimal
# 00 00 00
# ff 00 00
# 00 ff 00
# 00 00 ff
# ff ff ff
# 00 99 99
Color Chart: http://quasar.unl.edu/tutorials/rgb.html
Color
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
