Blog Featured Blurry Images

WordPress 4.4 came with many new features one of which could potentially cause large images to go blurry. It happens because of the way the images are dealt with starting from version 4.4.

WordPress utilises <img> tag’s “srcset” attribute to allow the browser choose from a few different (dimension wise) images depending on the current size of available viewport. This is a very nice solution for responsive websites and you can read more about it here.

By default, the maximum size that srcset allows the image to be is 1600p pixels wide. So, if your image is larger than the 1600px version of your image will be used by the browser and that will cause it to be blurry.

To fix that, you need to increase the 1600px limit mentioned above by adding a filter to your functions.php file.

// Increase the maximum allowed image width to 2000 pixels
add_filter( 'max_srcset_image_width', function( $max_srcset_image_width, $size_array ) {
    return 2000;
}, 10, 2 );

Anton Zaroutski

WordPress Specialist, Front End and PHP Developer, @xeiter

Leave a Reply

Your email address will not be published. Required fields are marked *