Controlling Responsive Image Sizes in WordPress

From WordPress 4.4 there is default support for responsive images which works invisibly under the hood mostly like a charm. Although it is work by default, there can be cases when we want to alter it, so let’s dive into a little bit.

Why to Use a Responsive Image Solution?

The most significant part of any website (in size) are the images after the smartphone boom and the appearance of the responsive design the users could browse the sites from mobile with a slow and limited mobile net.

Serving large images where it is unnecessary is an awful practice in web design. You make slower pages and take resources/money from the user. It is also harmful to a business owner because nobody will wait for your site.

Using any responsive image solution is mandatory in the modern, mobile-friendly web development.

The Types of The Responsive Media Solutions

For a long time, there wasn’t any native responsive image solution. In this era, we could use JavaScript-based solutions which worked well but still was a dependency. Today we have srcset and the <picture> element which are supported well. As usual, if you want to support older browsers, you need a polyfill (mainly a JS plugins).

Two solutions work similarly, but there are differences:

  • In the case of srcset, you declare the different images, and the image sizes on the breakpoint and the browser choose one model automatically. It is an attribute for the <img> tag.
  • In case of the <picture> element, you arrange everything and tell the browser exactly what to do and when. We can art direct our images as we wish.

For more information about srcset check out this CSS-Tricks article and for the <picture> element this MDN post.

The Supported WordPress Solution

In WordPress, the responsive image method is based on srcset which is understandable. Let the browser make the hard work which can make a lot of quick calculation based on sizes and density.

WordPress makes a lot of additional image sizes based on the default or the theme settings. Using these are easy we only need to add them in the srcset attribute.

The only theme specific part is the sizes attribute which tells the browser the exact image size in any predefined resolution.

A lot of new and hook come with this feature for a full exposure; please visit the official page.

We can set sizes for content images and featured images with the help of the wp_get_attachment_image_attributes and wp_calculate_image_sizes filters. The two solutions are similar but there are some differences so let’s check out two example code from Twenty Seventeen theme.

Modify The Content Image Sizes

The following code is well documented so you will see the pivot but in short:

  • we get the width of the image and depending on it we set up different output,
  • we also check if there is an active sidebar or if we are on an archive, home, search or page typed location if so we check a theme option, the size, and the page type.

As you see we can declare any conditional as we do it in our themes.

The $sizes get a string value separated by a media query and width value (the image box size in this resolution). In the end, the plus value is a fallback. We can use any value from CSS (em, rem, px, %, vw …).

/**
 * Add custom image sizes attribute to enhance responsive image functionality
 * for content images.
 *
 * @since Twenty Seventeen 1.0
 *
 * @param string $sizes A source size value for use in a 'sizes' attribute.
 * @param array  $size  Image size. Accepts an array of width and height
 *                      values in pixels (in that order).
 * @return string A source size value for use in a content image 'sizes' attribute.
 */
function twentyseventeen_content_image_sizes_attr( $sizes, $size ) {
	$width = $size[0];

	if ( 740 <= $width ) {
		$sizes = '(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px';
	}

	if ( is_active_sidebar( 'sidebar-1' ) || is_archive() || is_search() || is_home() || is_page() ) {
		if ( ! ( is_page() && 'one-column' === get_theme_mod( 'page_options' ) ) && 767 <= $width ) {
			 $sizes = '(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px';
		}
	}

	return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'twentyseventeen_content_image_sizes_attr', 10, 2 );

Modify The Featured Image Sizes

In this example, there aren’t any particular differences to the previous case. Because the hook and the function structure is different, we give the value back through the $attr[‘sizes’].

/**
 * Add custom image sizes attribute to enhance responsive image functionality
 * for post thumbnails.
 *
 * @since Twenty Seventeen 1.0
 *
 * @param array $attr       Attributes for the image markup.
 * @param int   $attachment Image attachment ID.
 * @param array $size       Registered image size or flat array of height and width dimensions.
 * @return array The filtered attributes for the image markup.
 */
function twentyseventeen_post_thumbnail_sizes_attr( $attr, $attachment, $size ) {
	if ( is_archive() || is_search() || is_home() ) {
		$attr['sizes'] = '(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px';
	} else {
		$attr['sizes'] = '100vw';
	}

	return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'twentyseventeen_post_thumbnail_sizes_attr', 10, 3 );

Use It If You Are Developing a Custom Theme

The responsive image is a small feature of the WP core, but if you are a theme developer, it can mean a lot. It does matter what the physical size of our images is. Implementing this method is 10-minute maximum so give it a try! If you need more example check out any newer official WordPress themes!

Special thanks for the following recource(s): Icon made by Icongeek26 from www.flaticon.com