Disable WordPress Responsive Images

WordPress responsive images are awesome. But some people want to use their own methods to implement. This post explains how to disable WordPress responsive image functionality so that you can use your own methods. It makes things easier when you don’t have to wrestle with what WordPress is doing.

tl;dr

Grab the plugin.

WordPress responsive images

If you haven’t looked under the hood of your WP-powered site recently, you may be surprised at some of the new liberties that WordPress is taking with your images. As of version 4.4, WordPress is executing its own responsive-image functionality behind the scenes. Specifically, there are two things that WordPress does with its built-in responsive-image feature:

1. Creates an additional copy of your image that is 768px
2. Adds srcset attributes to your image markup on the frontend

Again, this is great news for those who want automated responsive images. But for those of us who prefer our own solutions, it’s counter-productive. For example, The additional 768px image happens behind the scenes, with no corresponding option in the WP Admin (under Settings > Media). And further, srcset attributes are not always optimal or required. Consider the typical markup required to display an image:

<img src="http://example.com/wp/wp-content/uploads/2017/03/photo-600x471.jpg" alt="Whatever">

Here is what that image markup looks like after WordPress gets ahold of it (unfolded for clarity):

<img 
class="wp-image-944 size-medium" 
src="http://example.com/wp/wp-content/uploads/2017/03/photo-600x471.jpg" 
alt="photo" 
width="600" 
height="471" 
srcset="http://example.com/wp/wp-content/uploads/2017/03/photo-600x471.jpg 600w, 
http://example.com/wp/wp-content/uploads/2017/03/photo-1024x804.jpg 1024w, 
http://example.com/wp/wp-content/uploads/2017/03/photo.jpg 1600w" 
sizes="(max-width: 709px) 
85vw, (max-width: 909px) 
67vw, (max-width: 984px) 
61vw, (max-width: 1362px) 
45vw, 600px" />

Again, sweet for those who need it; not so much for those who don’t. I mean, that’s a LOT of extra markup just to display a responsive image. Imagine 10 or more images on the same page.. the extra bytes can really add up and chew into site performance.

Behind the scenes

Before looking at how to disable WordPress’ responsive image functionality, let’s examine what’s happening under the hood. First, here is the array of image data that is accessible via the intermediate_image_sizes_advanced filter hook:

array(4) {
	["thumbnail"]=> array(3) { 
		["width"]=> string(3) "150" 
		["height"]=> string(3) "150" 
		["crop"]=> string(1) "1"
	}
	["medium"]=> array(3) {
		["width"]=> string(3) "300" 
		["height"]=> string(3) "300" 
		["crop"]=> bool(false) 
	}
	["medium_large"]=> array(3) { 
		["width"]=> string(3) "768" 
		["height"]=> string(1) "0" 
		["crop"]=> bool(false) 
	}
	["large"]=> array(3) {
		["width"]=> string(4) "1024" 
		["height"]=> string(4) "1024" 
		["crop"]=> bool(false)
	}
}

So that means we can access the array and modify it however we would like. Here is a function that demonstrates this:

function shapeSpace_customize_image_sizes($sizes) {
	unset($sizes['thumbnail']);
	unset($sizes['medium']);
	unset($sizes['medium_large']);
	unset($sizes['large']);
	return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'shapeSpace_customize_image_sizes');

Here we are hooking into intermediate_image_sizes_advanced and unsetting (removing) each image size data from the $sizes array. Of course, this is just an example to illustrate the concept. Now let’s use this information to disable WP’s responsive image functionality.

Step 1: Disable the extra image

Using the above technique, we can prevent WordPress from auto-creating the additional 768px (medium_large) image:

function shapeSpace_customize_image_sizes($sizes) {
	unset($sizes['medium_large']); // 768px
	return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'shapeSpace_customize_image_sizes');

No modifications are required. Adding this function restores the pre-4.4 default image sizes, which also correspond to the settings provided on the WP Settings > Media screen:

• Thumbnail (default 150)
• Medium (default 300)
• Large (default 1024)

Note that you can skip this step if you want to keep medium-large copies of your uploaded images. You can implement only the next step, only this step, both, or none. Your call.

Step 2: Disable the srcset attributes

After disabling the auto-generated medium-large 768px image, the final step in disabling WordPress’ responsive functionality is to disable the srcset markup that is added to every <img> tag on the frontend. We can do that with the following slice of code:

// disable srcset on frontend
function disable_wp_responsive_images() {
	return 1;
}
add_filter('max_srcset_image_width', 'disable_wp_responsive_images');

And done. No modifications are required, just add to functions.php and enjoy the results. Which, by the way, you can verify by examining the source code of your web pages.

Disable via plugin

If you would rather use a plugin to disable WP’s responsive images, here you go:

<?php 
/*
	Plugin Name: Disable Responsive Images Complete
	Plugin URI: https://perishablepress.com/disable-wordpress-responsive-images/
	Description: Completely disables WP responsive images
	Tags: responsive, images, responsive images, disable, srcset
	Author: Jeff Starr
	Author URI: https://plugin-planet.com/
	Donate link: https://monzillamedia.com/donate.html
	Contributors: specialk
	Requires at least: 4.4
	Tested up to: 5.1
	Stable tag: 1.4
	Version: 1.4
	Requires PHP: 5.2
	License: GPL v2 or later
*/

if (!defined('ABSPATH')) exit;

// disable srcset on frontend
function disable_wp_responsive_images() {
	
	return 1;
	
}
add_filter('max_srcset_image_width', 'disable_wp_responsive_images');

// disable 768px image generation
function disable_wp_responsive_image_sizes($sizes) {
	
	unset($sizes['medium_large']);
	
	return $sizes;
	
}
add_filter('intermediate_image_sizes_advanced', 'disable_wp_responsive_image_sizes');

This plugin combines the two steps above into a simple plugin. I use this on several of my own sites, including this one. It just works. If and when WordPress changes how it handles responsive images, I’ll update this code accordingly. So if you know of any changes, or if I’ve missed anything, please let me know in the comments or directly via email. If nothing else, you always can get the latest version of this plugin via the “Download” section, below.

Download

During a recent plugin dev-fest, I added this plugin to the WP Plugin Directory. The plugin available at the WP Directory is further developed than the previously provided code, and therefore the recommended way to go.

About the Author

Jeff Starr = Web Developer. Security Specialist. WordPress Buff.