The problem

Pages send one large original image to every device and let the browser shrink it. Phones download many times the pixels they can show.

The fix you can use today

• Generate several widths of each image at build time or through an image CDN.
• Use srcset and sizes so the browser picks the nearest size.
• Check in your page audit for images much larger than their display size.

The Green Software Foundation suggests serving images at the size they are shown. GreenCode draws on these patterns when it checks software.

Tools that help

• Lighthouse: audits a page for total byte weight, unused JavaScript and CSS, image formats and offscreen images
• WebPageTest: loads a real page and shows every request, its size and when it loaded

How GreenCode helps

GreenCode helps tackle this by practising it on greencode.ai: WebP images, scripts only where they are used and leaner pages cut a first view of the home page from 6.8 MB to 1.7 MB. More on this.

Tags

#images#web-performance#frontend

Sources

• Green Software Foundation, Green Software Patterns: Optimize image size
• Green Software Foundation, Green Software Patterns: Serve images in modern formats
• HTTP Archive, Web Almanac 2024, Sustainability: responsive images and modern formats
• W3C, Web Sustainability Guidelines: resize, optimise and compress media for different screens

All GreenCode Tech Tips