Responsive Images in WordPress with RICG

11 April 2015

UPDATE: This plugin has been proposed to be merged into WordPress core for version 4.4. Please offer your feedback if you use this plugin.

We all know by now that responsive web-design is important as there is increased viewing on non-desktop devices… Most of us know that it is not just a question of how it looks on said devices but that bandwidth needs to be considered and optimisations need to be made. Many of us have heard of the new HTML5 picture element, picturefill.js (the polyfill), and the srcset and sizes attributes to that allow the browser to choose the appropriate image from a list of provided images. For anyone who hasn’t here is a quick introduction.

The Picture Element

The picture elements allows us to not only insert the appropriately sized image for a given size but also allows for what is often referred to as “art direction.” This means that the image in question varies depending on the width of the browser window. This differs from simply switching out the image size yet keeping the same image proportions. Often an image needs to be cropped differently to fit into different contexts.

The Polyfill

As the picture element is relatively new and is not accepted by all browsers it requires a polyfill so that it will be accepted by non-compliant browsers.

The Required Attributes

srcset contains a list of images from which the browser will choose to make a request. sizes contain the corresponding sizes that map to the srcset list. Here is some sample markup courtesty of responsiveimages.org

  <img src="small.jpg"
    srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
    sizes="(min-width: 36em) 33.3vw, 100vw"
    alt="A rad wolf" />

So what is RICG?

Not the catchiest of abbreviations but it stand for Responsive Image Community Group.

So how to do this with a WordPress theme?

The beauty of WordPress is that it automatically generates three image sizes- thumbnail, medium, and large. The original image size is referred to as full. It’s important to note that WordPress will not generated image sizes larger that the original size. So we already have our list. You can add to that that list using the function

add_image_size() which will allow you to tell WordPress to generate other sizes. These image sizes will serve as fodder for our srcset attribute and the generated sizes as our sizes. <!-- more -->

Is there a plugin? Why, yes, as a matter of fact there is a plugin.

RICG Responsive Images has been developed and contributed to by several WordPress core developers which is a good sign that it is slated for future core integration. You may also recognise some of the other developers who are not as often seen in the context of WordPress. All this to say its a fairly safe bet if you are looking for something that will continue to work and to be supported.

Do I need a plugin? You can include the appropriate markup and use various WordPress functions to generate your

srcset and sizes lists and it is possible to enqueue the polyfill.js script using wp_enqueue_script() in either a custom plugin or in functions.php. That said, The above plugin offers some handy functions and if you think you can do better I suggest contributing instead. So let’s assume that we’re going to take advantage of this plugin and it’s handy functions. First of all it is usable right out of the box. It modifies the <img/> tag when an image is output from the media uploader or used as a featured image. If you do any theme development you will know that there are cases when neither of these two conditions are met.

A Case in Point

Rather than speaking about this abstractly, we’ll imagine that we are including a slider with flexslider (or some other slider.) This rather specific example uses markup from the

Advanced Custom Fields plugin (because this is how I would do this.) Without making any allowances for responsive images our code would look like this: https://gist.github.com/ae5bf2d03d5cdf3863eb I should note that the ‘slide’ image size is one that I added for this purpose and is not a default image size generated by WordPress. to do so I added the following to functions.php:

  add_image_size( 'slide', 1200, 500, true );

Here is the same markup using functions specific to RICG Responsive Images (documented here):

  $images = get_field('slides');

  <?php if( $images ) : ?>
    <div id="slider" class="flexslider">

      <ul class="slides">
        <?php foreach( $images as $image ): ?>

        <?php if(function_exists('tevkori_get_srcset_array')){ ?>

        <?php $srcset= tevkori_get_srcset_array( $image['ID'], 'slide' );?>
                <li>
                    <img sizes="<?php echo tevkori_get_sizes( $image['ID'], 'slide' ); ?>" srcset="<?php echo implode( ', ', $srcset ); ?>" alt="<?php echo $image['alt']; ?>" />
                </li>

        <?php } else { ?>
                <li>
                    <img src="<?php echo $image['sizes']['slide']; ?>" alt="<?php echo $image['alt']; ?>" />
                </li>
        <?php } ?>

        <?php endforeach; ?>
      </ul>
    </div>
  <?php endif; ?>

Don’t forget if you ship a theme using these functions you will need to require the plugin.

Some things you should know…

There are a few caveats to working with this plugin. The first is that it doesn’t work as well with images that have already been generated. Even if you regenerate thumbnails (i.e. all image sizes) you will still likely run into problems. This is especially true if the image ratio changes. It is also worth mentioning that there are cases in certain browsers where Another point of note is that the image ratio remains the same. That is to say the height and width of the image will remain proportional and a horizontal image will not become a vertical one just because the browser determines the screen width is narrower. This makes sense as it is no different from serving as single large image that is shrunk according to the browser width. You may be saying to yourself at this point “Now wait a minute… I don’t want the ratio of my images to be preserved! I want different ratios depending on the size of the device.” You may even be thinking “…but I want to serve different images depending on the width of the device.” Well, I have two things to say to you. First, that is beyond the scope of our plugin here. The RICG plugin does not support or offer an easy solution for Art direction. What is Art direction?

Art direction refers to loading differently styled images at different breakpoints — whether that means entirely new images or the same image cropped or focused differently. This feature would require use of the picture element, which in turn would mean a lot more markup to generate the final image.

-Tim Evko for Smashing Magazine

Secondly, that is entirely possible to do using the picture element. In fact, that’s pretty much what its for. Moreover, we can use our handy RICG Responsive Image functions within the picture element in order to simplify things. If that’s your goal please stay tuned for my next article.

Tutorial WordPress RWD