PowerPoint Presentation - Images on the Web

1
Color and Images
2
Color

• The natural colors we see and the colors we see
  on computer monitors are different.
• CMYK -natural
• RGB -monitor

3
Color - CMYK

• Cyan, Magenta, Yellow, blacK
• Four color process
• Reflective color- light from sun (or bulb) hits
  an object color is reflected to our eyes
• Print Documents

4
Color - RGB

• Monitor color
• Red, Green, Blue
• TV, video, computer monitors
• Straight from light source not reflective
• RGB values intensity of colors
• Hexadecimal code- 6 numbers

5
Color - Netscape Composer
RGB Values
6
Color - Dreamweaver
Hexadecimal Code
7

• Bitmapped (pixel-based, paint, raster, Photoshop)
• Vector (math-based, object-oriented, draw,
  Illustrator)

Paint program You can edit individual pixels
Draw program You can easily resize, insert text
and use layers
8
Images - File format

• What we will use on our webpages
• .jpg- we say jay-peg
• .gif

9
Images- JPEG

• Joint Photographic Experts Group
• Cross platform
• Compressed (lossy - data removed)
• Maximum of 16.7 million colors
• Cannot be transparent, interlaced or animated
• Photos, images with subtle color changes, depth,
  lighting, etc.

10
Images -GIF

• Graphic Interchange Format
• Cross platform
• Compressed (lossless - no data removed)
• Indexed color -maximum of 256 colors
• Can be transparent, interlaced and animated
• Simple illustrations, logos, cartoons

11
File size vs. Picture size

• File Size-how much disk space is used by the file
  ex. 30kb
• Picture Size-the dimensions of the image ex. 150
  pixels wide
• Both important for speed of download
• Resize and/or change resolution

12
Accessibility

• Alternate labels -text that will show as image is
  downloading or in place of images

13
Web-ified Images

• Goal is to get maximum image quality for minimum
  file size
• Make sure your image is on the server otherwise
  your link will not work
• Do NOT rename or move your image once you have
  placed it on your web page.