2 edited tags
| link
    Tweeted twitter.com/StackWordPress/status/674966462663155712
1
source | link

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

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?