That 4000-pixel photo is displayed 400 pixels wide.
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 Green Software Foundation suggests serving images at the size they are shown. GreenCode draws on these patterns when it checks software.
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.
That four-thousand-pixel photo is shown four hundred pixels wide. Many pages send one big original image to every device. Then the browser shrinks it to fit. A phone downloads many times the pixels it can show. Every pixel sent but never seen wastes data and battery. Here is the fix you can use today. Make several widths of each image, at build time or through an image service. Use srcset and sizes, so the browser picks the nearest size. In your page check, look for images much bigger than their display size. Tools like Lighthouse and WebPageTest flag heavy images and show every request's size. The Green Software Foundation suggests serving images at the size they are shown. GreenCode draws on these patterns when it checks software. GreenCode helps tackle this by practising it on its own site. Its home page fell from six point eight to one point seven megabytes. That was GreenCode Tech Tip number forty-two. Follow for the next tip, and find more on greencode.ai/tech-tips.
Share this