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">

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:

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.