Suggestions need additional clarity for "Serves images with low resolution"

[benmccann]

The logo image on https://c3.ventures is provided at 262 x 68 pixels. This matches the style="width: 262px; height: 68px" as well as width="262" and height="68" attributes on the image.

It's saying the expected size is 393 x 102, but there's no explanation as to why. The computed dimensions in the inspector are 262 x 68. I'm guessing this is due to a device pixel ratio of 1.5 being used by the test browser or something like that, but there's no information to indicate whether that might be the case. I don't know what DPRs are being tested with or should be supported as a best practice and when I click the link I don't see DPR mentioned at all, so if this is why the image is being flagged on the audit it seems like there's an opportunity for additional documentation.

[adamraine]

I'm guessing this is due to a device pixel ratio of 1.5 being used by the test browser or something like that, but there's no information to indicate whether that might be the case.

Lighthouse will use a device scale factor of 1.75 by default when testing a mobile page. I do think our docs could be more clear on this matter.

[benmccann]

Thank you. That's helpful. Though I'm still a bit confused why it'd be expecting an image of width 393 in that case since that's 1.5x the width defined in the page

[adamraine]

Good question, actually took some digging for me to find out why. The justification is hidden in a jsdoc comment:

https://github.com/GoogleChrome/lighthouse/blob/540f55ea3c15e9428a22ad180cc74d10e07eed27/core/audits/image-size-responsive.js#L283-L329

We should definitely write our own audit docs for this.

[benmccann]

Aha! Thank you so much for tracking that down.