"Serves images with a low resolution" - need help understanding "Expected Size" and how to fix

[issababble]

Our articles are getting this warning on PSI saying we're serving images at a low resolution - which I would 100% agree with. I'm trying to understand how the recommendation from PSI works and how we can find a global solution to fix this issue across all the articles on our site.

For starters, can someone explain the logic of how "expected size" is calculated?

Many of our images are uploaded at a higher resolution, e.g., 1000px wide while the website displays a 412w image as shown in the PSI audit. Would it simply be a matter of using a 618w version to fix this recommendation? Understanding how that rec is calculated would help us apply an optimal sizing that fits our users, since we could even provide a higher size up to 1000w in most cases. I'd like to test to find the optimal size that would be beneficial for UX, but not too large for pagespeed. In order to find this balance, I think we need a better understanding of PSI's expected size logic.

Also, in Chrome devtools I can see that there is an "intrinsic size" and the "rendered size". If we were to simply serve a larger size with a higher resolution, what are the drawbacks, if any, to rely on browser resizing of the image down from the intrinsic to the rendered size?

I have reviewed the help link from that audit but it doesn't really answer my questions. Although from my basic knowledge about images, I assume the rec has something to do with pixel ratio/density - if that's true, how can I find out the pixel density to optimize for for my site and users?

Thank you

[adamraine]

I have reviewed the help link from that audit but it doesn't really answer my questions. Although from my basic knowledge about images

Yeah we can definitely improve our docs for this audit (See #15221).

I assume the rec has something to do with pixel ratio/density - if that's true, how can I find out the pixel density to optimize for for my site and users?

Your assumption is correct. If it helps:

• "Displayed size" refers the the size of the image element
• "Actual size" refers to the size of the image asset
• "Expected size" is the recommended image asset size given the size of the image element and the device pixel density

Lighthouse emulates a Moto G power by default but this can be changed in your configuration. Lighthouse is a lab tool and doesn't collect any real user metrics to indicate what device actual users are loading the page with.

[issababble]

Thanks Adam, are you by chance able to answer if there are any drawbacks to relying on browser resizing of the image down from the intrinsic to the rendered size? Wouldn't that trigger the "properly size images" warning in Lighthouse?

And can you clarify "given the size of the image element and the device pixel density" - is this essentially: if my image container is 400w and my target device is 2x density, I should be using a 800w image? If it's 3x density then a 1200w image?

[adamraine]

Thanks Adam, are you by chance able to answer if there are any drawbacks to relying on browser resizing of the image down from the intrinsic to the rendered size? Wouldn't that trigger the "properly size images" warning in Lighthouse?

The "properly size images" audit also accounts for pixel density so this shouldn't cause that audit to fail.

And can you clarify "given the size of the image element and the device pixel density" - is this essentially: if my image container is 400w and my target device is 2x density, I should be using a 800w image? If it's 3x density then a 1200w image?

Your calculations are correct for 2x density. However, for reasons mentioned in #15221 we actually cap our recommended sizes at 2x so a image container at 400w on a 3x density device would only need an 800w image. It is somewhat confusing but #15221 tracks improvements to our docs to describe this better.

[issababble]

I reviewed that, but didn't fully understand - I'll just stick with your guidance that density is capped at 2x! Thanks for the help in clearing all this up. :)