AVIF vs. PNG
- by Arne Tarara

In this case study we will look at image compression. Typically when trying to optimize a website for network resource consumption and thus CO2 emission images are the lowest hanging fruit.

Modern image formats like AVIF typically achieve +50% compression ratio when compared to PNG in a similar perceived quality.
Try out on Squoosh.app for yourself to see the potential!

AVIF received many positive blogposts. However modern image formats like AVIF have a downside: They are not supported in older browsers like IE, Safari or old Chrome devices. Check support on CanIUse.com.

If you still want to support these old browsers, so that they do not see a blank image you typically would use a polyfill.

In this detailed article we will look at the potential backlash when using polyfills and how to watch out for the tipping points when a move to AVIF might actually get worse in terms of carbon emissions, although it might make no difference in performance for the users.

What do we want to find out?

Research question
How much do we save in CO2 when converting all PNG to AVIF and is there a downside / rebound effect to it?

Calculations

First we need to calcuate some statistical data from Google Analytics or whatever product you are using.

The following list outlines the questions and also the answers for the sample site that we are looking at:

How many users does our site have per day?

Our sample site has 1.000 Users per day.

What kind of browser are our users using?
  • Chrome & Chrome for Android: 55%
  • Edge: 5%
  • Firefox: 15%
  • Internet Explorer 6-11: 5%
  • Safari macOS & iOS: 20%

This is a representative distribution for Germany from one of our clients for a non-ecommerce site in 2022.

How many images do we have per page?

2 images per site on average

How big are our images on average?

Our images are on average 50kB

How many pages do the users visit on average?

Users visit for 2.7 pages / visit

First we calculate the savings in form of kB / MB we get when using the AVIF format:

1.000
Users
x
2
img / site
x
50 kB
avg. img size
x
2.7
visits / site
x
50%
AVIF savings
=
135
MB

Calculate CO2 savings

Since every network transmission has an energy and CO2 budget attached to it we no use our formulas from TODO:_ CO2 formulas for software engineering and then we plug in to calculate the savings per day. We also use the avg. grid intensity in Germany for today (280g / kWh).

135
MB
x
0.00006
kwH / MB
x
280
gCO2e / kWh
=
2.268
gCO2e

We now know, that we could save a potential 2.268 gCO2e per day for our 1.000 users if we were to move to AVIF. However what we have not considered yet is the users of the IE 6-11,Safari, Edge and Chrome < 85 browsers which do not support AVIF format out of the box.

The typical fix for this is to include a polyfill. A choice we have personally used in the past is this library: Kagami avif.js, which itself relies on an npm package: dav1d.js

The total size of this polyfill is ~300 kB

Calculating network traffic impact of the library

Getting CO2 impact of polyfill

In some cases it can be tricky to detect the correct browser and delivering the polyfill only to exactly them. Therefore for reduced complexity the polyfills are always delivered no matter if needed or not.

However in this case we believe separating the browsers out through some capability check or the user agent header should work just fine.

So we assume that the polyfill is only delivered for our 30% non-supporting Browsers

1.000
Users
x
30%
non-supporting browsers
x
300 kB
total polyfill size
=
90
MB

Getting total number

We get the total number by just subtracting the 135 MB with the 90 MB to a total of 45 MB.

Summary

In this example moving to AVIF even with the needed polyfill is still worth regarding the carbon emissions. However the margin got quite diminished and if the users are visiting less pages or the browser ratio is different this might also easily reverse and become a rebound effect.

If you look at this example I hope we could convey that if you optimize for lesser CO2 emissions the backlash to consider are often different when optimizing just for performance, where a mere 300 kB polyfill will most likely go unnoticed.

When looking at our example one might also argue, that instead of including the polyfill we could also use a switch that would redirect to a different HTML page which includes only PNG images, or to use an image service, that only delivers the correct image based on detected browser capabilities.

All of these approaches have different problems and backlashes though, since they typically mean that you save on network bandwith, but therefore have to increase the storage, which is also powered by energy and thus emits CO2.

In a follow-up article we will further drill-down into the cost of storage in particular and how replicating your data manyfold to different CDNs also has a CO2 cost that has to be factored in.