What does it do?

Check whether images are technically used correctly. Images should have an explicitly defined size and be in a web friendly format.

Why is it important?

Web browsers usually attempt to display a web page as it is downloading, with the text content for a page appearing first, and images appearing gradually as they download afterwards. During this loading time, a web browser attempts to draw the layout for a page before it has downloaded each image. Where an explicit image size is not specified, the browser has to continually adjust the layout of the page as each image is loaded and it's size is discovered. The effect is that the page is continually 'jumping' until it has completely loaded, which is disconcerting for the user. Defining image sizes averts this problem as the layout is fixed before any images are downloaded.

Images can use a variety of image formats. Only three file formats - JPEG, PNG and GIF - are widely accepted by all browsers and platforms, and are considered 'web-friendly'. Other less widespread are sometimes mistakenly used for websites (e.g. BMP, TIFF, PSD) making them inaccessible on many platforms. This test ensures that all images are encoded using a format compatible with all modern browsers.

How is it measured?

Images are also checked to see whether they have explicitly defined sizes, and whether they use web-friendly file formats (JPEG, PNG or GIF).

The score starts at 10 and is reduced by the proportion of images without explicitly defined sizes or using non web-friendly formats.

Technical explanation

When checking image sizes, both HTML attributes (width, height) and CSS styles are tested – either is acceptable. Images include those applied using an <img> tag only - decorative CSS images are ignored intentionally (e.g. background images). Only images used to display a page are counted, not those which are linked to; it is ok to link to a non web-friendly image as a download.

How to improve this score

Ensure all images define an explicit size wherever possible. With modern Content Management Systems this can usually be automated. Avoid the use of any non web-friendly image formats, except for downloads.

How to use this test effectively

This test indicates whether there is a technical problem with how the images in a website are being coded. It is most appropriately used following a site redesign.