Srcset seems to not properly resize image while PageSpeed Insights test

Question

I have a page run by Hubspot Blog and an image implementation with srcset, looking like this:

<img loading="lazy" src="
https://emobility-magazin.com/hs-fs/hubfs/Element%[email protected]?width=480&amp;name=Element%[email protected]" 
alt="Element 23@300x" width="480" style="width: 480px;" srcset="
https://emobility-magazin.com/hs-fs/hubfs/Element%[email protected]?width=240&amp;name=Element%[email protected] 240w, 
https://emobility-magazin.com/hs-fs/hubfs/Element%[email protected]?width=480&amp;name=Element%[email protected] 480w, 
https://emobility-magazin.com/hs-fs/hubfs/Element%[email protected]?width=720&amp;name=Element%[email protected] 720w, 
https://emobility-magazin.com/hs-fs/hubfs/Element%[email protected]?width=960&amp;name=Element%[email protected] 960w, 
https://emobility-magazin.com/hs-fs/hubfs/Element%[email protected]?width=1200&amp;name=Element%[email protected] 1200w, 
https://emobility-magazin.com/hs-fs/hubfs/Element%[email protected]?width=1440&amp;name=Element%[email protected] 1440w" 
sizes="(max-width: 480px) 100vw, 480px">

The issue: Google PageSpeed Insights test delivers as an opportunity properly size images, with a diagnozed problem with the image I mentioned above. It looks like the srcset doesn't work for PageSpeed Insights test and the image isn't resized properly.

Getting the test data directly through Page Speed Insights API the issue is diagnozed too, on the same way.

But, running the Chrome-own Lighthouse test outta Developer Tools (incognito mode), the issue isn't there - the image seems to be properly resized by srcset.

My question: is there something, what prevents correct resizing while testing by PageSpeed Insights test? Are there any issues in my srcset implementation? Or is this a kind of bug of PageSpeed Insights?

Answer 1

So there's a couple of things going on here:

1. All your images are the same 6510x10194 images. So the audit is correct to highlight the image as improperly sized. Is the width param supposed to result in different size images being returned?
2. I'm not sure why it's not failing the audit on desktop. I can repeat what you see but to me it should be failing there too. So PSI looks more correct here.
3. Your sizes attribute looks incomplete to me. Maybe that's what's throwing off the browser for point 2?

When I run it through https://ausi.github.io/respimagelint/ it gives the following output:

W descriptor doesn’t match the image size Descriptor 240w doesn’t match the image size of 6510x10194 from …/Element%[email protected]?width=240….

Descriptor 480w doesn’t match the image size of 6510x10194 from …/Element%[email protected]?width=480….

Descriptor 720w doesn’t match the image size of 6510x10194 from …/Element%[email protected]?width=720….

Descriptor 960w doesn’t match the image size of 6510x10194 from …/Element%[email protected]?width=960….

Descriptor 1200w doesn’t match the image size of 6510x10194 from …/Element%[email protected]?width=1200….

Descriptor 1440w doesn’t match the image size of 6510x10194 from …/Element%[email protected]?width=1440….

A fitting image source should be available for all screen sizes At a viewport of 1280×720 the image was displayed 480 pixels wide, but the closest provided image has a width of 6510 which is 93% (66 megapixels) off. The affected viewports are 300×169–3000×4000.

Try using the following image sizes in <img srcset="…"> instead: 260×407, 480×752, 760×1190, 960×1503

Loading a large image and display it much smaller should be avoided to save bandwidth. Loading a small image and display it much larger should be avoided to prevent pixelated artifacts.

The sizes attribute has to match the width of the image

The size of the image doesn’t match the sizes attribute (max-width: 480px) 100vw, 480px. At a viewport of 1000x563 the image was 424 pixels wide instead of the specified 480 (-12% difference). The affected viewports are 300x169-480x640, 780x439-940x1253, 1000x563-1020x1360.

Try using sizes="(min-width: 1220px) 480px, (min-width: 1000px) calc(28vw + 144px), (min-width: 780px) calc(50vw - 36px), (min-width: 560px) 480px, calc(91.67vw - 15px)" instead.

The sizes attribute is a hint for browsers which should tell them how large the image will be displayed. If it doesn’t match the real size, browsers cannot select the correct image source.