Greening The Web: A Study On Low-Carbon Image Formats
A study conducted to determine if all image formats contribute equally to internet pollution. The results of this study should be seen as an experiment to open up the topic for future investigation.
Introduction
In August 2023, I read an article by Fershad Irani about using the Firefox Profiler tool to measure the energy consumption of a webpage when it loads in a web browser. In his article, he tested how energy consumption changed when rendering images, including tests with fresh and cached pictures.
Seeing these results made me wonder if there could be a connection between image formats and their impact on energy consumption when rendering in a web browser. If true, this could change how we optimize websites because image formats might be just as important as image size in reducing internet pollution.
After reading the article, I decided to reach out to Fershad to see if he would be interested in collaborating. He thought such an experiment could be very useful and mentioned that he had considered it himself but lacked the time to conduct it. Throughout this study he helped me with research from specialists in the industry that he talked to. In his study, he tested images fetched fresh from the server and images that were cached, using three major image formats: JPG, AVIF, and WEBP. He found that WEBP was the most energy-efficient of the three.
Why I have decided to do this study
Since I started working in web design nearly a decade ago, we haven't had a reliable way to measure the energy consumption of web browsers when loading website elements. Tools like Google's Lighthouse have helped us identify outdated image formats and accessibility issues, but they didn't address energy usage. Now, with Firefox's Profiler tool, we can test various scenarios to see if our long-held assumptions are correct.
Regarding image optimization, we've always believed that lighter is better, and using modern formats like WEBP means we're doing our best. But is that really true? I'm curious if there is a connection between image formats and the energy consumed by browsers. Are we approaching image optimization incorrectly, and are there better ways to reduce the environmental impact of websites?
Test Setup
Equipment Used:
Website:
Raspberry Pi 4B with 8GB RAM, passive cooling, and an SSD for the operating system.
Raspbian OS Lite 64-bit.
Express.js server (Docker container).
Cloudflare Tunneling to imagetest.sustainablewww.org.
The test website is built using HTML, with no JavaScript or CSS. The only content is a single image tag for the test image. The Express.js server is minimal, running only the necessary components and routes for the image tests.Images:
For the tests, I chose 9 diverse images: some with many colors, some with few; some with lots of details, others with fewer.
The images are saved in various formats and sizes:
Formats: AVIF, WEBP, GIF, PNG, and JPG.
Sizes: 3000x5000 pixels, 2000x3000 pixels, 1000x2000 pixels, 500x1000 pixels, and 250x500 pixels.
All images are uncompressed and saved with an export quality score of 100 in Adobe Photoshop.
Test Device:
I used my MacBook Air M1 with 16GB RAM. The tests were conducted in the Firefox web browser v. 118 using the Profiler tool to measure power consumption during the initial load and interaction.
The MacBook Air was connected to power during the test, was running in normal mode, and had no background apps open.
The Firefox browser did only contain one extension which was the Firefox Profiler extension that allowed to keep the developer tools closed during tests, and there was no active profile logged in or any synchronization happening.
Results
The results of the study surprised me. I expected the modern image formats to show the least energy consumption, but the tests revealed something completely different.
Below are the exact test results I captured. In the left column, you will find the sizes and image formats, and in the top row, you will find the image numbers. Each cell shows the exact energy consumption from the time I clicked enter until the image finished loading. I captured the consumption by highlighting the exact start and stop times in the Firefox Profiler tool.
*Disclaimer: This study does not test the difference in energy consumption when the images are cached in the browser. The tests only reflect images fetched from the server. This study also does not consider the link between image file size and the energy consumption caused by being transferred over the network. All the images were resized and saved in their uncompressed state.
Project files and code
You can download a PDF with the test results here:
The images used in this test can be found on Google Drive via this link:
Google Drive
And lastly the Github repository containing all the code can be found here:
Sustainable WWW’s Github repository
Different Rendering Methods
One thing I noticed during the tests was that each image format renders differently in the web browser. I had always thought that images would use the same technology, starting from the top and rendering pixels horizontally like you would see on webpages in the old days. If you remember the old and slow internet connections, you’ve probably seen JPG images rendered in small squares horizontally until the full image was displayed. However, this was not the case with some of the newer formats.
Naturally, I expected that when some of these image formats took longer to render in the browser, they would show increased energy consumption, but that was not the case. In the Firefox Profiler, I learned that JPG starts by rendering a pixelated version of the image, then iterates over it until the full-sized image is displayed. AVIF, on the other hand, shows nothing on the screen until the whole image is done loading, and only then is it rendered to the browser in a single iteration.
Despite these differences, all image formats had one thing in common: no matter how long the rendering cycle was, they consumed approximately the same amount of energy. The results showed that just because a rendering cycle is stretched over multiple iterations doesn't mean it would consume more energy. Instead, it would consume less energy spread over all the iterations compared to the single iteration method, where the browser consumes all the energy at once.
GIF Showed the Best Results
As reflected in the test results, GIF is the winner across the board, showing noticeably less energy consumption than the other image formats. But does this automatically make it the most sustainable image format to use on a website? Both yes and no.
During my tests, I noticed two behaviors of GIF images that made me question whether it is the most sustainable option. First, you cannot zoom in on GIF images. When you zoom in on a rendered GIF, it becomes pixelated. This means each GIF image is rendered to its exact size in the browser and shouldn't be resized or zoomed.
Typically, on a website, you don't need to zoom in and out to see images clearly. The option to zoom is usually unnecessary unless you run a webshop where customers need to zoom in on product images to see more details. Even then, you could create two versions of the image using the GIF format. So, in my opinion, removing the option to zoom is not a bad trade-off for reducing energy consumption in the web browser. It all depends on the use case.
The other behaviour I noticed during the tests was that there wasn't much difference in energy consumption when comparing large GIF images to small GIF images. This means if your images are large, you seem to be able to save some energy by switching to the GIF format compared to any other format. However, when the images are smaller (250-500 pixels range), the savings won't be as significant, and most likely, having extra details might be more beneficial.
It should also be noted that the results from this test might not be 100% accurate because of various factors:
The tests was made on an actual website which means the results might include noise from the network and SSL processing (Reference: Arne Tarara).
Browsers implement image support differently, so results might differ in Google Chrome, Safari, etc.
The Firefox Profiler was not originally made for these types of micro benchmarks, and it’s accuracy measuring such small numbers are still unknown (Reference: Florian Quèze)
Conclusion
From the test results, I conclude that GIFs seem to be the most energy-efficient image format tested in this study. Please note that this study only included uncompressed images, and that results might differ in other browsers. The results might also differ if the images are compressed, as modern formats can be compressed significantly without visible loss in quality.
Using GIFs also comes with a few caveats. The format only supports 8-bit color, meaning a maximum of 256 colors. It also lacks support for alpha transparency, so your images would contain fewer colors and details. The fewer colors and the older and more simple encoding might also have been one of the leading causes to the results. I can imagine that the older and simpler encoding could be easier for the browsers to handle compared to newer and more complicated versions.
The results of this study should be seen as an experiment to open up the topic for future investigation.