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.
Remove srcset From Specific Images Only
Disabling the feature sitewide is a blunt instrument. If only certain images cause trouble (a logo, a hero that a CDN already resizes) you can strip srcset and sizes from individual images instead:
/**
* Remove srcset/sizes from attachment images conditionally
*/
add_filter( 'wp_get_attachment_image_attributes', function ( $attr, $attachment ) {
// Example: only strip it from a specific attachment ID
if ( 123 === $attachment->ID ) {
unset( $attr['srcset'], $attr['sizes'] );
}
return $attr;
}, 10, 2 );
For images inside post content, the equivalent hook is wp_content_img_tag (WordPress 6.0+), which hands you each <img> tag as a string to modify.
Cap srcset Instead of Removing It
Sometimes the problem isn’t srcset itself, it’s WordPress offering huge variations you never want served. Two filters tame it without disabling it:
// Don't offer candidates wider than 1200px
add_filter( 'max_srcset_image_width', fn() => 1200 );
// Stop WordPress from scaling huge uploads down to 2560px "-scaled" copies
add_filter( 'big_image_size_threshold', '__return_false' );
The big_image_size_threshold filter (WordPress 5.3+) controls the related “-scaled” behavior: by default any upload wider than 2560px gets a scaled copy that becomes the “full” size, which surprises a lot of people who expected their original back.
Should You Disable It?
Be honest about the trade-off before shipping the sitewide filter. On image-heavy pages, srcset meaningfully cuts bytes for phone-sized screens, and disabling it means mobile visitors download desktop-sized files. The cases where removing it is the right call: an external image CDN (Cloudinary, wsrv.nl, Cloudflare Images) already handles resizing, a layout where the browser consistently picks the wrong candidate because the sizes attribute doesn’t match the rendered width, or email/RSS contexts where the markup breaks downstream tools. If it’s just one layout misbehaving, fix the sizes attribute or use the per-image filter above before reaching for the kill switch.
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.
Top comments (0)