How To Disable Auto WordPress Responsive Images

in Media

As of 4.4 WordPress will automatically add the srcset attribute to the images in your content. The srcset attribute allows you to define different images to use at different viewport breakpoints.

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w">

The problems comes if you're using a CDN to delivery your images such as Amazon S3 then you could get into the situation where you have image URLs coming from S3 and the srcset images coming from your local site. This means that images will work on mobile devices but not for desktop size screens.

There are a couple of solutions to this problem such as using the image srcset filter to change the location WordPress gets the other image sizes from or you could remove this functionality from WordPress completely by using the filter wp_calculate_image_srcset. If you return a false from this filter then WordPress will not add the additional srcset attribute.

Having a look into the code and bail out of this function earlier by using the filter wp_calculate_image_srcset_meta

wp-includes/media.php

All you need to do is return false from this function, the easiest way to return a false from a filter or action is to use the function __return_false. This is just a built-in WordPress function that returns false.

function __return_false() {
    return false;
}

Call this function from the wp_calculate_image_srcset_meta filter to stop WordPress from adding the srcset attribute.

add_filter( 'wp_calculate_image_srcset_meta', '__return_false' );

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To Newsletter

Get weekly updates to your email