TOP TEN (+) Usage Tips on the page/in the HTML

1) Always include HEIGHT= and WIDTH= attributes: Act as place holder while page loads; place holder if image never loads; Order of attributes doesn’t matter but design always refers to images as WidthXHeight e.g. 8X10 glossy, 8 ½ X 11 paper, 1024 X 768 screen resolution

2) Don’t use 1) to resize image on Web if possible. Use Photoshop, etc.

3) Get WXH on the Web page by right-click/Properties. Can view pic in browser e.g. www.lasalle.edu/~beatty/330/rock.jpg

4) Preload pics by placing 1X1 pixel version on an early page (don’t overdo this); also in effect preload by using the same image repeatedly

5) Can interlace GIFs, progressive JPEGs or add LOWSRC attribute e.g. stick figures before photos load

6) Use ALT text (not a "tag") to explain content

• for non-image browsers e.g. Lynx
• for those with images off
• for visually impaired
• not for spacer GIFs

7) antialias graphics and type if large (type >10 points or so); add matte colors depending on background

8) Try desaturating (Image-Adjust-Hue/Saturation), blurring (in Save for Web) JPEGS to reduce file size

9) View pages at 8-bit, 16-bit color to see if there is banding, color shifts

10) Differences in file sizes due to added dithering, antialiasing are overrated; most images look better with those processes (but e.g. don’t antialias small type)

Bottom line:: Optimization = f(best appearance + smallest file size)

Aim for GIFs: 1-15K
JPEGs: 5-40K