Chrome does not display suitable srcset picture

2019-07-23 15:55发布

问题:

I'm trying to use img srcset attribute with Chrome, but it does not display srcset suitable picture. I test it on Linux (Chromium 41) and Windows (Chrome 42) with two different 1x devices.

I set up two pictures: 512px and 1054px wide pictures. But Chrome still displays 512px picture at 734px or less viewport width and 1054px picture at 735px or more.

It works fine with Firefox (enabling srcset in config).

Why Chrome displays 512px picture when viewport width is higher than 512px ?

body {
  background-color: #000;
}
img {
  max-width: 100%;
}
<img srcset="
    http://download.blender.org/institute/logos/blender-socket.png 512w,
    http://download.blender.org/institute/BlenderDesktopLogo.png 1054w" sizes="100vw">

Codepen link : http://codepen.io/anon/pen/dooQvJ

回答1:

A chromium issue have been opened about upscaling issue : https://code.google.com/p/chromium/issues/detail?id=456084

Upscaling seems to be actual Chromium algorithm to displays srcset pictures:

The upscaling is by design. As a compromise between over-downloading and image quality we "draw a line" between the resources at their geometric mean. We may change that behavior in the future based on network condition, user preferences, current DPR, etc.