Since version 4.4 WordPress has shipped with built-in responsive images. This feature will automatically add srcset
size variations to all CMS controlled images.
Since WordPress 4.4, native responsive images is supported by including srcset and sizes attributes to the image markup it generates.
While srcset
does have its uses, but sometimes it ends up creating more problems than it solves depending on the page and layout you’re working with.
Disable Responsive Images in WordPress
To completely disable the responsive images feature in WordPress with a single line of code:
/**
* Disable Responsive Images
*/
add_filter( 'wp_calculate_image_srcset', '__return_false' );
That’s it, nothing more is needed. Surprisingly there are many other articles online covering the same topic, yet very few mention this simple approach.
Origins & Purpose of srcset
The srcset
attribute was added to the HTML specification as a way to serve up different image sizes to a broad range of screen sizes, resolutions, and devices.
In theory, it’s a good thing, but in practice it can often create more problems than it solves. Using it can lead to an overly complex layout with many potential issues, where you find yourself pulling at strings when issues occur. When combined with @media
queries, it can lead to unexpected behavior from having too many variations in layout.