Optimising images for faster load times

29 March 2025

A few simple tricks to speed up your site's images and drastically boost performance.

I want to cover a few of my favourite methods for improving how you are presenting images to users.

Images can play a crucial role in a users experience, but they can also significantly impact page load times and overall performance. By optimizing images effectively, you can ensure faster load times and enhance the user experience across all devices.

Lazy loading

Lazy loading is the quickest and easiest technique to implement from this list so this is an ideal starting point.

It defers the loading of resources until they are needed. With images this typically occurs when content is positioned lower on your page and loads only when a user scrolls down to it, triggering the load process.

Simply add the loading="lazy" attribute to your images: <img loading="lazy" src="cat.jpg" alt="A nice kitty" />

This can also be used on other elements such as an iframe

Image compression

Image compression techniques offer the most significant performance gains by substantially reducing file sizes without sacrificing visual quality. Fortunately, there are several fantastic tools available to help accomplish this.

For images like PNGs and JPEGs, ImageOptim (opens in a new tab) stands out as an excellent option that can be downloaded locally on Mac, accessed online (opens in a new tab) or through their the ImageOptim API (opens in a new tab).

With compression tools you can strip out metadata which isn’t really useful for the web anyway, to save on file size. Also to go even further with ImageOptim’s compression, you can choose either lossless or lossy compression if you don’t mind sacrificing a bit of quality. You can also choose the level at which it performs compression.

You can also compress your SVGs in a similar way, Jake Archibald (opens in a new tab) has created SVGOMG (opens in a new tab) that works in a similar way to ImageOptim.

Image formats

Modern formats like WebP and AVIF provide significantly better compression than JPEG and PNG, reducing image file sizes by 30-50% (WebP) and 50-70% (AVIF) without noticeable quality loss. These formats can greatly improve both page load speed and overall site performance.

You can use online image conversion tools (opens in a new tab) to manually convert your images or Sharp (opens in a new tab) for a NodeJS alternative. With Sharp you can even add this to part of your application pipeline, to just automate the whole process for you.

To ensure browsers receive the best format they support, we can use srcset to serve different image versions based on device and browser compatibility. But we’ll dive into that next.

Using `<picture>` and `srcset` to improve image load speed across devices and browsers

By using <picture> and <srcset> you can load the most appropriate image for a user based on their device and browser.

If a browser supports AVIF or WebP, those formats will be served first, and if neither is supported, it will fall back to the original image. This way, you're always providing the best experience possible.

<picture>
  <source srcset="Godzilla.avif" type="image/avif">
  <source srcset="Godzilla.webp" type="image/webp">
  <img src="Godzilla.jpg" alt="Godzilla doing cool stuff">
</picture>

You can do even more than just swapping the file format. We also have the option to service completely different images based on the size of the device. So when we detect a mobile then a smaller image can be loaded.

<img srcset="godzilla-480w.jpg 480w, godzilla-1024w.jpg 1024w, godzilla-1920w.jpg 1920w" src="godzilla-1920w.jpg" alt="Godzilla doing cool stuff">

And finally if you want to combine both methods, we can. Here is an example combining the above image formatting as well as adding our responsive images.

<picture>
  <!-- AVIF format for browsers that support it -->
  <source srcset="godzilla-480w.avif 480w, godzilla-1024w.avif 1024w, godzilla-1920w.avif 1920w" type="image/avif" sizes="(max-width: 600px) 480px, (max-width: 1024px) 1024px, 1920px">
 
  <!-- WebP format for browsers that support it -->
  <source srcset="godzilla-480w.webp 480w, godzilla-1024w.webp 1024w, godzilla-1920w.webp 1920w" type="image/webp" sizes="(max-width: 600px) 480px, (max-width: 1024px) 1024px, 1920px">
  
  <!-- Fallback to JPEG for unsupported browsers with different sizes -->
  <img srcset="godzilla-480w.jpg 480w, godzilla-1024w.jpg 1024w, godzilla-1920w.jpg 1920w" src="godzilla-1920w.jpg" alt="Godzilla doing cool stuff">
</picture>

The benefits of using a CDN for faster image loading and enhanced performance

Using a CDN such as Cloudinary to deliver your images can also have a major performance boost to your users, and improve your workflow.

A CDN will provide you with the option to serve different format images, without the need to manually update them yourself. You can upload your original PNG or JPEG and the CDN will give you the option to serve that format, or also WebP and AVIF. This means you can use the srcset we talked about earlier.

An extra nice bonus is that a CDN will serve the images from multiple servers, and will choose the one which is closest to where the user is. This will reduce latency of loading the image so the user receives it faster.