The 5-Megabyte Problem: Why Images Ruin the Climate

The internet consumes electricity. A lot of electricity. If the internet were a country, it would have the fourth largest electricity consumption in the world. And what consumes the most bandwidth (and thus energy)? Images and Videos. Loading a website with 10MB of images burns cloud computing power, network capacity, and battery on the user's smartphone. Every uncompressed image is a small environmental sin. The good news: Here you can have the biggest impact with minimal effort.

Featured Snippet: Image Optimization reduces the file size of graphics without visible quality loss. This drastically lowers the CO2 footprint of a website (less data transfer = less electricity). The most important techniques: 1. Modern Formats (WebP/AVIF instead of JPEG/PNG), 2. Responsive Images (Small images for phones), and 3. Lazy Loading (Load only when needed).

---

The Cost of Inaction: Slow and Dirty

A 2MB JPEG on the homepage. 10,000 visitors a month. = 20 GB Data Transfer. Just for this one image. That corresponds to approx. 10 kg CO2 (depending on power mix). If you compress the image to 200KB (WebP), you save 90% CO2. And the page loads in 0.5 seconds instead of 3 seconds. Win-Win for Planet and Conversion.

---

The Holy Trinity of Image Optimization

The Format: JPEG is Dead

JPEG was good. In 1992. Today we use:

• WebP: Google Standard. Approx. 30% smaller than JPEG. Supported by all browsers.
• AVIF: The new King. Approx. 50% smaller than JPEG. Extremely efficient.
• SVG: For logos and icons. Infinitely scalable and tiny (since vector text). Stop using PNGs for photos!

The Size: Responsive Images

Why do you send a 4000px wide image to an iPhone (375px wide)? That is waste. Use the srcset attribute in HTML.

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="...">

The browser decides itself: "I am small, I load small.jpg." This saves often 80% data volume on mobiles.

The Timing: Lazy Loading

Load images only when the user scrolls there. In the past you needed JavaScript. Today HTML can do this natively: <img loading="lazy" ...> Images "Below the Fold" (at the bottom) are not loaded if the user closes the page before. This saves tons of unnecessary traffic.

---

Video: The Final Boss

A video in the autoplay header? 10 second loop. 50 MB. That is an ecological crime. If you need video:

• No Autoplay (Let user decide).
• Use efficient codecs (H.265 or VP9).
• Or better: A static image as marker and load the video only when clicked ("Facade Pattern").

---

Strategy: Assets (CSS & JS) Minifying

Not just images weigh something. Code too. A huge bundle.js (2MB) is heavy.

• Minification: Remove whitespace and comments (main.js -> main.min.js).
• Tree Shaking: Delete unused code (Why load the whole Lodash library if you only use one function?).
• Compression: Activate Gzip or Brotli on the server. That reduces text files by 70%.

---

Myth-Busting: "High Quality Needs Large Files"

False. With proper compression (e.g. with Squoosh or TinyPNG) the human eye sees no difference between Quality 100 (2MB) and Quality 80 (200KB). We often upload "Retina-Ready" images that are oversized even on 4K monitors. Be brave with compression.

---

Unasked Question: "What about Dark Mode?"

Yes, Dark Mode saves energy! On OLED screens (modern phones), black pixels are off. They consume 0 power. White pixels consume maximum. A design with Dark Mode option is therefore an active climate protection contribution (and saves the eyes).

---

FAQ: Green Assets