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 Color Chart: Sample Colors

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

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