140 likes | 249 Views
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.
E N D
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
Numeric Representation & RGB • 16 digits instead of 10 • 09 & AF • 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 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