Every website on the internet is hosted on a server, and most of the world’s servers are powered by fossil fuels. In fact, if the internet was a country it would be the world’s fourth largest polluter. We need to do better.
In late 2022 we went to a trivia night and one of the questions was “What has a bigger carbon footprint: sending 100 emails or driving 1km in a car?”
We answered “Driving 1km in a car”, because duh.
Well, we were wrong.
Since learning this startling fact (and losing yet another round of trivia), we wondered what the carbon footprint of our email usage was. We went through all our folders and deleted every email we didn’t need or weren’t actively engaged in conversation with.
Before we knew it we’d delved deep into the world of digital landfill, and like a Choose Your Own Adventure book we had two options:
1. Turn back
2. Do a complete audit
We couldn’t unknow what we learned, so we started researching resources that would help calculate our emissions.
These are our findings:
According to the Website Carbon Calculator, our old website produced more carbon than 76.5% of web pages tested. Over one year with ±10,000 monthly page views, it produced:
• 145.6kg of CO2 equivalent: the same weight as a piano and as much CO2 as boiling water for 19,728 cups of tea
• The same amount of carbon that 7 trees absorb in one year
• 329kWh of energy
• The same amount of electricity to drive an electric car 2,108km
This was incredibly alarming and we knew we had to create a new site asap. We started this process by auditing our old website.
We answered “Driving 1km in a car”, because duh.
Well, we were wrong.
Since learning this startling fact (and losing yet another round of trivia), we wondered what the carbon footprint of our email usage was. We went through all our folders and deleted every email we didn’t need or weren’t actively engaged in conversation with.
Before we knew it we’d delved deep into the world of digital landfill, and like a Choose Your Own Adventure book we had two options:
1. Turn back
2. Do a complete audit
We couldn’t unknow what we learned, so we started researching resources that would help calculate our emissions.
These are our findings:
According to the Website Carbon Calculator, our old website produced more carbon than 76.5% of web pages tested. Over one year with ±10,000 monthly page views, it produced:
• 145.6kg of CO2 equivalent: the same weight as a piano and as much CO2 as boiling water for 19,728 cups of tea
• The same amount of carbon that 7 trees absorb in one year
• 329kWh of energy
• The same amount of electricity to drive an electric car 2,108km
This was incredibly alarming and we knew we had to create a new site asap. We started this process by auditing our old website.
Code
We revisited the old site’s code and noticed there were too many unnecessary HTML tags that had duplicated over time. This resulted in a high volume of requests sent to the server, impacting the overall site speed and user experience as well as being more energy intensive:
Typography
We used Monument Grotesk variable for the old site’s typography, so that one font file contained the same number of stylistic variations, instead of separate font files for Regular, Medium, Italic. This was to further reduce the number of HTTP requests, but we found it wasn’t enough, so we used Arial, a system font universally installed on devices, thus reducing HTTP requests and in turn, energy.
UPDATE 2025: As designers, we don’t like Arial. We really, really tried. So we ended up compromising a little bit and decided on using Monument Grotesk (our brand typeface), but in limited capacity.
UPDATE 2025: As designers, we don’t like Arial. We really, really tried. So we ended up compromising a little bit and decided on using Monument Grotesk (our brand typeface), but in limited capacity.
Colour
Our old site used a versatile colour system of vibrant and neutral colours . The background was white to showcase our design work with clean, breathable pages that communicated copy and images effectively, however white light is the most energy intensive because it comprises all the colours in the colour spectrum.
Old website colour palette
AFTER
• Dark mode with a surface colour of #121212
• White text at 87% opacity
• Disabled text at 38% opacity
• The contrast ratio of pink is 7:1
All colours, ratios and opacities adhere to Google’s Material Design and pass the Web Content Accessibility Guidelines (WCAG) and Colour Contrast Checker.
The new site is in dark mode which is new for us because we’ve always had light mode websites with beautiful bold colour. Dark mode reduces battery usage up to 63% on AMOLED displays, even if the screen is set to maximum brightness.
From a user experience perspective, dark mode is more visually appealing, and it also reduces eye strain (we haven’t found any scientific data on this so if you know of any please let us know).
UPDATE 2025: While our site now is predominately dark mode, our Projects have a white background at 87% opacity.
• White text at 87% opacity
• Disabled text at 38% opacity
• The contrast ratio of pink is 7:1
All colours, ratios and opacities adhere to Google’s Material Design and pass the Web Content Accessibility Guidelines (WCAG) and Colour Contrast Checker.
The new site is in dark mode which is new for us because we’ve always had light mode websites with beautiful bold colour. Dark mode reduces battery usage up to 63% on AMOLED displays, even if the screen is set to maximum brightness.
From a user experience perspective, dark mode is more visually appealing, and it also reduces eye strain (we haven’t found any scientific data on this so if you know of any please let us know).
UPDATE 2025: While our site now is predominately dark mode, our Projects have a white background at 87% opacity.
Images
BEFORE
The images on our old site were high resolution JPGs with an average file size of ~700KB. These files impacted speed and significantly increased energy usage and emissions.
AFTER
Images on our new site are <500KB, optimised and compressed to minimise file handling times. Lazy loading is implemented, which means images only load when you scroll down to them.
Content
HOMEPAGE: BEFORE
The first thing we noticed on our old site that was energy intensive was our homepage, which had a looped slideshow of seven full screen images ranging from 114KB to 798KB. This drastically increased the site’s speed and load time resulting in high bounce rates. The old site also included various media such as reels, videos and animations, at an average of ~8MB per file.
Old website homepage image (part of a slideshow)
AFTER
The new site only has static images that aren’t displayed at full size in order to further minimise loading. Not having big beautiful media and content with a dynamic palette and layout pains us as designers, but we think we did a pretty good job making this site as ‘designery’ as possible within the limited constraints we had to work with.
LAYOUT: BEFORE
Old website layout (part of a slideshow)
AFTER
• The new layout is clear and easy to follow, reducing your number of clicks and allowing greater accessibility of content.
• Navigation is simplified and clearly described to make information easy to find.
• While the site design is restrained and functional, it relies on strong typography to ensure visual interest and user engagement, minimise lengthy copy, and divide sections of content into digestible forms.
Results
After launching this site in March 2023 we ran it through the Website Carbon Calculator again:
• Dirtier than 76.5% of web pages tested
• Produced 1.21g of CO2 every time someone visited
• Cleaner than 57% of web pages tested
• Produces only 0.42g of CO2 every time someone visits
BEFORE
• Dirtier than 76.5% of web pages tested
• Produced 1.21g of CO2 every time someone visited
AFTER
• Cleaner than 57% of web pages tested
• Produces only 0.42g of CO2 every time someone visits
BEFORE
• Produced 145.6kg of CO2 equivalent: the same weight as a piano and as much CO2 as boiling water for 19,728 cups of tea
AFTER
• Produces 50.5kg of CO2 equivalent: the same weight as <1⁄3 of a piano and as much CO2 as boiling water for 6,850 cups of tea
BEFORE
• Produced the same amount of carbon that 7 trees absorb in one year
AFTER
• Produces the same amount of carbon that 3 trees absorb in one year
BEFORE
• Produced the same amount of electricity to drive an electric car 2,108km
AFTER
• Produces the same amount of electricity to drive an electric car 732km
Overall we reduced our carbon emissions by 67%.
Next
Other things we’ve identified to reduce our emissions are switching to a green host, further reducing file sizes, and planting more trees to offset CO2.
So our next steps are:
1. Moving to a green web host. By using green hosting our site will emit ~9% less CO2. Green hosts use clean, renewable energy instead of fossil fuels.
2. Using WebP instead of JPG will reduce the size of our images thus emissions. We tested this by converting our JPGs to WebP — there was an average of ~70kb reduction per file, however our current platform doesn’t support WebP file uploads at this time. This will be a priority when we move to a green host. WebP is a file format developed by Google to reduce image file sizes.
3. We’ll continue looking for more ways to improve this site and reduce our digital impact. If you have any tips or suggestions, or any questions about this case study, please email hi@mek.studio.
Thanks for reading!
So our next steps are:
1. Moving to a green web host. By using green hosting our site will emit ~9% less CO2. Green hosts use clean, renewable energy instead of fossil fuels.
2. Using WebP instead of JPG will reduce the size of our images thus emissions. We tested this by converting our JPGs to WebP — there was an average of ~70kb reduction per file, however our current platform doesn’t support WebP file uploads at this time. This will be a priority when we move to a green host. WebP is a file format developed by Google to reduce image file sizes.
3. We’ll continue looking for more ways to improve this site and reduce our digital impact. If you have any tips or suggestions, or any questions about this case study, please email hi@mek.studio.
Thanks for reading!
“MEK’s research played an important role in redefining our understanding of environmentally conscious design principles for the digital space. As we took on the challenge of crafting a brand for a non-profit client focused on combating climate change, the insights we discovered within MEK’s research provided a solid foundation for our exploration, prompting us to dig deeper into our own creative process. Thank you MEK team.”
NANCY BUGEJA, CEO, HM
“MEK’s case study on their own digital impact was refreshing. They’re the first studio I’ve seen that expressed a conscious and public redesign that considered its energy consumption. What was once totally ignored or considered a design constraint is now being celebrated as an opportunity to do better — energising me to do the same.”
CALEB WISE, FOUNDER, ELLIOTT SYSTEMS
Resources
Website Carbon Calculator
Google Material Design
Web Content Accessibility Guidelines
Colour Contrast Checker
Shortpixel
Image Optimisation
Sustainable Web Design
Sustainable Web Manifesto
The Green Web Foundation
JPG to WebP Converter
How to Build a Low-Tech Website
Make Your Website More Energy Efficient
Google Material Design
Web Content Accessibility Guidelines
Colour Contrast Checker
Shortpixel
Image Optimisation
Sustainable Web Design
Sustainable Web Manifesto
The Green Web Foundation
JPG to WebP Converter
How to Build a Low-Tech Website
Make Your Website More Energy Efficient