Page-wide CO₂e Emissions Bar Component

I intend to develop or design speculative components on a regular basis to build up a component library (or idea collection) which somehow address digital sustainability. Either by presenting the user some metrics and to inform that digital actions also have an enviromental impact, by guiding the user to more sustainable behavior or by technically reducing the amount of data loaded.

CO₂e Emissions Bar Component

This first component proposal sums up the estimated CO₂e emissions and updates a bar in real-time. A default threshold is set and after reaching it, the page will change the behaviour how it treats assets. For example after reaching the threshold images could be replaced by low-resolution placeholders or even not loaded at all. Now, the user has to actively decide if they want to load the full asset or not. This should nudge the user to think about their digital actions and their environmental impact without withholding information.

Furthermore there should be an extensive page explaining about what one gram of CO₂e means in relation to other activities and how this scales with increased usage of a webpage (for example when considering that thousands or millions of people visit a website per year). Optional a user might even set a custom threshold.