Main Content

Keep that image small

Archive - Originally posted on "The Horse's Mouth" - 2006-01-03 14:39:32 - Graham Ellis

Remember to keep image sizes down on websites. I know this is a reminder that has been around since the days that we referred to a 56k modem as a fast connection, but it does still matter. People still access your web site through a modem and if you've a busy website, you'll still have an excess to pay once your traffic exceeds a certain level. On a really fast access, don't you want your pages to appear almost instantly.

Have a look at these three images. On a 56k modem, one of them will take over 15 seconds to download, another will take 8 seconds and a third will take 5 seconds. The final image will come down in under 2 seconds. Can you tell which is which by looking at them?

Image A:
Image B:
Image C:
Image D:


Answer at the end of the post.

There are two techniques I've used to reduce the size of the image.

Firstly, I've reduced the number of pixels that make up the source of the image from the however-many megapixels that my digital camera takes to 680 pixels wide so that I don't burn up bandwidth sending out over-detailed pictures that our site visitors will never look at. (and in once case above, I've reduced it to 340 pixels wide). Browsers will rescale pictures anyway if they're not supplied with enough resolution. I doubt that you'll be able to tell which is the lowres image on our regular blog page but you may spot it on the printer friendly version where it's displayed much wider.

Second, choose your format as appropriate. I've used a .jpg image for all these photographs, and that has allowed me to select a lossy compression algorithm where I sacrifice a little quality for a lot of space; good image manipulation software lets you make the tradeoff - I used photoshop. For web work, a low quality image is often sufficient. For something that will be printed out to high quality, you may wish to go for medium or even high quality. You'll also find that you may want to choose a higher quality on images with sharp edges or with large areas of subtle toning, where the loss is more noticeable.

Answers.
Image A - 15 seconds. 680x340 pixels, Photoshop's High Quality, 87k
Image B - 8 seconds. 680x340 pixels, Photoshop's Low Quality, 42k
Image C - 5 seconds. 680x340 pixels, Photoshop's "Save for Web", 27k
Image D - 2 seconds. 340x170 pixels, Photoshop's "Save for Web", 9k