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 doesnt matter but design always refers to images as WidthXHeight e.g. 8X10 glossy, 8 ½ X 11 paper, 1024 X 768 screen resolution
2) Dont 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"
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. dont antialias small type)
Bottom line:: Optimization = f(best appearance + smallest file size)
Aim for GIFs: 1-15K
JPEGs: 10-50K
Site maintained by John Beatty