Lighthouse: "Properly size images" does not take device DPI into account

[vincentriemer]

I've been building a blog frontend and auditing it via lighthouse. I've fixed offscreen image issues but the cover image is getting reported with a 50% potential savings:

From what I can tell, this is due to the fact that I am using a fairly comprehensive picture element so due to the fact that lighthouse tests against a simulated nexus device with a higher DPI, the page is rendering the 2x version of the image but the audit wants the 1x version.

Here's the html source of the image:

<picture>
  <source type="image/webp" srcset="https://media.graphcms.com/resize=w:1600,h:960,f:crop/output=r:landscape,c:true,q:80,t:true,f:webp/mvz0OU6gRyfHaiY3Vwpw 1x, https://media.graphcms.com/resize=w:3200,h:1920,f:crop/output=r:landscape,c:true,q:80,t:true,f:webp/mvz0OU6gRyfHaiY3Vwpw 2x, https://media.graphcms.com/resize=w:4800,h:2880,f:crop/output=r:landscape,c:true,q:80,t:true,f:webp/mvz0OU6gRyfHaiY3Vwpw 3x" media="(min-width: 1600px)">
  <source srcset="https://media.graphcms.com/resize=w:1600,h:960,f:crop/output=r:landscape,c:true,q:80,t:true,f:jpg/mvz0OU6gRyfHaiY3Vwpw 1x, https://media.graphcms.com/resize=w:3200,h:1920,f:crop/output=r:landscape,c:true,q:80,t:true,f:jpg/mvz0OU6gRyfHaiY3Vwpw 2x, https://media.graphcms.com/resize=w:4800,h:2880,f:crop/output=r:landscape,c:true,q:80,t:true,f:jpg/mvz0OU6gRyfHaiY3Vwpw 3x" media="(min-width: 1600px)">
  <source type="image/webp" srcset="https://media.graphcms.com/resize=w:1024,h:615,f:crop/output=r:landscape,c:true,q:80,t:true,f:webp/mvz0OU6gRyfHaiY3Vwpw 1x, https://media.graphcms.com/resize=w:2048,h:1229,f:crop/output=r:landscape,c:true,q:80,t:true,f:webp/mvz0OU6gRyfHaiY3Vwpw 2x, https://media.graphcms.com/resize=w:3072,h:1844,f:crop/output=r:landscape,c:true,q:80,t:true,f:webp/mvz0OU6gRyfHaiY3Vwpw 3x" media="(min-width: 1024px)">
  <source srcset="https://media.graphcms.com/resize=w:1024,h:615,f:crop/output=r:landscape,c:true,q:80,t:true,f:jpg/mvz0OU6gRyfHaiY3Vwpw 1x, https://media.graphcms.com/resize=w:2048,h:1229,f:crop/output=r:landscape,c:true,q:80,t:true,f:jpg/mvz0OU6gRyfHaiY3Vwpw 2x, https://media.graphcms.com/resize=w:3072,h:1844,f:crop/output=r:landscape,c:true,q:80,t:true,f:jpg/mvz0OU6gRyfHaiY3Vwpw 3x" media="(min-width: 1024px)">
  <source type="image/webp" srcset="https://media.graphcms.com/resize=w:800,h:480,f:crop/output=r:landscape,c:true,q:80,t:true,f:webp/mvz0OU6gRyfHaiY3Vwpw 1x, https://media.graphcms.com/resize=w:1600,h:960,f:crop/output=r:landscape,c:true,q:80,t:true,f:webp/mvz0OU6gRyfHaiY3Vwpw 2x, https://media.graphcms.com/resize=w:2400,h:1440,f:crop/output=r:landscape,c:true,q:80,t:true,f:webp/mvz0OU6gRyfHaiY3Vwpw 3x" media="(min-width: 800px)">
  <source srcset="https://media.graphcms.com/resize=w:800,h:480,f:crop/output=r:landscape,c:true,q:80,t:true,f:jpg/mvz0OU6gRyfHaiY3Vwpw 1x, https://media.graphcms.com/resize=w:1600,h:960,f:crop/output=r:landscape,c:true,q:80,t:true,f:jpg/mvz0OU6gRyfHaiY3Vwpw 2x, https://media.graphcms.com/resize=w:2400,h:1440,f:crop/output=r:landscape,c:true,q:80,t:true,f:jpg/mvz0OU6gRyfHaiY3Vwpw 3x" media="(min-width: 800px)">
  <source type="image/webp" srcset="https://media.graphcms.com/resize=w:640,h:384,f:crop/output=r:landscape,c:true,q:80,t:true,f:webp/mvz0OU6gRyfHaiY3Vwpw 1x, https://media.graphcms.com/resize=w:1280,h:768,f:crop/output=r:landscape,c:true,q:80,t:true,f:webp/mvz0OU6gRyfHaiY3Vwpw 2x, https://media.graphcms.com/resize=w:1920,h:1152,f:crop/output=r:landscape,c:true,q:80,t:true,f:webp/mvz0OU6gRyfHaiY3Vwpw 3x" media="(min-width: 640px)">
  <source srcset="https://media.graphcms.com/resize=w:640,h:384,f:crop/output=r:landscape,c:true,q:80,t:true,f:jpg/mvz0OU6gRyfHaiY3Vwpw 1x, https://media.graphcms.com/resize=w:1280,h:768,f:crop/output=r:landscape,c:true,q:80,t:true,f:jpg/mvz0OU6gRyfHaiY3Vwpw 2x, https://media.graphcms.com/resize=w:1920,h:1152,f:crop/output=r:landscape,c:true,q:80,t:true,f:jpg/mvz0OU6gRyfHaiY3Vwpw 3x" media="(min-width: 640px)">
  <source type="image/webp" srcset="https://media.graphcms.com/resize=w:500,h:300,f:crop/output=r:landscape,c:true,q:80,t:true,f:webp/mvz0OU6gRyfHaiY3Vwpw 1x, https://media.graphcms.com/resize=w:1000,h:600,f:crop/output=r:landscape,c:true,q:80,t:true,f:webp/mvz0OU6gRyfHaiY3Vwpw 2x, https://media.graphcms.com/resize=w:1500,h:900,f:crop/output=r:landscape,c:true,q:80,t:true,f:webp/mvz0OU6gRyfHaiY3Vwpw 3x">
  <img style="display:block" class="cover jsx-2971413391" srcset="https://media.graphcms.com/resize=w:500,h:300,f:crop/output=r:landscape,c:true,q:80,t:true,f:jpg/mvz0OU6gRyfHaiY3Vwpw 1x, https://media.graphcms.com/resize=w:1000,h:600,f:crop/output=r:landscape,c:true,q:80,t:true,f:jpg/mvz0OU6gRyfHaiY3Vwpw 2x, https://media.graphcms.com/resize=w:1500,h:900,f:crop/output=r:landscape,c:true,q:80,t:true,f:jpg/mvz0OU6gRyfHaiY3Vwpw 3x" alt="">
