menu close

Planet Saving Pixels | Creating a Web That is Good for People and the Planet

3 min read

Dot All Banner

Introducing digital sustainability and exploring practical ways to create more performant websites with a lower carbon footprint.

Firstly, if you’ve watched my keynote talk at Dot All in Barcelona, then thanks for listening! If you missed it, then you can watch it below, and there are useful tools to measure and optimise your web pages to help you craft low-carbon, more sustainable websites.

How to measure your website’s carbon footprint

Tools and techniques that will impact a website’s carbon footprint

1. Take a minimalist approach

If in doubt, leave it out. Thinking minimally about what deserves to be on the page. Does a piece of content serve a purpose? Does it help your readers understand? Remember that Less on the page means less data to load and less time spent viewing it.

2. Streamline user journeys

Helping people find the page they’re looking for quicker and avoid yo-yo user journeys helps to reduce unnecessary page loads and time spent on a website.

3. Optimise web typography

  • Use fewer fonts and weights
  • Convert font files to WOFF
  • Remove unnecessary languages and subset characters
  • Self-host font files

Choosing ‘Expert’ and ‘Custom subsetting’ gives you the greatest optimisation control

4. Colour and screen energy

  • Dark colours are less energy-intensive
  • Blue colours use more energy than green or red
  • Reducing colour variation in imagery reduces file size

Image energy calculator:

5. Media optimisation

  • Use fewer images, if possible
  • Consider vector illustrations/icons
  • Export correct dimensions with compression
  • WebP and AVIF formats are best

  • Set image compression within CMS
  • Set file size limits for image uploads to CMS
  • Generate image sizing according to the screen size it is being delivered to
  • Automate image conversion to WEBP or AVIF formats

6. Mindful motion and less video

  • Use motion sparingly
  • Avoid autoplay on videos
  • Only play when visible on the screen
  • Use lightweight javascript frameworks

  • Lightweight, scalable animations

7. Static page caching

Pre-generate static versions of your website so that each page doesn't have to be transferred and rendered from scratch each time it is loaded.

8. Optimise page size

GZIP is a form of data compression that can compress files up to 70% for faster delivery

9. Reduced server requests

Every time your page makes a server request, energy is required to transfer and display data. Using HTTP/2 allows browsers to issue parallel requests.

10. Green hosting

Choosing a web host that powers its servers and data centres with renewable energy is one of the most important choices you can make to reduce your website’s environmental impact.

Extra reading and resources

Low carbon case studies:

Web Sustainability Guidelines (WSG) 1.0:

Books on the topic

Lucy Article

Lucy Williams

A Principal UX and Digital Designer with almost two decades of experience. She loves balancing UX thinking with digital creativity to design innovative & vibrant products.

She has specialist knowledge in digital brands and sustainability.

Connect on LinkedIn.

How to create a greener web with a sustainable website design

4 min read

Sustainable Website Thumb 2x

Will sustainable design make us better designers?

2.5 min read

Sustrainable Design Thumb 2x