When srcset selects images, it takes the screen density into account, but beyond a certain density, that can result in excessive downloaded images.
Currently, when adding `w` descriptors to srcset, developers run a risk that large `w` descriptor images will be used on small screens with very-high density values.
For example, when defining `<img srcset="300.jpg 300w, 600.jpg 600w, 1200.jpg 1200w, 2400.jpg 2400w">`, developers that define the 2400px wide image typically intend for it to be used for very large screens (e.g. a 32" 2x screen), but it often ends up also being used on small screens (e.g. a phone with 4x DPR and viewport width of 600+px) .Research
(by +Eric Portis
) shows that density above 2-2.2x is not visible by most people, and therefore we could avoid wasting those bytes and avoid the related slowdown.
for full discussion
I intend to experiment with putting a cap on the density taken into account, and enable developers to add large `w` descriptors to their srcset syntax (e.g. to serve large screens with 2x DPR) without worrying about triggering excessive downloads on small screens with 4x DPRs.
The code change
itself is rather simple. I'm adding it behind a disabled-by-default flag, and plan to experiment with it on Canary/Dev for starters, to see the impact on LCP and health metrics, and ensure we see positive performance benefits without degrading other user experience metrics.
Once this proves itself, I hope to move the experiment to Beta, Stable and eventually ship this by default. I'll send a separate I2S for the latter.
Please let me know if this is an awful idea, or if I should send a more formal intent for this.