Weighing Multimedia
6A: Static Images

Sound, video, and animation are the biggest bandwidth culprits, but there are some pretty bloated GIFs out there as well.

Web Site Speed Tweaks: Graphics Tips
Some of CNET's graphical wisdom is a bit obvious, but this collection of tips and examples is a good place to start. Of course, you should crop images and reduce colors whenever possible. When it comes to photographs, consider using JPEG. Make your page look faster by displaying low-resolution images while the page loads, or interlace your GIFs for a similar effect. Take advantage of the HEIGHT and WIDTH tags whenever you use the IMG tag. Don't scale down images, but feel free to scale up solid colors to create a one-pixel color bar. Use thumbnails. Break images into parts for quicker loading. Finally, remember that some of your users will have their graphics turned off; use the ALT tag or offer a text-only version of your site.

Optimizing Web Graphics
Information about bit-depth reduction, color palettes, and dithering, with particularly detailed sections on color reduction and compression. The Tools and Techniques section points you to a helpful plug-in for Photoshop called Intellihance that automatically cleans up photographs. Other tips: Use aliased sans serif fonts and posterize your graphic before reducing it.

Conservation on the Web: Making Smaller GIFs
Royal Frazier's GIF animation site is an amazing source of information. There's a problem with his bandwidth conservation advice, though: It's over a year old. He's got the right ideas (i.e., scaling, re-using images, etc.), but those right ideas are circa January 1997. Most users aren't on 14.4 modems anymore, and the Laura Lemay book he quotes to illustrate bandwidth limitations was published in September '95. Learn from Royal's wisdom, but take it with a grain of salt.

Introduction to JPEG
The newsgroup comp.compression's guide to JPEGs: The compression algorithm, extensions, lossless JPEG, and references for further reading.

So You Want a Thumbnail Image, Huh?
If you've got a gallery of images, such as a product catalog, be kind and use thumbnails. This tutorial shows you the more common two-image method of creating thumbnails and the one-image alternative, which uses HEIGHT and WIDTH commands to shrink a big graphic to thumbnail size.

Thumbs Plus by Cerious Software

Background Images
Nothing's worse than an amateurish background image, so if you must indulge in the BODY BACKGROUND tag, let the Bandwidth Conservation Society help you do it right. For instance, it's better to tile small images than use one big one. Don't even think about interlacing that GIF (many experts recommend this for graphics, but apparently interlacing and tiling don't mix). Consider JPEGs instead of GIFs, and go easy on the embossed corporate logos. Finally, make sure to visit Web Review's Background Images -- The Do's and Dont's

 

[Move on to Tip 7: Frames]