9

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?

  • Can you please try this out with the correct way to use add_image_size? You always set the width argument to false - this should be an integer (third argument). – fischi Dec 10 '15 at 9:33
  • Ok, done that and added height-value of 9999. Resized thumbnails. No avail. – rob_st Dec 10 '15 at 9:44
  • The default of the max_srcset_image_width filter is 1600. – birgire Dec 10 '15 at 10:06
  • Good to know @birgire - but that doesn't help much. How do I change it (there seems to be no documentation yet) - and will a change solve my problem? – rob_st Dec 10 '15 at 14:38
9

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);
  • Thank you. I've set the height to 9999 - does it make any difference? I'll try it out. – rob_st Dec 11 '15 at 8:40
  • Thank you, that made it work. Although it is basically the same answer as this one and actually I prefer named functions - I accepted yours because you were first :-) – rob_st Dec 14 '15 at 14:50
  • I think this might be the answer I need, but I don't know what value $size_array should have. – Telarian Sep 18 '18 at 14:57
1

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 );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.