Images

The images test checks all the images on a website 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:

• Is it a non web-friendly format? Only webp, avif, jpeg, png, svg and gif images are allowed.
• Are the width and height attributes missing? This is when you omit the width and height attributes for an image.
• Is it being stretched in the browser? This happens when the source image is a different size to the width and height attributes specified in the HTML. If you want to stretch an image in the browser, you should use CSS as the tag describes the source image, not how it should be displayed.

What can I do about it?

Make sure that all of the images you use are of a web friendly format, like jpeg, 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.