How to Add Responsive Images to Your WordPress Site (No Coding Required)

With the wide variety of devices today, it's difficult to build web sites that function equally well on small mobile phones, smartphones, tablets, laptops, desktops, and all other kinds of devices coming in the future.  A particular pain point of mobile users is being forced (mostly unknowingly) to download large images while browsing sites. It not only takes up valuable battery life and megabytes of a data plan, but it also hurts the user experience by increasing the time it takes for a page to fully load. Fortunately, there is an easy-to-use solution today for WordPress sites – the RICG Responsive Images plugin.

Overview

The RICG Responsive Images plugin is a free plugin that adds responsive image functionality to your site with no coding required. For those curious, RICG stands for responsive images community group. This plugin takes advantage of the fact that WordPress by default automatically creates three image sizes for each image that's uploaded.  The end result of using this plugin is that bigger images are served to users on bigger screens and smaller images are served to users on smaller screens, providing both users with a better user experience.

This plugin uses a new HTML tag attribute called srcset.  The srcset attribute lets you specify multiple images for a given tag along with their widths (both of which are known by WordPress), letting the browser choose the best image to display for a given screen size and screen resolution.

Dependencies

The RICG Responsive Images plugin includes a bit of JavaScript (also known in this case as a polyfill) called Picturefill in order to add browser support for the srcset attribute.  I am a big fan of Picturefill and have written about it in the past. This polyfill is required since not all browsers support this attribute, and really old ones definitely don't. Since this dependency is automatically included, no action is required by the user.  However, WordPress developers wanting to leave out this JavaScript and rely on users to have up-to-date browsers can do so using some extra code documented by the plugin authors.

Setup

No extra actions are needed after installing this plugin to set up responsive images in WordPress. Once installed, all existing images on the site will become responsive images. For more advanced users and developers looking for additional web performance gains, there is an option to enable advanced image compression to reduce image file sizes even further. The extra code needed to turn on this option is also documented by the plugin authors.

Customization for WordPress Theme Developers

This plugin is also built with the needs of WordPress theme developers in mind. There are a few functions that can be used to change the default settings. One example of this that I've used is to customize the sizes attribute that is included for a given image. With a bit of custom code in a WordPress template file, you can specify a custom media query to be used for the image's sizes attribute. This is useful in cases where you only want an image to take up a certain amount of the viewport (not 100%) at various screen widths.

Caveats for WordPress Theme Developers

There is one consideration for theme developers when deciding whether to use this plugin. If a theme adds a bunch of custom image sizes (normally added using add_image_size()), additional database queries have to be made on each page load to look up all the various sizes of an image in order to include them in an image's srcset attribute. This could potentially hurt performance if a lot of image sizes are used. There are other custom responsive image solutions, such as one suggested by Morten Rand-Hendriksen, which use the WordPress transients API to cache the list of images for a period of time and minimize database queries.

More Resources

To read more about the RICG Responsive Images plugin, see its github repo and the Smashing Magazine article about it. If you're new to the world of responsive images, I recommend you watch  “Responsive Images Part 1”, a video written by one of the plugin's authors, Mat Marquis, and “Responsive Images Part 2”, a follow-up video by Yoav Weiss.