Responsive Images and WordPress

The number of users browsing the web with mobiles and tablets has rapidly grown over the last few years. Because of this it has become more and more important for business owners and web developers to create websites that are responsive. That is, one website that works perfectly across every device. Responsive development itself is relatively straight forward. We use Media Queries to achieve a responsive site. These are simple snippets of CSS code that detect the window resolution, pixel density and a number of other attributes that allow the developer to modify styles at various “breakpoints” of their choosing. Breakpoints are the sizes at which the website adjusts, typically being iPad landscape, iPad portrait and then various other mobile device sizes. This is all well and good, but all that adjusting the media queries will do is change the basic styles of elements on the page. This may be okay for websites that don’t rely much on images, but if the website does have a lot of images (and large ones at that, as is the trend in 2015) the website would slow down dramatically – not very handy considering that most users will ditch a website if it is not useable within the first 3-5 seconds.

What’s the solution? The HTML ‘picture’ tag?

responsive-images-wordpress-picturetag There have been a number of attempts to solve this problem. These include the HTML <picture> tag, which allows you to specify a different source at different media sizes. Here is an example of how the code for this looks.

<picture> <source media="(min-width: 960px)" srcset="path-to-image"> <source media="(min-width: 400px)" srcset="path-to-smaller-image"> <img src='path-to-original-or-fallback-image'/> </picture>

The HTML <picture> tag is nice and simple, however the support is currently quite lacking with Chrome 38+, Opera 27+ and FireFox 38+ supporting it natively (keep reading for more on this).

What about ‘srcset’?

responsive-images-wordpress-srcset The second method is using the ‘srcset’ attribute on an <img> tag. This method is slightly more supported, with the majority of modern browsers having at least partial support (IE is the main exception – no surprise there!). This ‘srcset’ method would look something a little like this:

<img src='path-to-original-or-fallback-image' srcset="path-to-image 960w, path-to-smaller-image 400w"/>

Now what about the browser that don’t support any of these? Well thats simple – enter the solution: Picturefill.js

The solution: PictureFill

responsive-images-wordpress-picturefill Picturefill is a javascript polyfiller which adds support for many of the non-supported browsers including IE (at least down to IE 9 anyway). You simply add the script, code the images in either of the above methods and PictureFill will do the rest. If you want to know more about PictureFill and the two methods mentioned above, there are some great articles about these. Especially this one which is well worth a read.

WordPress integration

The above methods are all well and good, but there are some major issues when it comes to content management systems such as WordPress. The first being that WordPress only serves out one image at a certain size e.g. thumbnail, medium, large, full. The second is that although you can add custom attributes, the outputted image to do so, with the images that you would like to serve at different break points, would make your code look a mess and quite hard to read.

Not to worry there is a solution

responsive-images-wordpress-plugin First, there’s a nice little plugin that we need to download. It’s called RICG Responsive Images. This plugin will work on its own by default. and put simply, it will use the image sizes that WordPress creates whenever you upload an image and wherever “the_thumbnail” function is called, it will use those preset image sizes and automatically include them for you. The issue with this is that WordPress only has 3 built in image sizes. “Thumbnail”, “Medium” and “Large” – not many variations to choose from is it?

The ‘add_image_size’ function

Well that’s where WordPress’s  “add_image_size” function comes in. This function allows you to create new image sizes that WordPress will auto create whenever a new image is uploaded. It has a number of attributes and would look a little like this when used in your functions.php.

add_image_size('Size_Name',width,height,crop)

The crop attribute can be true, false or an array specifying the crop position. I personally add in some extra image sizes based on the website’s breakpoints. So this code will normally suffice for me. Just copy and paste it into your themes functions.php.

function resposive_image_sizes() { add_image_size('responsive-1280',1280,1280,array('center',center)); add_image_size('responsive-960',960,960,array('center',center)); add_image_size('responsive-768',768,768,array('center',center)); add_image_size('responsive-500',500,500,array('center',center)); add_image_size('responsive-320',320,320,array('center',center)); } add_action('init','resposive_image_sizes');

This function will tell WordPress that whenever you upload a new image to the media library, post or anywhere else it should also use the new image to create cropped version at these sizes cropping the image from the centre.

Possible issues with the crop of your images

Now with these new image sizes in place you might be happy to let RICG do its thing. However, you might notice that the image gets cropped in a way that you don’t like, or it gets cropped in a way that takes the focus point away from where it needs to be. Remember, that although the image is now a little more compressed and optimised for the device, it is completely pointless if it looses the impact needed. Thats where my second choice of plugin comes in handy. responsive-images-wordpress-plugin-post-thumbnail-editor Post Thumbnail Editor is a plugin that allows you to crop an image yourself for each of the built in (or custom) image sizes in WordPress. With this plugin it is possible to maintain the focus of attention to where you want, no matter which image size is show. You simply upload the new image, then when you click the “Post Thumbnail Editor” button under the attachment / media details, just select the image size you would like to crop from the right menu. From there click and drag on the image to crop it at the aspect ratio of the chosen image. And finally, click the “Crop” button and then the save icon and the new image will be created for this image specified size. That’s it. There is nothing else to it. Just install two simple plugins, add a few new image sizes and your set.

The limitations

As you would expect, there is at least one limitation of this method and for me it is that you can’t switch out the image for a completely new one. You have to use the same image in its cropped form. At least for now anyway. I’m sure someone will find a way to allow for selecting different images at different sizes at some point.

Subscribe to our newsletter

Get access to all our guides and resources

We will never treat your email address badly. We’ll love and cherish it and treat it right.

Would you like to be notified each time we post new digital media?