Every week our Knowledge Networks deliver over 100 gigabytes of images. That’s a lot of images! It's reported that images on average account for over half the overall size of web pages. The smaller in file size we can make your images, the better a network experience we can offer your users — especially the mobile ones.

We’ve just upgraded one of our CDNs to be a little more intelligent about the delivery of images. Let's take a look.

Image delivery

A CDN (content delivery network) is a way to speed up the delivery of web content. If a user tries to read an article in France, the user's request is routed to a geographically close server that has some of the content cached already. This reduces the latency (the delay before a transfer of data begins) and also increases download speed (due to the data having less distance to travel). Both important factors for fast loading web pages.

Most CDNs are highly specialised at caching and serving static content: any content that can be delivered to an end user without having to be generated, modified or processed. Javascript and CSS content is static as it is generated just once during deployment and are never modified. The look (CSS) and behaviour (Javascript) we deliver to users is the same each time it is viewed, so the assets can be too.

Images uploaded by our users (e.g poster images) are also static but unlike other static content, we're not in control of the file type, file size, image quality, etc. This is a crucial difference, as the assets we deliver are highly optimised but all that effort is wasted if there's just one uploaded image that has a huge file size. This alone can impact a network’s performance. Knowing that, we decided to focus on how we can optimise your images without you having to lift a finger.

Image optimisation

A typical image on the web is a JPEG. This lossy image type trades visual quality for file size. In an effort to improve image performance, Google has introduced Webp, a new image format for the web. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index. Supporting this new file type was first on our list of image optimisations.

Now, when a user views a page that contains an image, we check to see if their browser supports Webp. If it does, we swap the original image out and send back a Webp file instead. This reduces file size, which in turn reduces network load time. (For a particularly meta example, the poster image above is using WebP and reducing the file size by half)

For the situations where Webp isn't possible (the user's browser doesn't support it), we've started optimising JPEGs too. Images such as JPEGs have metadata which contain information about how the image was generated or modified. It's unnecessary to the end user so we've started stripping it out. The typical savings from this are about 5%. A nice saving for no visual changes.

Just these two changes have made a significant difference that we're quite happy about, but as always, further optimisations can be made and I'll report back once we've rolled them out too. Maybe you'll spot them in the wild beforehand!

In conclusion, we now dynamically apply lossless image optimisations to remove unnecessary bytes from images and also convert images to more efficient file formats when the user's browser can support it. On average, we're seeing image file sizes reduced by 35% which means faster sites and happier users.