Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Responsive Images Now Landed In WordPress Core

While the growing adoption of responsive images cannot be ignored, it can be very difficult to employ the functionality under the constraints of a large CMS like WordPress. Although it is entirely possible to write the feature into your theme on your own, doing so is a challenging and time-consuming endeavour.

Further Reading on SmashingMag: Link

Thankfully, with the launch of WordPress 4.4, theme developers and maintainers will find it much easier to introduce responsive image functionality into their themes. In this recent launch, the RICG Responsive Images5 plugin has been merged into WordPress core, which means that responsive image support now comes as a default part of WordPress. Let’s take a look at how the feature works, and how you can use it to get the best support for your WordPress site.

With WP version 4.4 the RICG Responsive Images plugin has been merged into WordPress core6
With WP version 4.4 the RICG Responsive Images plugin has been merged into WordPress core. Responsive image support now comes as a default part of WordPress. (View large version7)

How The Feature Works

As soon as you update to WordPress 4.4, all of your content and featured images will have srcset and sizes attributes, which are filtered to ensure that every available image size is present while maintaining the dimension of the original requested image. It’s important to note that custom crops will be left out of the srcset attribute if the aspect ratio differs from the original requested image. Additionally, calling an image via the wp-get-attachment-image function will return a responsive image as well.

Responsive images is a background feature, meaning everything happens automatically whenever a user uploads an image in WordPress through the media uploader. When an image appears on a page, it will have srcset and sizes attributes as a result of that background process.

This means that the new responsive images feature has no visible user interface. There are no options to toggle, forms to fill, or boxes to be checked. That being said, theme developers should edit their theme’s functions.php file to ensure their images have an accurate sizes attribute. This is because when we talk about responsive images in WordPress, we’re talking specifically about the srcset and sizes attributes on the image tag.

While WordPress does an exceptional job at inserting all available sizes into the srcset attribute, the sizes attribute is slightly more difficult to predict. This is because the sizes attribute is responsible for telling the browser how wide the image will be at every available viewport. Since that information will be different depending on the styling of the user’s theme, the best we can do is provide the following reasonable default:

sizes="(max-width: {{image-width}}) 100vw, {{image-width}}"

This default sizes attribute accomplishes two things. First, it ensures that a valid sizes attribute exists on the image, which recently became a mandatory requirement according to the specification. Second, it ensures that the browser doesn’t provide an image source that is larger than the original width requested. If there is any CSS manipulating the size of the image at different viewport widths, however, this default sizes attribute becomes less helpfull.

Since the default sizes attribute will only help with images that are not altered by CSS, filter hooks have been provided to allow theme developers to adjust the sizes attribute of every image, ensuring that a perfect sizes attribute can be delivered at every breakpoint.

It’s important to note here that, if at all possible, your theme shouldn’t rely on the default sizes attribute to provide accurate responsive images support. This is because the default sizes attribute doesn’t allow the browser to change the source of the image when the viewport is smaller than the original requested image size. It will also not be able to change the source if the image is altered with CSS at a breakpoint, when the image might need to be larger than the original requested size.

If you are a theme developer or have access to a WordPress code base, filtering your theme’s images to provide an accurate sizes attribute is one of the most important things you can do after the new version is released. The following is an example hook into the wp_calculate_image_sizes function, which you can expand on to fit your theme.

function adjust_image_sizes_attr( $sizes, $size ) {
   $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
   return $sizes;
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );

In this example, the hook will apply to all content and featured/thumbnail images. Additional logic can be added to ensure that different image types recieve different sizes vaules.

Additional logic can be added to ensure that different image types recieve different sizes vaules8
Additional logic can be added to ensure that different image types recieve different sizes vaules. (View large version9)

Some new functions have been added so that srcset and sizes attributes can be added to any image that has been added to WordPress through the media uploader, in addition to images added to post content. wp_get_attachment_image_sizes will return a default sizes attribute, which can be altered by a filter in your theme’s functions.php file. wp_get_attachment_image_srcset will return a srcset attribute which will contain all available sizes of the requested image. Documentation and usage examples for these new functions can be found on the WordPress developer reference10.

Configuring Responsive Images For Your Theme

