Pre-Scaling Images

Remember that image of the soda can a couple of pages back? The original was 1280 x 960, and took up 196K bytes of disk space and download time, before being scrunched down to width="192" height="144".

Rather than waste everyone's time by having the server ship all 196K bytes, and then having the browser shoehorn all those bytes into the smaller area, do this:

1. Go to your favorite image processing program (Photoshop, PaintShop Pro, The GIMP, etc.)
2. Open the big file sodacan.jpg, which is 1280 by 960.
3. Use your program's Resize Image or Scale menu item to shrink the picture to 192 by 144.
4. Save the reduced picture under the name soda_mini.jpg
5. Now use soda_mini.jpg in your <img> element. No scaling needs to be done, since the image is the exact height and width that you specified in the tag.

Since this small picture is now only 14K bytes rather than 196K bytes, you've saved 182K bytes on the server, and you've saved an incredible amount of download time. But, how good will that small picture look? Can the image processing program do as good a job of shrinking an image as the browser does? Yes, it can; in fact, it almost always does a better job. Take a look for yourself and decide.

Scaling on Client	Pre-Scaling
<img src="sodacan.jpg" width="192" height="144" alt="closeup of soda can" title="closeup of soda can" />	<img src="soda_mini.jpg" width="192" height="144" alt="closeup of soda can" title="closeup of soda can" />