Things to think about with <img />

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) Can interlace GIFs, progressive JPEGs

5) 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

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

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

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

9) Put presentational images (ones meant for design) in the CSS as background-image: url(mypic.jpeg); use <img /> only for photos, images as content: "Here's a picture of the restaurant."

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

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