Images

The images test checks all the images on a site to check if they are linked to according to latest best practice. We also check that the images are an appropriate web format.

Why do we test for this?

Website producers often include images on their pages badly, creating accessibility issues for visitors and increasing page load times.

It is important to include the width and height attributes in each image tag. The mark-up is valid without a height and width attribute, but it is best practice to include them. Without these attributes, the visitor's web browser does not know how much space to leave for the image until it has downloaded it. This means that once the image has loaded, the page has to be re-rendered by the visitor's browser, which increases page load time and can cause elements on the page to 'jump,' especially if the user has a slow internet connection. It is also important not to stretch the image by using these attributes; they should be identical to the actual dimensions of the image. This also increases page load.

How do we test for this?

We download all of the images on a site and mark the score down for several criteria:

What can I do about it?

Make sure that all of the images you use are of a web friendly format, like jpg, gif or png. You should also include width and height attributes for all images, and these should be the actual dimensions of the source image. If you need to stretch the image in the browser, use CSS. The image tag in the HTML defines the source image, and the CSS defines how it should be presented.