</picture>

And here's the live version of the page: https://blog-ssr.vincentriemer.com/post/building-another-blog-from-scratch

Thanks!

[patrickhulce]

Hey there @vincentriemer thanks for filing! First of all, awesome job crafting that picture tag 👌

Now let's see what's going on here; we should already be accounting for the DPR of the device, but let's double check.

The image I see requested is 1500x900.
The display size is 412x240 at 2.625 DPR ~1071x630.

Total pixels downloaded 1500x900 = 1,350,000
Total pixels needed 1071x630 = 674,730
Total excess 1,350,000 - 674,730 = 675,270, roughly 50%.

The math checks out, but agreed it's frustrating you're already doing a lot of good things to wind up with a 50% savings result.

My personal suggestion would be to remove the 3x DPR option entirely when the use case is not selling professional photographs/high-fidelity marketing materials since the benefits of high-DPI tend to drop off after 2x even on phones and this is delivered over the web after all.

You can also feel free to ignore this result as opportunities don't count in the score at all and are just meant to be helpful hints :)

[vincentriemer]

Thanks for the response!

I had the opportunity to easily add the 3x asset so I felt like there would be no harm but I totally see your point about the diminishing returns. I made the (literally 1 character) change and the "opportunity" has gone away!

Perhaps the language for presenting these opportunities could be a little bit clearer (for example there's no copy that explains that they aren't counted in the score)

Thanks again!