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
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:
sodacan.jpg, which is 1280 by 960.
<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" />