Optimizing images to speed up your website
Your website can be made faster by compressing scripts, stylesheets and other files, and by implementing caching. However, by far the easiest and most immediately enhancing technique to speed your website up is image optimization for the web.
The simple logic of web images
Images on the web are different. They don't need to be near as high quality, or the size as those produced by any modern digital camera. Cameras create large photos of printable quality. On the web all we are looking for is enough quality to look great on a screen, so we don't need near as much information in the file as we would for printing.
Stripping away all that makes the image load faster, and doing that for all your website images speeds the whole thing up enormously.
How to achieve it
There are really just two factors to think about when adding an image to your website. What physical size should it be in pixels? and how much can it be compressed without looking any different on a screen?
Resize before uploading
Take this stock photo from FreeImages.com as an example. It is 3008 pixels wide and 2000 pixels high. That's printable size. Most images, such as an illustrative image for whatever you're writing about on your blog only really needs to be one-third of the width of the available space for your blog post. An image about 150px to 250px wide is plenty big enough to illustrate your blog post. Instead of uploading the full large image and then making the website show it smaller (though loading the full file every time), we resize the image before uploading it so it only needs to load the smaller file and it can do it much much faster.
If you have experience with Photoshop, Gimp, Krita or Paint.net then you can use that, here we have used a free online service called WebResizer. Resizing the image to fit nicely on our blog reduced it by 95% in file size from 1,139KB to 52.60KB. In terms of time, that is a reduction from about 7 seconds, to less than a second on a 2mb download connection.
Compress after resizing
In addition to the gains made in resizing we can make the file even smaller using compression, by reducing the image quality a little without any difference noticable on screens. Photoshop and similar programmes have 'Save for web' options which allow you to choose the quality level the image will be saved as. On WebResizer it automatically reduces the image quality to 80%, but you can try at different levels to see how low you can set the quality without spotting much degradation when you look at the image. For this image 80% works well, we've also displayed it at 70% so you can see what a little bit too much degradation looks like.
Compressing to 80% quality brings the image file size to 28.35KB, which is 97% less than the original filesize and still looks great.
Compressing to 70% quality brings the image file size to 26.15KB, not a huge gain in reductions and you can easily spot some degradation on the nose, right eye, and cheekbone in this photo. In this instance, that is a little too far and not worth the small gain in file size.
A quick note on image file types
The common file types for images on the web today are JPEG or JPG, PNG and GIF. The JPG format is best suited to photographs or complex images like in the above example. GIFs are becoming less and less common in web development and have been superseeded by the PNG format. PNGs support 5% to 10% more compression than GIFs. PNGs and GIFs both support transparency. PNGs are best suited to everything else, or anything where you need transparancy.
- Rate this item
- Published in Blog
