Skip to content

Make your website more energy-efficient using Dark Mode

Dark Mode: Viewing palette of choice for hipster millennials, or planet-friendly design option for thoughtful web developers?

What if we said it could be both?

Dark Mode is becoming increasingly popular among web users. It reduces eye strain when screens are being used for a prolonged period of time, it supports better sleep when used later in the evening and, let’s face it, it looks pretty cool. But it also helps preserve battery life by around 60% – and this is important not only for users, but for the planet too.

The energy-saving qualities of Dark Mode can therefore be helpful in reducing the environmental impact of websites, and sustainability-minded developers are increasingly building Dark versions of sites.

Build in choice as standard

The fact that it’s a Dark ‘version’ and not simply a Dark website is crucial, because not everyone wants, or can access, Dark Mode. Research suggests Dark Mode makes text difficult to read for people who have dyslexia or astigmatism, and accessibility is a key consideration when designing any website. Building in two colour options, and giving visitors the choice between Light and Dark within their browser settings, ensures everyone gets the best possible experience.

For tips on how to create a Dark Mode version of your website, head over to our blog: Using Dark Mode to make your website more energy-efficient

📸 Optimise your images to make your website more eco-friendly

Whether you’re a web developer, a designer or content manager tasked with uploading blog posts to the business website, there are lots of ways you can make your website more efficient.

Optimising images is one of the quickest (and biggest) wins when it comes to reducing the page load speed and environmental impact of your website – and it’s fairly easy to do. Things to consider can include:

  • Art direction: Making conscious design choices can have a massive impact, including simply reducing the number of images being used, using illustrations instead of photographs, and being thoughtful about the layout of pages.
  • Lossless compression: Using a free online tool such as TinyPng can reduce the file size of your images without any drop in quality.
  • File formats: Converting your images to the modern WebP format will make them smaller in size than older jpg and png files.
  • Lazy loading: Why load all images on a page if there’s a chance visitors won’t even look at them? A lazy loading image file will only load in if someone scrolls down (or across) to it, thereby speeding up the page load speed and reducing the energy used.
  • Using srcset: Pronounced “source set”, this is a brilliant coding innovation that means an image loads in at the best size for the browser it’s being viewed on. Essentially, your phone won’t spend absolutely ages loading in an image designed for wide screens; it will simply display a small version of it.

For more tips on optimising your images, check out our blog: Optimising images for energy-efficient websites

🍄 Unearthed

~ Digital sustainability news, insights and tips from around the web.

Ask yourself, Are My Third Parties Green?

More than 94% of websites use third-party resources (such as tracking scripts and video embeds), accounting for more than 45% of website requests. As website owners, we’re powerless as to where these scripts are being served from, but what we can do is arm ourselves with information about their eco credentials so we can make better informed decisions.

The brilliant Are My Third Parties Green tool by Fershad Irani is designed to help developers and website owners see the impact of their third-party resources so they can identify problematic scripts and find ways to make improvements.

Why the weight of the web matters

This episode of the Human Centered Design Network’s World Wide Waste podcast features legendary computer scientist (and founder of Smashing Magazine) Vitaly Friedman, who speaks to host Gerry McGovern about the incredible bloating of web pages over the past decade.

The impact this is having on accessibility and usability, not to mention the environment, is staggering. What we need, he says, is a shift in design and development – and that starts with education.

Cloudy with a chance of websites

Want to know what a low-tech, solar-powered website looks like? Here you go. Unless it’s cloudy in Barcelona where the developer lives – in which case, it’ll be offline until the sun comes out again. Still. Pretty cool, right?

On the environmental impact of AI

Fears around AI bringing about the end of humanity may hinge mostly on the dystopian ‘robots taking over the world’ aspect, but what about the impact of ChatGPT and its ilk on the environment? The carbon footprint of the servers required to power generative AI for billions of users and uses could be really ‘problematic’, so says John Naughton in this piece for The Guardian.

Just how problematic remains to be seen, but research from 2019 estimates that training an early iteration of ChatGPT generated emissions that were equivalent to 125 return flights between New York and Beijing. We can only imagine these figures will get worse as the tech advances.

🪴 Grow your knowledge

~ You ask the questions, we find the answers! This month, Marc asks…

“Beyond optimising my website, how else can I make my business more sustainable online?”

A low-carbon website is a great way to reduce the impact of your business’s digital activities on the environment, but it’s not the only way – there are genuinely loads of small, everyday things you can do that will make a difference.

Deleting old emails, for example, will help free up server space and reduce unnecessary energy consumption at the data centre. And unsubscribing from all those newsletters you don’t have time to read anyway can save a massive amount of CO2 – just one email containing one photo can generate as much as 50g of carbon.

Here are a few other things you can do in your business to cut your digital emissions:

  • Turn off your camera in video meetings – this can cut the CO2 generated by a one-hour meeting by 96%.
  • Use the cloud – storing data in the cloud can help even small businesses cut their emissions by as much as 50%.
  • Dim your monitor – turning the brightness of your monitor down to 70% can reduce energy use by 20%.
  • Use a green search engine – setting your default search engine to an eco-friendly one like Ecosia can help you offset your digital emissions through tree-planting initiatives.
  • Download rather than stream – downloading videos, music or podcasts reduces emissions by as much as 80% over streaming.

Making these seemingly small changes will all make a tangible difference to your business’s digital carbon footprint – which is great news for the planet, and for your energy bills!

For more tips on how to reduce your business’s digital impact, read our blog post: Digital sustainability tips for businesses.

☀️ Other news

  • Paul recently completed his Carbon Literacy training, huzzah! Thank you to Stockport Council, Manchester Metropolitan University and Litmus Sustainability for running the course.

  • We are currently taking bookings for new web development projects starting in the spring.

  • Web design consultancy sessions are also available if you’d like to make your website more energy-efficient.

💚 Thank you for reading

This issue of Beneath the Surface was written by Becky Thorn and Paul Jardine. We’ll see you for issue 3 in March! ✌️

beautiful websites,
rooted in good ethics

Back to top Get in touch