Introduction
Images are central to digital design, used in branding, storytelling and user interfaces. However, visuals also account for a significant share of web data and therefore, energy consumption. Choosing the right format and compression can significantly reduce a page’s environmental footprint. This blog post explores which image formats are the most sustainable and how compression affects both performance and visual quality.
Practical Exercise: Format & Compression Testing
Step 1: Test Setup
For this experiment, I selected a standard high-resolution image (1920×1080 px) often used in digital design and exported it using various formats and compression settings. The goal was to analyze both file size and quality across commonly used formats: JPEG, PNG, WebP, and AVIF.
Step 2: Results
| Format | File Size | Compression Ratio (from ~777 KB original JPEG) |
|---|---|---|
| JPEG (80%) | 233 KB | ~70% smaller |
| PNG | 2995 KB | +286% larger |
| WebP | 153 KB | ~80% smaller |
| AVIF | 232 KB | ~70% smaller |
- WebP produced the smallest file size with minimal quality loss, making it the most efficient format tested.
- AVIF performed similarly to JPEG in size, with slightly more compression artifacts in fine detail.
- PNG, while lossless, resulted in the largest file by far, almost four times the original file size, making it unsuitable for large photographic content.
Step 3: Visual Quality Evaluation
In a side-by-side comparison, JPEG, WebP, and AVIF maintained strong visual fidelity suitable for most web use cases. PNG retained perfect clarity but at a significant cost in file size. The results show that lossy formats like WebP and AVIF provide the best balance between sustainability and design quality.
Conclusion
Choosing the right image format is a simple but effective way to reduce the environmental impact of digital design. Based on this test:
- Using WebP for web visuals when broad browser support is needed.
- Using AVIF when maximum compression is required and support allows.
- Using PNG usage to icons or images with transparency where necessary.
Even small reductions in image file size can scale into major energy savings across thousands of page views.
