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
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?