Working with Responsive Images in WordPress

Until recently, working with responsive images in WordPress was a real challenge. Unless users were willing to write the functionality themselves, they were out of luck. The other option was to purchase a plugin or to find some other workaround, but there was no core functionality available that developers could take advantage of.

Themes created without support for responsive images were often slow performing, and usability was sometimes unstable across varying screen sizes. Those aren’t exactly attributes that customers and users associate with good functionality.

Fortunately, this all changed with the release of WordPress 4.4. Now functionality for responsive images is included directly within WordPress, allowing developers to work with it in themes, also. This was accomplished by taking a responsive images plugin and making it part of the WordPress core.

How it All Works

Obviously, unless you have already done so, your first step is to update to WordPress 4.4. Once you have completed the update, if you view the source code of your site, you will notice that the images on your site now have two new attributes: sizes and srcset. These attributes are filtered, which means that all image sizes available are present, but that the dimensions remain consistent with the original image.

The srcset attribute won’t allow custom cropping in cases where the aspect ratio is not the same as that of the original version of the image. This is to ensure that image quality is not compromised when it’s displayed on a user’s screen.

Getting Under the Hood and Making Changes

WordPress has added responsive images as a background feature, which means the process happens automatically. When you upload an image using the media uploader, the attributes are applied to those images without any intervention on your part. This is useful for image optimization, also.

Because it is a background feature, responsive images do not come with a user interface—they just happen. As a developer, you can modify the functions.php file in each of your themes in order to be certain that your images are given a sizes attribute that is accurate. Remember: When you want to refer to responsive images, that means the image tag attributes of sizes and srcset.

Default Attributes

As you begin working with this feature, you will notice that WordPress is pretty good at finding all possible sizes and adding them to the srcset attribute. Unfortunately, problems can come into play when it comes to the predictability of the sizes attribute. This is the attribute that is used to communicate the image width to browsers so that images will be available and viewable on any display screen.

Setting up this attribute as a default works in a couple of ways. The first is that it forces the sizes attribute to be applied to each image. This is helpful considering that it is now a mandatory requirement. The second is that it doesn’t allow browsers to use an image source any wider than the original size of the image. CSS code that is used to tweak image size depending on display screen widths (such as media queries) can unfortunately render this default much less useful.

Filter Hooks for Theme Developers

Because this default attribute only works with images that have not been modified by CSS code, WordPress has created filter hooks for theme developers to use. You just adjust the sizes attribute for all images using this hook. As a result, you can be certain that the sizes attribute that is served up is going to be ideal in every situation.

A Caveat

Before moving forward, let’s take a minute to state that the default attributes option is not the best way to provide good responsive image functionality. In fact, you should work to avoid creating themes that rely on this default. The reason for this is that the default attribute prevents browsers from modifying the image source when the display area is not as big as the size of the original image. Browsers are also unable to modify the source if it has been tweaked by CSS and a larger image is needed.

Image Filtering

As a theme developer, you can use filtering in your images in order to pull in a sizes attribute that is accurate. This can be accomplished by using a hook for the WordPress function, wp_calculate_image_sizes. You can use this function so that it works with your current theme. You can make changes that apply a different sizes attribute to different types of images.

New functions that come with this release now make it possible for the sizes and srcset attributes to be applied to all images that you have added using the WordPress media uploader. It also allows you to add the attributes to images in your posts. Take a look at wp_get_attachment_image_sizes. This returns a sizes attribute that you can catch and change via a filter in the functions.php file for your theme. Likewise, wp_get_attachment_image_srcset does the same thing, only for the srcset attribute.

Responsive Images and Your Custom Theme

The new functions that have come with this latest release are accompanied by many hooks that you can use to provide effective support for responsive images within your theme. These hooks include the following:

Wp_calculate_image_sizes – A hook that theme developers can use to adjust the sizes attribute to work with the breakpoints that are present in their theme.

Max_srcset_image_width – A hook that a theme developer will be able to use to filter according to the maximum width of images that are in the srcset attribute.

W_calculate_image_srcset – A hook that gives developers the ability to filter according to srcset attributes.

Learning More About Responsive Images Support

The WordPress developer manual can provide more guidance when it comes to using these hooks effectively. The research that you need to do will vary depending on your comfort level in making these kinds of behind-the-scenes adjustments. If you are a theme developer who pursues this as strictly a hobby, you might opt to do a bit of experimenting.

On the other hand, if you are a career theme developer, you might wish to invest in the time and resources required to truly master this update.

Benefits of Updating

If you haven’t already updated WordPress (or if your managed WordPress host hasn’t already updated for you), your users will benefit from some great perks when you do. Responsive image support can improve page performance as their pages won’t waste time pulling down images that are too large. Users will also note a very impressive improvement in the quality of the images. They won’t see the ‘sausage making’ that goes into everything. Instead, they will just see that it works nicely.

As the developer, you will have to adjust the sizes attribute in each of the functions.php files for all of your themes. However, once you have made this initial effort, things become much easier. After you have tackled the learning curve, you will find that working with this new functionality comes quite naturally.

It might take some research and practice to get a hang of this new functionality, and to get responsive image support to work for your custom themes. However, if you are willing to dig around in the developer’s manual and figure things out, your clients will truly appreciate the improvement in performance and functionality. This has been a long time coming, and seasoned theme developers and those tasked with maintaining custom themes are rightly excited by this update.