Notes and Resources for Responsive Images in WordPress 4.4

Following the addition of responsive images support in WordPress 4.4, there has been a lot of confusion over what WordPress does "automatically" and what is left up to the developer. I've gathered the following notes from chatting with members of the core team and also my own investigation of the 4.4 source. Here's what I've discovered:

Following the 4.4 update, WordPress automatically serves the following images responsively:
- Content images added via the main content editor will now be served with srcset markup. This is accomplished by filtering the_content() prior to display, which means it applies to existing posts and new posts going forward.
- Featured images called by the_post_thumbnail() also get srcset markup without any additional steps required.
Images that are referenced from custom fields will not be served responsively unless the theme calls the image via wp_get_attachment_image() OR constructst the responsive markup using some of the new functions and hooks available in 4.4.
Images referenced directly from your theme folder are not affected by the 4.4 update. These images are not in the Media Library, and therefore cannot benefit from responsive image functions such as wp_get_attachment_image(). Of course theme images can still be responsive, but you must manually include the multiple image sizes and srcset markup in your theme templates.
When WordPress generates the srcset attribute, it will only include images that match the same aspect ratio of the src image. This comes into play especially when you have image sizes that are set to a hard crop. That means an image uploaded with a 3:2 aspect ratio might be cropped down to a square image with a 1:1 aspect ratio. These images would not be included in each other's srcset.
Picturefill is a polyfill that provides support for responsive images in older browsers that do not natively support srcset. However, while the RICG plugin includes Picturefill, the team decided not to include Picturefill in 4.4 core. That means if you want to serve responsive images to older browsers, you should enable the plugin.
Most modern browsers support the srcset syntax used in 4.4. Notable browsers lacking support are all versions of Internet Explorer. See a full breakdown of browser support for srcset to find out exactly which browsers are supported. Note that browsers not supporting srcset should simply ignore the attribute and use src instead.
The one exception to the rule of unsupported browsers ignoring srcset is iOS 8. The w descriptor used by srcset in 4.4 is not supported in iOS 8. If you are seeing blurry images on mobile, check to see if you are on iOS 8. Upgrading to iOS 9 should fix the problem, but you may want to install the RICG plugin for backwards compatability since it includes a polyfill for older browsers.

One Powerful Function You Should Know as a Theme Developer

We now know that the_content() and the_post_thumbnail() automatically return responsive images as of the 4.4 update, but what about all of the other cases, such as images in custom fields, where you want to return a responsive image?

For those cases, there is a great function called wp_get_attachment_image() which generates a responsive image tag from and ID. This is super powerful because many custom field solutions such as Advanced Custom Fields store the image's ID in the database. So all you have to do is pass that ID to wp_get_attachment_image() and you can generate a responsive image tag anywhere in your theme or plugin.

Other New Functions & Hooks

I consider these "helper functions" as many of theme are used in the processes described above. They are also available to use on their own if you require more granular construction of your responsive images markup.

wp_get_attachment_image_srcset() – Retrieves the value for an image attachment’s srcset attribute.
wp_calculate_image_srcset() – A helper function to calculate the image sources to include in a srcset attribute.
wp_get_attachment_image_sizes() – Creates a sizes attribute value for an image.
wp_calculate_image_sizes() – A helper function to create the sizes attribute for an image.
wp_make_content_images_responsive() – Filters img elements in post content to add srcset and sizes attributes. For more information about the use of a display filter, read this post.
wp_image_add_srcset_and_sizes() – Adds srcset and sizes attributes to an existing img element. Used by wp_make_content_images_responsive().

General Responsive Images Resources

WordPress-specific Resources

Helpful Plugins for Responsive Images Workflows

These plugins further improve responsive images support and performance by optimizing other aspects of your workflow not addressed by WordPress core.

RICG Responsive Images - Include some responsive images functionality not included in the 4.4 update (notably the Picturefill polyfill).
Imsanity - Limit the maximum resolution for full size images to prevent clients from serving 18 megapixel images on their website.
TinyPNG - Optimize your images on upload with lossless compression.

kevinwhoffman/responsive-images-notes.md