How to Fix PageSpeed Scores With srcset

If your PageSpeed score drops when you add a hero image, the problem is usually straightforward.

What's actually happening

PageSpeed penalizes pages that serve oversized images to small screens. If your hero image is 1200px wide and a mobile user downloads it anyway, that's wasted bandwidth, and it shows up in your score.

The solution is srcset. It tells the browser which version of an image to load based on the device's viewport.

How to implement it

First, generate multiple sizes of your image:

• 300w (for mobile)
• 768w (for tablets)
• 1200w or 1536w (for desktop)

Then reference all three in your HTML:

<img
  srcset="/assets/img/hero.webp 1200w, 
          /assets/img/hero-768px.webp 768w,
          /assets/img/hero-300px.webp 300w"
  src="/assets/img/hero.webp"
  alt="Description of the image">

The browser picks the right one. You don't need a CDN or an image service.

A few practical notes

Use the actual width of your original image as the largest size in srcset. If your image is 1536px wide, make that your max.

For automating image generation, sharp is a reliable Node.js tool. It fits into any build pipeline and handles the resizing without external services.

This change gets most sites from a failing image score to a passing one. It's not complicated. Just not obvious if you haven't run into it before.

Reach out if you want help with web performance.