Multimedia in Web

Images

A Picture Tells A Thousand Words

Forms of ImagesPhotographPaintingSymbolLogoFlagMapDiagram

FunctionsProvide factsExplain a processSet a moodEvoke an ideaPinpoint location Illustrate

relationships

Digitalization & Pixel

Numeric Representation & RGB

16 digits instead of 1009 & AFBase 16 can represent 0 to 255 color

scalesTwo digits of hexadecimal numbers

00 in Hex. 0 in decimalFF in Hex. 255 in decimal

RBG Colors

Color Red Green Blue Hexadecimal ColorBlack 0 0 0 # 00 00 00Red 255 0 0 # ff 00 00

Green 0 255 0 # 00 ff 00Blue 0 0 255 # 00 00 ffWhite 255 255 255 # ff ff ff

Blue-green 0 153 153 # 00 99 99

Color Chart: http://quasar.unl.edu/tutorials/rgb.html

Sample Colors

Color Depth

16-bit vs. 8-bit30,000 colors vs. 256 colorsWeb-safe colors (No longer a concern?)

Compression

PurposeReduce file size for transmissionFast 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 imageDigital cameraOriginal artworkWeb siteCD-ROMClip artStock photograph

Photoshop

Explore editing, compressing, & saving for Web

Image & HTML

IMG tagLinking with imageImage map