Image on Demand
This example shows how images could be shown only on user demand to save bandwidth and data transfer. As the amount of data transferred is directly linked to how much energy — and therefore CO₂e (CO₂ equivalents) — is used, a sustainable page is using as few bytes as possible.
This page should demonstrate how it feels to read a page where images are not revealed in high resolution by default.
From here we have just some filler text. The images don't load until you click on them. For context this page also informs about actual estimations on how much CO₂e is used for data transfer. By saving 300 KB of data transfer, you save approximately 0.04446 gCO₂e. The calculations are based on Sustainable Web Design. The exact calculations can be found in this google sheet.
0.04446 gCO₂e may not seem like much, but let's consider the math. If we avoid loading 10 images on a page, and saving 300kB for each image, thereby saving 10 times 0.04446 gCO₂e, we reach a total of 0.4446 gCO₂e. Assuming a page is loaded 750 times, this saving is equivalent to driving a car for approximately 1 km with a fuel consumption of 8 liters per 100 km (petrol) Source: myclimate.org.
This effect becomes even more significant when we consider that many pages use images much larger than around 300 kB, often in the range of 1 MB or more. Repeating the calculations with a saving of around 1 MB per image, we end up saving approximately 10 MB, which equals 0.1482 gCO₂e. If a page is loaded 750 times, this results in a saving of 1111.5 gCO₂e, equivalent to driving a car for about 3.36 km.
The dithered images are about 5kB in data size, while the full images are much heavier. This page uses one of the newest compression algorithms, AVIF, that already delivers pretty small images. Normally JPGs or even PNGs are used, which are much larger. So the potential savings are pretty big.
The dithered images are PNGs 150px wide. We display them in much bigger size though, but the overall visual experience is not too bad, as we can get very specific aesthetics while giving the user a good indication of how the image looks like.
