core(hidpr-images): never recommend more than 2x

[patrickhulce]

Summary
Updates the high DPR images audit to never recommend images larger than 2x. The case is obvious on mobile, I'm not really aware of 3x DPRs being a thing on desktop yet. The case is strong enough that I might go so far as to say Chrome should intervene and serve the 2x images instead of 3x images on mobile screens, but either way we shouldn't be encouraging it.

Related Issues/PRs
fixes #11505

[Beytoven]

I appreciate you breaking down the math here in addition to the explanation.

[paulirish]

Thanks!

I asked some experts about this a bit ago and this is what i heard back

---

I seem to recall reading that anything over 2.4x is overkill for most screens, but of course, I can't find the source now.

---

• At standard viewing length (28 inches), most people's visual acuity is < 2x DPR (link)
• "DPR 2 is good enough for most people; DPR 3 only benefits a very lucky few" (link)
• Twitter capped image density at 2x except for pinch zoom (link)
  Would this be an informative audit? My one reservation is that although I think 2x is a good rule-of-thumb, I think using 3x images in pinch-zoom situations is a good idea. Though this wrinkle could probably be covered in the audit text.

---

Yeah, it's been on my lists for a while to limit the resolutions of images that srcset to somewhere between 2x and 2.4x.
The problem is that today developers don't have an easy way to use srcset while ensuring their users don't load 3x and 4x images...

[patrickhulce]

@paulirish thanks for those links! Some of that sounds like how we might want to tweak the "images too large audit" is that right? Capping our "too large" audit at a DPR of 2 might be worth a separate discussion 👍

Even if 3x images for pinch-to-zoom are universally a good idea, I'm not sure how we would ever be able to distinguish that use case in Lighthouse such that we would encourage serving a 3x image, right?

At standard viewing length (28 inches)

😱 whoever came up with that must've been from a family of giants 😄 (most of that data seems to come from desktop where all of that is more reasonable, though monitor size is definitely a big assumption :))

[addyosmani]

I was happy to see this land, folks :)

The case is strong enough that I might go so far as to say Chrome should intervene and serve the 2x images instead of 3x images on mobile screens, but either way we shouldn't be encouraging it.

Yoav and I are exploring if there's enough data to help us decide whether the default behavior in Chrome should be to cap at 2x vs 3x (from what I've seen I'm inclined to agree 2x makes a lot of sense).

[patrickhulce]

Awesome! We've got some math to help that case you're welcome to borrow :)