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 or View Image Info. Can view pic in browser e.g. www.lasalle.edu/~beatty/230/rock.jpg

4) Can interlace GIFs, progressive JPEGs or add LOWSRC attribute

5) Use ALT text (not a "tag") to explain content alt="This describes the picture"

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

6) Also add title="Describe the picture" for browsers that don't display the alt text

7) Antialias graphics and type if large (type >12 pixels 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: 10-50K