Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting...

14
Multimedia in Web Images

Transcript of Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting...

Page 1: Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting Symbol Logo Flag Map Diagram Functions Provide facts Explain.

Multimedia in Web

Images

Page 2: 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 Picture Tells A Thousand Words

Forms of ImagesPhotographPaintingSymbolLogoFlagMapDiagram

FunctionsProvide factsExplain a processSet a moodEvoke an ideaPinpoint location Illustrate

relationships

Page 3: Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting Symbol Logo Flag Map Diagram Functions Provide facts Explain.

Digitalization & Pixel

Page 4: Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting Symbol Logo Flag Map Diagram Functions Provide facts Explain.

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

Page 5: Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting Symbol Logo Flag Map Diagram Functions Provide facts Explain.

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

Page 6: Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting Symbol Logo Flag Map Diagram Functions Provide facts Explain.

Color Depth

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

Page 7: Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting Symbol Logo Flag Map Diagram Functions Provide facts Explain.

Compression

PurposeReduce file size for transmissionFast download

Page 8: Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting Symbol Logo Flag Map Diagram Functions Provide facts Explain.

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

Page 9: Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting Symbol Logo Flag Map Diagram Functions Provide facts Explain.

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

Page 10: Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting Symbol Logo Flag Map Diagram Functions Provide facts Explain.

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.

Page 11: Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting Symbol Logo Flag Map Diagram Functions Provide facts Explain.

Vector Graphics

Web images use bitmapped format or pixel-by-pixel

Collection of lines & shapes defined by mathematical formula (e.g. Flash)

Page 12: Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting Symbol Logo Flag Map Diagram Functions Provide facts Explain.

Source of Image

Scanned imageDigital cameraOriginal artworkWeb siteCD-ROMClip artStock photograph

Page 13: Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting Symbol Logo Flag Map Diagram Functions Provide facts Explain.

Photoshop

Explore editing, compressing, & saving for Web

Page 14: Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting Symbol Logo Flag Map Diagram Functions Provide facts Explain.

Image & HTML

IMG tagLinking with imageImage map