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. 

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. 

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. 

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. 

MEK is pleased to present a pioneering case study in reducing website carbon emissions in an effort to help designers, studios and agencies create low emission websites for themselves and as a new service for clients looking to reduce their impact, and to help businesses transition to sustainable digital practices. This project was a Finalist in Digital Design in the 2023 Victorian Premier’s Design Awards.

MEK is pleased to present a pioneering case study in reducing website carbon emissions in an effort to help designers, studios and agencies create low emission websites for themselves and as a new service for clients looking to reduce their impact, and to help businesses transition to sustainable digital practices. This project was a Finalist in Digital Design in the 2023 Victorian Premier’s Design Awards.

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.

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:

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. While it's functional, it's devoid of form and feeling, and it's just not sexy. It also has really poor kerning, which affects readability and visual balance, especially on high-res screens. So we compromised by using Google fonts in lieu of a custom font.

"A good compromise is when both parties are dissatisfied." —Larry David

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. There's also the fact it has poor kerning, which affects readability and visual balance, especially on high-res screens. While it's functional, it's also devoid of form and feeling. So we're now using Google fonts Inter and Geist in lieu of a custom font.

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.

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.

Current site:

• Dark mode with a surface colour of #121212
• White text at 87% opacity
• Disabled text at 38% opacity

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 bright 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).

Current site:

• Dark mode with a surface colour of #121212
• White text at 87% opacity
• Disabled text at 38% opacity

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 bright 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).

IMAGES

IMAGES

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.

Images on our new site are automatically optimised and resized to make them smaller when needed, and converted to modern formats with better compression. They're AVIF, a new image format known for its superior quality and efficiency. AVIF is widely supported by modern browsers and offers smaller file sizes while maintaining high image quality, often up to 50% smaller than JPEG and even WEBP.

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.

Images on our new site are automatically optimised and resized to make them smaller when needed, and converted to modern formats with better compression. They're AVIF, a new image format known for its superior quality and efficiency. AVIF is widely supported by modern browsers and offers smaller file sizes while maintaining high image quality, often up to 50% smaller than JPEG and even WEBP.

HOMEPAGE: BEFORE

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.

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)

Old website homepage image (part of a slideshow)

HOMEPAGE: AFTER

HOMEPAGE: 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.

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

LAYOUT: BEFORE

Old website layout (part of a slideshow)

Old website layout (part of a slideshow)

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.

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: AFTER

LAYOUT: 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.

• 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

RESULTS

After launching the new site in March 2023 we ran it through the Website Carbon Calculator again:

BEFORE

• Dirtier than 76.5% of web pages tested
• Produced 1.21g of CO2every time someone visited

AFTER

• Cleaner than 57% of web pages tested
• Produces only 0.42g of CO2every time someone visits

BEFORE

• Produced 145.6kg of CO2equivalent: the same weight as a piano and as much CO2as boiling water for 19,728 cups of tea

AFTER

• Produces 50.5kg of CO2equivalent: the same weight as <1⁄3 of a piano and as much CO2as 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

After launching the new site in March 2023 we ran it through the Website Carbon Calculator again:

BEFORE

• Dirtier than 76.5% of web pages tested
• Produced 1.21g of CO2every time someone visited

AFTER

• Cleaner than 57% of web pages tested
• Produces only 0.42g of CO2every time someone visits

BEFORE

• Produced 145.6kg of CO2equivalent: the same weight as a piano and as much CO2as boiling water for 19,728 cups of tea

AFTER

• Produces 50.5kg of CO2equivalent: the same weight as <1⁄3 of a piano and as much CO2as 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

We reduced our carbon emissions by 67%

We reduced our carbon emissions by 67%

“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.”

“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 GROUP

NANCY BUGEJA, CEO, HM GROUP

“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.”

“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



CALEB WISE, FOUNDER, ELLIOTT SYSTEMS


RESOURCES

RESOURCES

© MEK STUDIO® 2023–2026. All rights reserved.

While this project was created to provide guidance and information for anyone to use, this case study, its content, and/or its format may not be reproduced, rewritten, distributed or transmitted, in whole or in part, without prior permission from MEK STUDIO®. 

Any mention or reference to this project in digital or printed material must be credited to MEK STUDIO® with a direct link to this page.

For permission requests please contact us hi@mek.studio.

© MEK STUDIO® 2023–2026. All rights reserved.

While this project was created to provide guidance and information for anyone to use, this case study, its content, and/or its format may not be reproduced, rewritten, distributed or transmitted, in whole or in part, without prior permission from MEK STUDIO®. Any mention or reference to this project in digital or printed material must be credited to MEK STUDIO® with a direct link to this page.

For permission requests please contact us hi@mek.studio.