The Pilcrow

A WordPress developer's thoughts on professional and personal development. Written by Karin Taliga

Make WordPress output responsive image markup with RICG Responsive Images plugin

I recently listened to Episode 39 of the Apply Filters podcast, and I felt I needed to share a tip about a plugin they talked about. It’s called RICG Responsive Images and is available from wordpress.org.

The challenge of responsive images

Having a responsive website is a no-brainer today. As creators of websites, we need to make sure that the site looks good on mobile phones and tablets alike, on several different operating systems and browsers. This can sometimes be more challenging than one would think.

It’s easy for a theme developer to just make the images fluid by setting max-width: 100% in their css and move on, thinking that they solved the problem. But the issue is much more complex than that.

Shrinking the image is not responsive

Setting a css max-width value will simply shrink and/or expand the same image depending on the size of the screen. A large image will be squished down to a small size on a mobile screen, but it will still be just as big and heavy and will take up a lot of bandwidth to load. And a smaller image might get blown up on a bigger screen, causing loss of details and might even become pixelated and ugly. Ideally, we want to serve small images to small screens, and large images to large screens. Add retina screens into the mix, and you have quite a landscape of needs to cater to.

This problem has been recognized long ago, and the HTML5 specification has two ways of creating markup for responsive images – the new picture element and new attributes for the img element called scrset and sizes. As with most things HTML5, it requires support from the browsers in order for us to make use of them. You can follow the latest news on that front on the Responsive Images Community Group website, as well as case studies for when you should use each solution.

Responsive images requires new markup

New elements and attributes means that we need to write new markup for our images. At the moment of this writing, WordPress core does not output any of the responsive markup. And while the display of images in WordPress is controlled by the theme, the theme cannot – or rather should not – modify the markup. I would say that is plugin territory.

That’s why this plugin exists, and that is why I recommend it.

A plugin is a longer-term solution

Using a plugin for responsive images will keep the images responsive even when the user switches themes. But more than that, the aim of the RICG plugin is to someday become part of core.

If you add responsive markup creation to your theme, then you add bloat to the theme and more work for you in the future. You will have to change the theme and remove that image handling code when WordPress gets native image handling.

By relying on a plugin, you let the theme stay presentational and only do what it’s supposed to do.

Theme and plugin works together

That said, there is more to responsive design than simply activating a plugin and forgetting about it. For one thing, the plugin checks all available image sizes when calculating which images to include in the scrset attribute.

This means that the theme can register custom image sizes and the plugin will output them in the attribute markup, ready for the browser to choose from.

As noted in the comments of the podcast, this plugin is not solving the problem of art direction – using different cropped version of images for smaller sizes to convey a desired message.

But as a resolution switcher, it seems like this is as good as it gets for the time beeing.

You can download the plugin from wordpress.org and follow it’s development from the github repository.

And if you are not already subscribing to the Apply Filters podcast, check it out. It is hosted by Pippin Williamson and Brad Touesnard and focuses mainly around WordPress development. I highly recommend it.

Next Post

Previous Post

© 2018 The Pilcrow

Theme by Anders Norén