I'm not quiet sure if it's an actual bug or if I'm just misusing srcset/sizes. We have an img tag with these properties (I removed all other properties to keep it as simple as possible, example can be found here: https://jsbin.com/sepesenodo):
sizes="420px"srcset="https://images.simedia.cloud/eassistant/originals/500x334/3090_30bfb97ab7a849a3896d295f0a57bbfc.jpg 500w,https://images.simedia.cloud/eassistant/originals/600x400/3090_30bfb97ab7a849a3896d295f0a57bbfc.jpg 600w"
We have 27" monitors with a resolution of 2560x1440 and the scaling is set to 125% (inside the Windows settings).
window.devicePixelRatio gives 1.25 in both Firefox and Chrome/Chromium-Based Edge.
Now with the above img properties and display settings I would expect the browsers to choose the 600x400 image (width of 420px * 1.25 = 525, which means the 500x334 image would be too small). Firefox chooses the 600x400 image (showing a crisp sharp image), Chrome and Chromium-Based Edge however choose the 500x334 image, which results in a blurrish image.
Am I doing something wrong here or is this a bug on Chrome/Chromium's side?
CodePudding user response：
As has been pointed out on Twitter, Chrome picks the "closest" image instead of the "smallest image that's bigger" when DPR>1. This is intended behavior.
Here's a walkthrough of what's happening:
Per spec, browsers figure out the densities of the candidates:
- 500w/420px = 1.1904761905x
- 600w/420px = 1.4285714286x
The spec then gives browsers the freedom to pick whichever candidate they want.
Safari and Firefox choose the smallest candidate that's higher-density than the current DPR. In this case (1.25x), that's the 600w resource.
Chrome figures out which resource is "closest" by geometric mean. The distances here are:
- 1.25x / 1.1904761905x = 1.05
- 1.4285714286x / 1.25x = 1.1428571429
Smallest distance wins, so the first resource (500w) is chosen.