With the new functions introduced come several new hooks which can be used to provide a level of responsive image support that fits best with your theme. The max_srcset_image_width hook will allow the theme developer to filter the maximum image width to be included in a srcset attribute. Hooking into wp_calculate_image_srcset will filter the image’s srcset attributes, while filtering wp_calculate_image_sizes will allow the theme developer to customize the sizes attribute so that it best matches the image breakpoints in their theme.

If you’re looking for an example of how best to filter the sizes attribute of an image, the new twentysixteen theme provides a perfect example11. In this theme’s functions.php file, the last two functions are filtering the sizes attribute to fit the various image breakpoints inside the theme.

The last two functions are filtering the sizes attribute to fit the various image breakpoints inside the twentysixteen theme.12
The last two functions are filtering the sizes attribute to fit the various image breakpoints inside the twentysixteen theme. (View large version13)

For content images, we’re filtering the wp_calculate_image_sizes function, while for post thumbnails/featured images, we’re filtering the wp_get_attachment_image_attributes function. We’re using two different functions because this theme changes the way its featured images are displayed at various breakpoints, which differs from the way its content images are displayed under the same conditions. Although this level of granularity isn’t always needed for every theme, it is possible to to filter your images in several different ways, allowing theme developers to be as specific or general as necessary.

Updating to WordPress 4.4 means that users will benefit immediately from responsive image support, allowing for crisp and clear images at every viewport size and pixel density. This will also result in a performance increase, since pages won’t spend extra time downloading larger images then they might need. While this is an automatic process for users, theme developers will want to adjust their images sizes attribute in their theme’s functions.php file.

Many Thanks

Building the plugin and merging it into WordPress Core was very much a team effort. With that in mind, there are several people to thank on both the WordPress and RICG core teams. Matt Marqis made all of this come together, facilitating the entire project and making sure development kept up a good pace. Joe McGill and Jasper de Groot from the RICG team helped to write the plugin into WordPress core, with assistance from Andrew Ozz. Helen Hou-Sandi and Mike Schroder provided plenty of support, advice, and insight throughout the lifetime of the project. Scott Taylor led the WordPress 4.4 development and release process, which involved plenty of discussion surrounding the responsive images feature. Chris Coyier spent plenty of his time at the earliest stages of this project, helping me to turn a few lines of PHP into a WordPress plugin that would ultimately become a permanent part of the CMS.

I’d also like to thank all who expressed interest in the plugin and core merge. Your usage, feedback, suggestions, and GitHub issues made all of this possible.

(jb, vf, ml, og)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5 /2015/02/ricg-responsive-images-for-wordpress/
  6. 6 /wp-content/uploads/2015/12/01-wp-responsive-images-opt.png
  7. 7 /wp-content/uploads/2015/12/01-wp-responsive-images-opt.png
  8. 8 /wp-content/uploads/2015/12/02-wp-responsive-images-opt.png
  9. 9 /wp-content/uploads/2015/12/02-wp-responsive-images-opt.png
  10. 10
  11. 11
  12. 12 /wp-content/uploads/2015/12/03-wp-responsive-images-opt.png
  13. 13 /wp-content/uploads/2015/12/03-wp-responsive-images-opt.png

↑ Back to top Tweet itShare on Facebook

