WP 4.4. responsive images browser choosing the "wrong" one

Question

I'm glad that WP 4.4. ships with a built-in responsive image feature. But I'm not that happy with it.

I have set up some custom image sizes in my functions.php:

add_image_size('post-thumbnails', 600, 600, true);
add_image_size('news-large', 1024, false);
add_image_size('news-small', 500, false);
add_image_size('3-col', 500, 375, true);
add_image_size('presscutting', 600, 850, true);
add_image_size('medium-large', 768, false); // just added today for devices support
add_image_size('full-feature-image', 2000, false);
add_image_size('gallery-image', 800, 600, true);

As I figured, images that aren't cropped (cropping set to false) are added to the srcset. An image is output in the frontend like (line breaks added for better readability):

<img width="2000" height="1335"
src="http://mywebsite.com/cms/wp-content/uploads/2015/03/image-2000x1335.jpg" 
class="attachment-full-feature-image size-full-feature-image"
alt="asdf"
srcset="
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-300x200.jpg 300w, 
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-768x513.jpg 768w, 
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-1024x683.jpg 1024w, 
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-500x334.jpg 500w" 
sizes="(max-width: 2000px) 100vw, 2000px">

But now my problem: On my screen, only the images specified with 1024px width are shown, although it hast a 1600px screen resolution. So all the images look blurry.

How can i make WP and/or my browser use the 2kpx image instead? Would I have to add new image sizes for, let's say 1280px, 1440px, 1600px, 1968px? Or is there a simpler way of telling WP / the browser to use the larger image instead of showing a blurry and way too small version?

Answer 1

Concerning documentation there is this blog post on the Make Blog:

Responsive Images in WordPress 4.4

To increase the 1600px limit mentioned in the comments try this:

add_filter('max_srcset_image_width', function($max_srcset_image_width, $size_array){
    return 2000;
}, 10, 2);

Finally as already mentioned you should fix your calls to add_image_size

add_image_size('news-large', 1024, false);

needs to be

add_image_size('news-large', 1024, 0, false);

Answer 2

I solved the same issue by adding an extra size to the srcset with a filter function that you can add in your functions.php:

function filter_max_srcset( $max_width, $size_array ) {
    if ( $size_array[0] === 1800 ) {
        $max_width = 1800;
    }
    return $max_width;
}
add_filter( 'max_srcset_image_width', 'filter_max_srcset', 10, 2 );