UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.8 Safari/537.36

Example URL:

Steps to reproduce the problem:
1. Define an <img> with multiple sizes available, e.g.

<img sizes="foo-600.jpg 600w, foo-500.jpg 500w, foo-400.jpg 400w" srcset="100vw" style="width: 100vw">

2. Vary the viewport size at widths < 400px (and eventually reload the page at that size).

What is the expected behavior?
Decent image scaling.

What went wrong?
When Chrome needs to scale down images just a bit, for example at 390px viewport width, the images are noticably losing lots of sharpness. In this example the 400px image would be loaded and scaled down, while in most cases chosing a somewhat larger size (such as 125% of that, that is 500w) would give way better results.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? No Current Firefox, Safari and Edge

Chrome version: 53.0.2785.8  Channel: dev
OS Version: Debian stretch/sid
Flash Version: disabled

A configurable heuristic which allows to prefer quality over bandwidth (or the other way round; this would be useful, too) when having to scale down images would help. Internally this could change the algorithm to select a source image from:

if (scalingDown) chooseSmallestImageLargerThan(width);

to:

if (highQuality && scalingDown) chooseSmallestImageLargerThan(width * 1.25);

or similar. It's obviously always a trade-off between quality and image size.

The effect is obviously less noticeable on HiDPI displays.

Unfortunately currently no time to produce a complete test case again, but will do if required.