Responsive design is the best way to accommodate users of the diverse range of devices we can now expect to visit our sites. By using media queries and breakpoints to shape content to the screen on which it’s delivered, we can satisfy everyone from people sitting at their desk in front of a Retina iMac to those browsing on low-cost small-screened Android phones. And it’s essential that we do accommodate those users: as of last year, around a half of all web traffic originated on mobile devices.
WordPress theme developers have long recognized the trend towards mobile and coded responsive themes, but what if you want to implement responsive images on your WordPress site?
First, I want to clear up a source of confusion. Your site’s images may look great on mobile devices, but that doesn’t mean that they’re responsive. Browsers will resize images so that they fit in the available space, but they still have to download the full-size image.
To be truly responsive, a site has to offer a range of image sizes and allow the browser to choose between them. Otherwise, people browsing on small screens are forced to download your full-width featured images, only to have them squeezed into a tiny space. That’s an inefficient use of data for those on mobile devices with reduced bandwidth and bandwidth caps.
It can be quite complicated to implement fully responsive images on WordPress, requiring WordPress users to tangle with PHP and CSS. In this article, I want to offer a solution that even novice users can implement without trouble, and to do that we’re going to cut some corners.
If you want genuinely responsive images that you can configure to your sites breakpoints, take a look at this excellent article from CSS Tricks.
By default, WordPress creates some image sizes when you upload an image, but it doesn’t use these to offer appropriate image sizes for screens. It just uses them in different places in the themes. So a full-size image will be full-sized (and bandwidth intensive) regardless of the fact that WordPress has created some smaller versions to be used as thumbnails and so on.
But, we can use the Responsify Images plugin to leverage the image sizes WordPress produces to offer something approaching true responsive images. This plugin will add the secret code to your WordPress theme’s images to provide browsers the choice of which of the generated image sizes to download. That means browsers can pick the image size that best fits the screen of the device they are running on.
The Responsify Images plugin can do a lot more than we’ve discussed here, and you can check out the plugin’s GitHub page for further instructions, but for basic responsive images that can be implemented quickly and easily, this is the best solution I’ve come across.