How to make WordPress images responsive

Default avatar.
June 03, 2015
How to make WordPress images responsive.
Wordpress is a really powerful platform. Making a responsive theme and integrating it is pretty easy once you know the basics of theming. Responsive images, on the other hand, are not something Wordpress deals with out of the box. You could go down the route of manually generating each image size, then in the HTML editor you could manually type the image tag, srcset attributes and each image. This will not only take time, but could be an issue for any admin users that are not HTML-literate. Thankfully there is a way to make Wordpress do all the heavy lifting. It can generate all the image sizes from a single image upload then, via a plugin, implement the image tag and srcset attributes anywhere the author chooses to insert an image.

Step 1: modify functions.php to generate more image sizes

Every time you upload an image WordPress saves it at its native size. It also automatically generates 3 resized copies in these standard sizes (either height or width may change based on image ratio):
  1. Thumbnail (150×150)
  2. Medium (300×300)
  3. Large (1024×1024)
This is a really powerful feature as it can be customized to make any image size. This means you do not need to make multiple copies of an image in different sizes. You just upload a single image, and Wordpress creates the resized copies. This is done by modifying the functions.php file. To add new image sizes, you need to add calls to the add_image_size function. Here’s an example that adds four new image sizes:
add_image_size( 'sml_size', 300 ); 
add_image_size( 'mid_size', 600 ); 
add_image_size( 'lrg_size', 1200 ); 
add_image_size( 'sup_size', 2400 );
Each call to the function includes a name (so Wordpress can identify the size) and a width. The new sizes will be 300, 600, 1200 & 2400 pixels wide. It is possible with the add_image_size function to have Wordpress also set the height or crop the image, but the example above will keep the original image aspect ratio. (More can be found out about the add_image_size function in the Wordpress Codex.) The example above only shows four new image sizes being added, but you may want to add more or less... this will be based on your theme design. Now any time an image is upload to Wordpress, it will generate the new image sizes. The next step is to include them in the HTML.

Step 2: install the RICG Responsive Images plugin

In order for Wordpress to output all the image sizes, a new plugin needs to be installed: the RICG Responsive Images plugin. Once it is installed and activated all the images sizes will be included in the image tag via the srcset attribute. Typically when an image is added to a page in Wordpress the output HTML looks like this:
<img class="aligncenter wp-image–176 size-full" src="" alt="App Screenshot">
There is a single image in the src attribute. Once the plugin is installed the HTML will look like this:
<img class="aligncenter wp-image–137 size-full" src="" srcset="–169x300.jpg 169w,–576x1024.jpg 576w,–300x534.jpg 300w, http://localhost/SebastianGreen/2015/wp_dev/wp-content/uploads/2015/05/onavo–600x1067.jpg 600w, 600w" alt="onavo" width="600" height="1067" sizes="(max-width: 600px) 100vw, 600px">
All the new image sizes have been added via the srcset attribute. The plugin also includes Picturefill.js, a responsive image polyfill which adds support for both the picture element and the new responsive attributes for the img element. This, together with the srcset attributes now being included in the image tag is what makes your images responsive.

Your images are now responsive

Now the images on your website will be responsive — the browser will choose the most appropriate image to download. Users on devices with smaller screens will get the smaller images. Your website will load faster as these images will download quicker, they will need less of the users’ bandwidth. Users on devices with larger screens will get the bigger images. They won’t appear pixelated or of a lesser quality. There is only one potential problem with this method: it will only work with images uploaded to Wordpress after the RICG Responsive Images plugin has been installed. If it is a brand new website you are working on then this may not be a problem, however if it is an existing website with existing content the new image sizes which you added in functions.php won’t have been generated. Thankfully, you don’t need to re-add all the images — there is a plugin which can help.

Step 3: Install plugin to re-generate image sizes (optional)

The Regenerate Thumbnails plugin will go through all the existing image attachments and re-generate the new image sizes based on the new ones created in functions.php - it is a real time saver and only requires the click of a single button. Once installed, go to Tools -> Regen. Thumbnails then click the “Regenerate All Thumbnails” button. A status bar will appear and you will see the information about how many images have been resized. Now, all the existing images in your website will be output correctly using the image tag via the srcset attribute. Featured image uses device image and mobile device image via Shutterstock.

Sebastian Green

Sebastian Green works at a small web startup within an established IT Support Business in Manchester. His passion is using the latest technologies to aid business growth & automate boring procedures.

Read Next

15 Best New Fonts, July 2024

Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…

20 Best New Websites, July 2024

Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…

Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance

WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…

Exciting New Tools for Designers, July 2024

Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…

3 Essential Design Trends, July 2024

Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…