How to Make Your Review Pages Load Faster by Compressing Images

toggle-button

Why you need to compress images

In order to reduce page load times we encourage editors to put effort into reducing the file size of the thumbnail image files used in their reviews. When a user views your review in a browser it generally takes much longer for the images to download than the review text itself. That's because text simply doesn't take up much room while images do. So a review with thousands of words of text but no images will load much faster than a review with a few hundred words of text and several images

This doesn't mean you should remove the images from reviews - they are really important to users and we encourage you to use them. Rather, what we suggest is you put some time into minimizing the file sizes of the thumbnail images. This can be done by trying different image file formats for your reviews in combination with the use of an image optimization program.

The effect can be dramatic; we have seen thumbnails of 50 KB reduced to less than 5KB without appreciable loss of quality. This kind of difference can have a huge difference in the page load times of your reviews and in user satisfaction.

Reducing image size is the simplest solution

Our site policy is that thumbnail images should be 200 pixels wide. If you do have thumbnails larger than 200 pixels wide you should reduce the image width as your first option as image size has a major impact on the file size needed as you can see in the following example:

1322 x 795.jpg  151 KB

800 x 481.jpg     64 KB

500 x 301.jpg     30 KB

200 x 120.jpg       6 KB

Most of the thumbnails on our site are already 200 pixels wide or less so the scope for reducing image file size by reducing image dimensions is limited and we need to look at other options. 

Image file format is important

Changing the file format for your thumbnail images can have a big impact on their file sizes. We allow three different file formats at Gizmo's Freeware: JPG, PNG and GIF. Each has its own strengths and weaknesses and suitability for different applications so we do not mandate the use of one format in particular. The best file format for your review thumbnails is the one that gives the smallest file size together with acceptable quality. You can see this kind of tradeoff in the following example:

 JPG (10.4 KB)

 GIF (14.2 KB)

 PNG (41.6 KB)

Here the JPG format gives the best compromize between size and quality. Indeed with the type of product thumbnails used in our reviews we commonly find JPG format is the best choice. But this only a general rule, so editors are encouraged to try all three formats to see what works best for their particular images.

There are some special cases:

If you want to use animated thumbnails then you have to use the GIF format as this is the only format that supports this feature. Very few of our reviews make use of animated images so this is rarely a consideration. 

If you require transparency in your images then you are limited to the GIF or PNG formats. This is hardly ever a consideration for editors as our site theme uses a white background so transparency is not required.
 
Compressing images also helps

Image file size can also be reduced by using file compression techniques. Some of these techniques can reduce file size without reducing image quality ("lossless compression") while other techniques trade off image size against image quality ("lossy compression"). The latter is most commonly used with the JPG format.

Image quality is not all that important with thumbnails images as the user always has the option of clicking on the thumbnail to see a larger more detailed image. However the quality must be acceptable otherwise it may give the impression of being amateurish and so undermine the credibility of the review. Here's an example of a JPG image compressed to 100, 72, 50 and 25% quality.

!00% quality

 

 

 

25.3 KB - JPG 100% quality 

 

 

75% quality

 

 

 

5.8 KB - JPG 75% quality

 

 
 
50% quality
 
 
 
 
 
5.1 KB - JPG 50% quality
 
 
 
 
 
25% quality
 
 
 
 

3.1 KB - JPG 25% quality
 
 
 
 
 
With this example 75% quality is as low as you want to go without appreciable loss in quality. Besides further reductions in quality produce little reduction in file size.

Some practical tools you can use

There are a number of image optimization tools that make the task of selecting the best file format and compression technique for your thumbnails much easier. Here are two we recommend:

If your reviews and images are already online then you should run your review through the online page speed optimization program at http://gtmetrix.com/ . This program will show you which of your images need optimizing and also allow you to download optimized versions which you can in turn upload to the Gizmo's Freeware web server. A guide to using this service to optimize your review images can be found here.

For new images a better alternative is to run the RIOT image optimization program on your own PC. It's portable so it requires no installation and can be downloaded for free from http://luci.criosweb.ro/riot/ . A guide to using this program to optimize your review images can be found here:

Other optimization options.

The two approaches above are not mutuallly exclusive and you can try both to see which gives the best results if you wish. In most cases the use of GMetrix or RIOT is usually entirely sufficient but there are also other optimization options available:

Optimizing large images is less important than optimizing thumbnails

Image file size is much less important for the 500 pixel wide full size images that users see when they click on a thumbnail. That's because the full size image is loaded as a separate page and so does not affect the page load time for our reviews. Additionally a user who clicks on an image will be far more tolerant of a slow loading page than somebody who has landed on a review page.

Of course there are limits to this but full sized images of say 250KB really should not be a problem.

While the file size for full size images is less important the image quality is quite important. That's because if a user clicks on a thumbnail it is because he wants to look more closely at how the product looks.

A good quality image that reveals the details is essential. Editors should generally have no problems achieving this for 500 pixel wide images within the suggested 250 KB file size size maximum.

If difficulties arise the same image optimization techniques used for thumbnails can be applied to the full size images.