Images on
the web		  
Main factors
for graphic images

Format - GIF, JPEG, PNG

Color - "browser safe palette" - 216 colors

Dithering -happens when using colors outside the browser safe palette

Transparency - GIF, PNG (JPEG doesn't support it)

Speed - download speed (relates to physical size of image file)

Animation - GIF & Flash formats
How to get
the image
  • Download
  • Purchase
  • Scanner - use 72dpi
  • Digital camera
  • Image Editing program - Adobe Photoshop, Paint Shop Pro, etc.

Making the image smaller:

  • Physically crop the image - retain only the portion you want
  • Change the dimensions (retain 72dpi, Constraint proportions)
GIF Format (Graphic Interchange Format)
  • Platform independent
  • Uses 8-bit color per pixel
  • Compressed - using indexed color (decreases the palette to 256 or less)
  • Lossless compression algorithm- no image information is lost when compressed
  • 87a & 89a (biggest difference is 89a has "transparent" color)
  • Interlacing - graphics appears in layers
  • Can display animation
  • Best for - illustrations, logos, text graphics, cartoons
JPeg format (Joint Photographic Experts Group)
  • Platform independent
  • Uses 24-bit color per pixel
  • Lossy compression algorithm - each time you save you loose more info - always work from the original!
  • Progressive jpeg - graphics appears in layers
  • Best for - photographs
png format (Portable Network Graphics)
  • Platform independent
  • Uses 8-bit color, 16-bit grayscale and up to 48-bit true color (RGB)
  • Compressed - using indexed color 
  • Lossless compression algorithm - no image information is lost when compressed
  • Progressive display- graphics appears in layers
  • transparency information
  • Not fully supported
Image link ok: <img src="photo.jpg" />

better:<img src="photo.jpg" width="320" height="240 " />

best: <img src="photo.jpg" width="320" height="240"
                                alt="My Smiling Face" />
Image map - Creating hot spots (hyperlinks) on the image 

Can be implemented:

  • Client side- easier, can do in FrontPage 
  • server side

Image Map Example

How to: 

  • Insert graphic item
  • Select the picture
  • Select Hotspot button (rectangle, circle, polygon) from the Picture toolbar (probably at bottom of window) 
  • On the graphic draw the hotspot
  • Finish hotspot by entering the link
rollover - Creating images that change based on an event

 
Rollover Example 1 (embedded JavaScript)

Rollover Example 2 (with JavaScript)


Image Map & Rollover:   
- Example: Frank's Example