Performance: How do I optimize images?

One aspect of performance optimization that Siteimprove Performance will assist you with, is making sure that the image content on your site is as optimized as possible. This will, in turn, lead to a faster load time on the pages, resulting in a better experience for your users. All of the categories of image optimization mentioned below are areas that Siteimprove Performance will highlight for you and assist with.

Oversized Images

Wherever possible, you should try and avoid using images that are larger than the needs of the user's screen size (viewport). Anything larger than that will results in unnecessary load time, as the larger image files take longer to load and display in the browser.

The main strategy for ensuring that we avoid oversized images is ensuring that we are using responsive images wherever possible. This means generating multiple versions of each image, with different sizes, and then specifying which one to use depending on the user's viewport size.

Alternatively, you can use a vector-based image format like SVG. SVG can scale to any size using a small amount of code, and so is a suitable alternative to ensure that we don’t load unnecessarily large images.

Serve Images in Next-Gen Formats

By using newer image formats such as JPEG 2000, JPEG XR and WebP over older formats like JPEG or PNG, we can severely reduce the file size of each image. This will, in turn, lead to the page loading faster, consuming less cellular data and providing a better user experience. The difference between these formats is due to the fact that the older formats are less efficient in terms of encoding image data than their modern counterparts.

You will likely need to have a fallback in an older format for the images if you choose to use more modern formats such as WebP. This is due to the fact that browser support for this technology is not universal, and so there will be some older browsers that can’t display the image type.

You can check browser support for these different formats here:

• WebP


• JPEG 2000


• JPEG XR

Offscreen Images

Offscreen images are images that are outside of the initial view when first loading in the page, such as image content further down the page. This content, contained below the ‘fold’ of the initial view, does not need to be downloaded as part of the initial page load since the users won’t be able to see these images. If we defer this content to only be downloaded once the user interacts with the page and scrolls further down the page, we can improve load times and responsiveness for our users.

Depending on which CMS environment you are using, lazy loading offscreen images may be supported by default, or require additional implementation efforts.  

Several of the most popular browsers also support lazy loading of images natively.  These include the latest versions of Edge, Firefox, Safari, Chrome, Android and Android Chrome. This means that it's super simple to implement lazy loading images for users, as it can directly be added in the img tag, as demonstrated below.  Be wary of legacy browser support though, as this feature is still a relatively new phenomena.  It would therefore a good idea to use a service like caniuse.com to see whether you would be excluding a significant portion of your users by implementing such a solution natively.

<img src="image.png" loading="lazy" alt="" width="200" height="200">