How sustainable web design works - part 1 - image optimisation
Optimising Images to make your website green and sustainable
In the previous post (link), I discussed the broad topic of sustainable web design. In this post I’d like to dive in the first part of sustainable web design optimisation - Reducing image weight.
As we learned before sustainable web design is all about minimizing the overhead of your website. One of the most heaviest assets of a website are images.
In this post, I’d like to tell you how to minimize image weight to reduce network overhead and the carbon dioxide footprint of your website.
Image file formats for the web - PNG vs. JPEG vs. next generation WebP
Images are crucial assets of websites and when we think about optimising images for the web, the first most simple question is, how large should a website’s image be. I worked together with clients that served totally unoptimised images, directyl exported from photoshop that had a file weight from 2 to 10MB!
This will unnecesseraly increase the total page load of your website, leading to frustrating users and high abbruchraten as well as a low sustainability scoring.
I heavily recommend that in order to deliver the best and most sustainable experience for your users, to consider a maximum image weight of around +/- 500kb for large hero images.
For websites we can choose between different image formats: JPEG, PNG and WebP.
Analyse your current website’s images with surfgreen.dev
To analyse your current website’s images, you can use the free tool surfgreen.dev. Surfgreen does not only analyse your images, but calculates a sustainability score of your websites and outputs recommendations how to improve your website’s carbon dioxide footprint.
Responsive Images - serve images that fit to your user’s screen widths and devices
Fallbacks and srcsets
Image optimisation tools
Content here
Image optimisation with 3rd party tools
Content here
Image optimisation with npm packages
Content here
Image optimisation with Content Delivery Networks
- Type of images and compression algorithms
- Analyzing your current images with surfgreen.dev
- Optimising images with 3rd party tools
- Optimising images with npm
- Optimising images with a CDN
