Tech Tip #42: Serve images at the size they're shown

That 4000-pixel photo is displayed 400 pixels wide.

Video created by explainapaper.com

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

Transcript

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.

All GreenCode Tech Tips · All GreenCode videos

  • Tip #42
  • For Developers
  • Length 1:06
  • Category Web and front-end
GreenCode

Want this checked on your own system? Talk to the GreenCode team.

Get in touch