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
srcsetmarkup. This is accomplished by filteringthe_content()prior to display, which means it applies to existing posts and new posts going forward. - Featured images called by
the_post_thumbnail()also getsrcsetmarkup without any additional steps required.
- Content images added via the main content editor will now be served with
-
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 andsrcsetmarkup in your theme templates. -
When WordPress generates the
srcsetattribute, it will only include images that match the same aspect ratio of thesrcimage. 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'ssrcset. -
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
srcsetsyntax 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 supportingsrcsetshould simply ignore the attribute and usesrcinstead. -
The one exception to the rule of unsupported browsers ignoring srcset is iOS 8. The
wdescriptor used bysrcsetin 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.
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.
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 bywp_make_content_images_responsive().
- http://alistapart.com/article/responsive-images-in-practice
- http://alistapart.com/article/using-responsive-images-now
- http://www.smashingmagazine.com/2015/12/responsive-images-in-wordpress-core/
- http://wpbestpractices.com/wordpress-4-4-responsive-images/
- https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/
- Browser Support for srcset
- Joe McGill's 4.4 Responsive Images Announcement
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
fullsize images to prevent clients from serving 18 megapixel images on their website. - TinyPNG - Optimize your images on upload with lossless compression.
Thank you for sharing this!