Half the size and thereby the climate footprint of photos

We can reduce image file sizes by 30-50% without significant quality loss, and lower the climate footprint accordingly, while improving the user experience.

On a typical website, images make up around 60-80% of the data that needs to be transmitted over the Internet. We can significantly reduce the amount of data by adjusting the compression ratio or offering images in a modern format such as WebP

A lighter website loads faster – especially on mobile phones – and the reduction in file size translates directly into lower power consumption and CO2 emissions.


One photo, four different compression settings

In the gallery below, you will see four versions of the same 2560*1440 pixels image, compressed at four different settings. Click on any of the images to zoom in. You can also browse the gallery using the left and right arrow keys.

Photos with fine detail and delicate colour transitions are difficult to compress without being apparent. In the example above, the difference is most noticeable on the trees in the centre of the image.

JPEG is good. WebP is better.

By default, WordPress compresses JPEG images to quality 82. By simply lowering this setting to 70, we can reduce the file size considerably without significant visual degradation. If we go a step further and convert the image to WebP format, we can achieve an additional reduction in file size

File formatFile size
JPEG-82440 KB
JPEG-70312 KB
WebP-82254 KB
WebP-80203 KB
File size compared to standard WordPress JPEG quality

How little space the compressed files take up compared to the original

Photos are different and that is reflected in how much they take up. Photos with a lot of detail take up more space than photos with a few. Test different compression ratios with your own photos and choose a reasonable balance between file size and quality. Here you can see how little the windmill image takes up compared to the original in different qualities:

JPEG-quality 82

100%

JPEG-quality 70

71%

WebP-quality 82

57%

WebP-quality 80

46%

Most photos are decorative

Most photos are just used for illustration or decoration and are hopefully always scaled down to a size that fits the layout, and always compressed to some degree. If it is essential that a photo is available in full resolution, for example on a photography site like Unsplash, there is a dedicated download button for that purpose. A slightly higher level of compression or conversion to WebP is unlikely to be noticed by the visitor – it would only be because the site loads faster.

Can you use WebP?

Yes you can. All modern browsers support WebP. The web server that serves WebP variants of your images just verifies support with the visitor’s browser, and if the browser doesn’t like WebP, it just serves the original JPEG or PNG.

Can I use WebP screenshot
Screenshot from caniuse.com

Webp Image format (based on the VP8 video format) that supports lossy and lossless compression, as well as animation and alpha transparency. WebP generally has better compression than JPEG, PNG and GIF and is designed to supersede them. AVIF and JPEG XL are designed to supersede WebP.

caniuse.com

Would you also like a more sustainable website?

Want to know more about how you can optimise images on your website, offering a better user experience while making your website greener? Then please get in touch.

Share the article

Leave a Reply

Your email address will not be published. Required fields are marked *