Example: Resizing Images to Final Size

We took a photo of a rather malevolent-looking rhino in Kenya, straight from the digital camera, which is 2592x1944 pixels and 832kB in size. We tell the browser to display it at a size of 400x300 pixels.

<img class="inline" alt="Full-size photo of rhino loads slowly and has to be scaled by the browser"
src="attach/Examples.imagescaling/rhino_full.jpg" width="400" height="300">

Full-size photo of rhino loads slowly and has to be scaled by the browser

It does work, but because the image file is still large, it takes at least a few seconds to download, even on a fast connection.

Now we resize the image to the size we actually want (400x300 pixels), reducing the file size to 41kB, and insert the resized file:

Scaled photo of rhino loads more quickly and does not need to be scaled again

Resizing the image resulted in a saving of 95% in this case, and should load almost 20 times faster than the one above.

If you inspect the pictures closely, you will probably see that the lower one actually looks smoother and has fewer jagged edges. This is because photo editing software resizes images in a much more accurate (but slower) way than most browsers. So in addition to loading faster, resized images look better.