Image optimisation

Picture elements

picture elements should now be used in place of simple img elements to aid in page performance. This method works by allowing different sized images to be served for different screen sizes, which means that overly large images are not unnecessarily served to small screens.

Images should also be served in the new WebP format to offer better compression and further improve page performance. (Ideally, the image should also be offered in AVIF format, although this should always have a WebP fallback until support is better.) For both of these formats, the appropriate type attribute should be used, as in the example below, to make sure that browsers which do not support these formats correctly fall back to the standard img tag, which should always be the last item within the picture element.

The width and height attribute should be set with the pixel size of all images to be loaded in, regardless of format; the browser will then allocate an appropriately sizes area ready for when the image is loaded, preventing the page layout adjusting once the image has loaded. img tags should also have a decoding attribute set with a value of async.

<picture>
	<source type="image/webp" media="(min-width: 1600px)" srcset="xxx.webp" width="..." height="..." /> <!-- Image to be served to large desktops -->
	<source type="image/webp" media="(min-width: 960px)" srcset="xxx.webp" width="..." height="..." /> <!-- Image to be served to standard desktops -->
	<source type="image/webp" media="(min-width: 560px)" srcset="xxx.webp" width="..." height="..." /> <!-- Image to be served to tablets -->
	<source type="image/webp" srcset="xxx.webp" width="..." height="..." /> <!-- Image to be served to mobiles -->
	<img src="xxx.jpg" decoding="async" width="..." height="..." alt="" /> <!-- Fallback image in JPEG format for non-compliant browsers -->
</picture>

Additional attributes

To improve page load and layout times, the additional attributes decoding, width and height must be set on all inline images. The decoding should be set to async (decoding="async">), while the width and height attributes should be set with the pixel size of the image to be loaded in; the browser will then allocate an appropriately-sized area ready for when the image is loaded, preventing the page layout from adjusting once the image is available.

Compression tools

Any new JPEG, PNG or SVG images need to be run through an image optimiser; please also follow our designer's guide for creating optimised images and creating WebP images.