How to Optimize your Screenshots for Pageload Times and Search Engines

toggle-button

This article describes image types, their use, and how they can affect pageload times and Search Engine Optimisation (SEO) on our website.

 
Pageload Times

In order to reduce pageload times, we encourage editors to put effort into reducing the file size of the thumbnail image files used in their reviews. Reducing the file size can be achieved by looking at the image dimension, file format and image optimization.

1. Image Dimension

Thumbnail images should be 200 pixels wide, with the height resized in aspect ratio. If you have thumbnails larger than 200 pixels wide, you should reduce the image width as your first option since image dimension has a major impact on the file size.

File size is much less important for the 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 pageload time for our reviews. Of course there are limits to this but full sized images of say 250 KB 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, 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 images up to 800 pixels wide within the suggested 250 KB file size maximum.

2. File Format

Changing the file format for your thumbnail images can also have a big impact on their file sizes. We allow three different file formats at Gizmo's Freeware: JPG, PNG and GIF. As a general rule, we find that the format that most commonly works best is the JPG format, then PNG with GIF last.

Editors are encouraged to try all three formats to see what works best for their particular images. The best file format for your review thumbnails is the one that gives the smallest file size together with acceptable quality.

In some special cases where you require transparency in your images, then you are limited to the PNG or GIF formats. This is hardly ever a consideration for editors as our site theme uses a white background so transparency is not required. If you want to use animated thumbnails in a rare case, then the GIF format is the only format that supports this feature.

3. Image Optimization

Media Player ClassicImage file size can be reduced further by using some image optimization tools that make the task of selecting the best file format, compression technique and reducing color depths for your thumbnails much easier. Here are two we recommend:

  • For new images, a good method 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/.
  • If your reviews and images are already online, you should run your review through the online page speed optimization at http://gtmetrix.com/. This service will show you which of your images need optimizing and also allow you to download optimized versions.

For example, the screen shot on the right is a thumbnail of 200 pixels wide for Media Player Classic. It's linked to a full size image of 800 pixels wide. The thumbnail and full size image are optimized using RIOT and saved in JPG format at a file size of 4 KB and 29 KB respectively.

If you have a portion of the image that you want to direct the reader's attention to, consider the option of cropping the important part of a screenshot. A cropped section can often be smaller than 800 pixels wide but well readable.

 
Search Engine Optimisation (SEO)

In order to get maximum benefit, images need to be named correctly. There are four opportunities to name an image.

1. File name

This should be very brief and relevant. Use a keyword as this is appreciated by users and search engines. Don't have any spaces in the filepath, fill them with hyphens.

Right: best-antivirus.jpg
Wrong: 2749gsj_08.jpg

Never use an underscore (like_this) in image names or anywhere else on the web. It's useful on a PC for removing filename spaces, but has no web application. This is because search engines can read but not parse it, i.e., understand it. It's a good search term opportunity lost.

Instead, use hyphens for joining words (like-this). This method is always correct as a hyphen is dropped by anything reading and/or parsing it, and leaves the space intact.

2. Alt tag

This, or alt text, is slang for the alternative text attribute. This is text that describes the image. It can act as a placeholder; or a loading message; or an on-hover info source; or as a screen-reader input (a sight-disabled person's browser). It has many uses and is an important part of the image's make-up.

Please don't omit it as there are various repercussions if this happens:- we lose a search opportunity, the page code fails validation (it's a code error), and an accessibility test will fail.

3. Caption

A caption is a short text description placed on the page next to the picture. It can give any information you like, though a sensible thing would be to name it correctly - use a keyword variation in it.

4. The Title

The text in the title shows on hover in a proper browser. You can use it or not - it has no importance. However if you use it, it is of course a naming opportunity.

Because there are four options for naming images, we can and should use keyword variations. By all means make two out of the four your main theme keywords; but the others are probably best made as variations.

 

toggle-button

Comments

thank you for this information!