Tim Evko is a Front-End Engineer working on responsive e-commerce for BaubleBar in Manhattan, NY. An experienced WordPress theme developer and plugin author, Tim helps lead and manage the team responsible for developing the RICG-responsive-images WordPress plugin. Tim has had the pleasure of writing for CSS-Tricks,, Web Design Weekly, and SitePoint, where he focuses on responsive web development, performance, and general industry related issues.

  1. 1

    A word of warning (although it may be irrelevant by the time you read this): I first learned of this feature being added to WordPress due to a bug in its implementation—it didn’t change the protocol to https in the srcset attribute on SSL-encrypted pages, causing all images to disappear on those pages in browsers that both support srcset and that now require all resources on SSL pages to be encrypted (Chrome and Firefox). I found a not-too-difficult workaround using hooks, but let’s hope this bug has been fixed or will be soon.

    • 2

      Hey Scott, thanks for your input. This is a longstanding issue with the way WordPress builds URLs for images. We’re working on patch to ensure that the issue doesn’t trickle down to srcset attributes and we hope to have that out for WP 4.5

    • 3

      Ole Fredrik Lie

      December 28, 2015 12:52 am

      @Scott: Interesting. Would you mind sharing your workaround using hooks?

  2. 4

    Alistair Strachan

    December 24, 2015 11:46 am

    Quick / TL:DR question: does this mean you need to upload images at a higher res / size?

    • 5

      Not quite, it means you can continue uploading images at the regular resolution that is used to fill your desktop, and it will automatically use the smaller crops/resizes to serve up the image on narrower windows.

  3. 6

    Nice overview, Tim. It’s also worth mentioning the places where responsive images are not served by default, such as images served directly from your theme directory or from custom image fields. In order for those images to be served responsively, the theme author will need to manually include the srcset markup in the case of theme images or use some of the new helper functions to construct the srcset markup in the case of custom image fields.

  4. 7

    What does “vw” represent?

  5. 10

    I thought WordPress was a great platform, but I think they need to concentrate on security more than anything else.
    I just got really tired of updating it to try to keep it secure all the time. I shouldn’t have to edit my htaccess file or install other plugins like iThemes Security or Bulletproof Security to try to keep my website safe. And so I have switched over to SquareSpace. It’s not as customizable as WordPress, but I’m willing to compromise so that I don’t have to deal with all the updating and backend stuff.

  6. 11

    I use mostly background pictures that are set by css, to display any images in the “best” proportions (for example to have an overview about my posts with tiles)

    background: url( my-url ) no-repeat center center;
    background-size: cover;

    Any good approach for this?

    • 12

      Amber Sjomeling

      December 28, 2015 5:58 pm

      Use media queries to serve different image sizes based on the display size. If you are using inline styles to complete this you may want to look at a different approach (such as absolutely positioning your content over the image, which would allow you to use this technique).

  7. 13

    Great article!

    I’m a little confused about what “content images” are. In the first example, wp_calculate_image_sizes hook was used and it says that it will apply to all content and featured/thumbnail images. But further down the article, it says to use wp_get_attachment_image_attributes for featured images.

    Which is which?

    “We’re using two different functions because this theme changes the way its featured images are displayed at various breakpoints, which differs from the way its content images are displayed under the same conditions.”

    Is there an example which shows how they actually differ?

  8. 14

    Hemang Rindani

    January 8, 2016 1:57 pm

    WP is a great enterprise web content management system with amazing functionalities that help to design, develop and manage some powerful websites. Easy to use interface, flexibility, scalability and thousands of built-in modules, themes and plugins make WordPress a popular platform that developers like to adopt. With each new update, WordPress has ensured that it remains the most trusted content management system. The latest version 4.4 is moving towards being the most responsive version of WP. It now makes all the images responsive, without the need of transforming them through some tools. WordPress also ensures that all the images that were previously used in the website and are still on the page are converted to responsive images without addition of any coding. The new default theme twenty-seventeen also maintains this consistency. Making sure to update current system to 4.4 is the only thing required to transform a website to fully responsive site.

  9. 15

    A huge thank you and you team. I have in the past made use of the background image method of swapping in and out images using media queries (yeah I know, sub-optimal, but it worked well). On my latest website I started using your RICG plugin which worked well. Now it is seamless as part of the XP core! Fantastic! Thanks for your explanation on adding in the sizes attributes. This worked easily (although it took a while to get my head around what sizes to use and leaving it up the the browser to decide). It is even working on my custom post images displayed outside the blog directory (but bringing in WP functionality) with no extra coding.

  10. 16

    Well, I guess these new responsive images work fine on smaller sites but my uploads directory went from 90meg to 6gig (107,000 images). It seems as though no one thought this through very well.

    Plus, this feature was dropped on us without giving us the choice to disable it. Now I’ve got a big mess to clean up.

    I do not want responsive images for the obvious reason above. There are storage, costs, backup and other issues that need to be considered when you’re making 4 images for each one uploaded on a big site like mine.

    Also, I installed the “Disable Responsive Images” plugin but it didn’t prevent the extra images from being made. I’m using WordPress 4.4.1.

    How do I completely disable Responsive Images and undo the problems it has caused me? Thanks.

  11. 17


    January 19, 2016 1:36 pm

    Nice post Tim, Very informative!!

  12. 18

    Hasn’t anyone taken a look at your own websites on an iPad ? Why have all the images turned fuzzy ? They look awful , I just looked at the studio press website …. Fuzzy … All of my own sites … Fuzzy , and now I found out that the uploads DIR is getting even bigger ! This is not a good feature to have added , how can it be disabled ?


↑ Back to top