❓ Making your website lighter with modern image formats

When looking at a customer website to reduce its carbon weight, making it both better for the environment and faster to load, I generally start by looking at the images on the site.

I consider:

• Does the site have any huge images (more than a megabyte in size)?
• Does the site have a number of medium sized images (more than 150kb)?

If the answer to either of those questions is yes then using an appropriate image format often leads to a substantial reduction in page weight. A lot has been written about images by people a lot wiser than me. I’m not going to fall into the technical rabbit hole of formats, compression etc. There are a lot of considerations.

However I’d like to share two recommendations which will make a difference in most cases:

• Firstly, where possible, use line illustrations in svg format. These are generally much smaller than photos.
• Secondly, where you need to use photos, use webp format rather than jpeg or png.
• This file format is quite new and compresses really well - in other words you get the same image quality for a fraction of the size of older formats.
• webp is now supported by the recent versions of all browsers so there’s no reason not to use it right now.

Please try these tips out and let me know how you go …