Dangers of Scaling

Important: Scaling is done on the client system, not on the server!

This means that, on the previous page, the browser downloaded the entire picture of Tabitha (140 x 144), and then scaled it to the appropriate width and height. Since the original picture took only 4600 bytes, this was no big deal.

Many people make the mistake of taking a huge picture and using width and height to make a “thumbnail” preview.

The photo at the right has an original size of 1280 x 960, and takes up 196K bytes of space on disk (even with JPEG compression). When the browser encountered this tag...

<img src="sodacan.jpg" width="192"
   height="144" alt="closeup of soda can"
   title="closeup of soda can" />

...it went through these steps:

1. Allocate a space 192 by 144 for the picture.
2. Make a request for sodacan.jpg.
3. Load all 196K bytes of the image.
4. Now scale it down to fit the 192 by 144 space.

Clearly, this can be a disaster for someone who's connected to the Internet at 28,800 baud; that single picture takes a little over a minute to download. A few such pictures on a page can make your page virtually unusable. Before we tell you how to fix this problem, go to the next page for a true-life horror story.