Responsive Images in WordPress 4.4
WordPress 4.4 will add native responsive image support by including srcset and sizes attributes to the image markup it generates. For background on this feature, read the merge proposal.
How it works
WordPress automatically creates several sizes of each image uploaded to the media library. By including the available sizes of an image into a srcset attribute, browsers can now choose to download the most appropriate size and ignore the others—potentially saving bandwidth and speeding up page load times in the process.
To help browsers select the best image from the source set list, we also include a default sizes attribute that is equivalent to (max-width: {{image-width}}px) 100vw, {{image-width}}px. While this default will work out of the box for a majority of sites, themes should customize the default sizes attribute as needed using the wp_calculate_image_sizes filter.
Note that for compatibility with existing markup, neither srcset nor sizes are added or modified if they already exist in content HTML.
For a full overview of how srcset and sizes works, I suggest reading Responsive Images in Practice, by Eric Portis over at A List Apart.
New functions and hooks
To implement this feature, we’ve added the following new functions to WordPress:
wp_get_attachment_image_srcset()– Retrieves the value for an image attachment’ssrcsetattribute.wp_calculate_image_srcset()– A helper function to calculate the image sources to include in asrcsetattribute.wp_get_attachment_image_sizes()– Creates asizesattribute value for an image.wp_calculate_image_sizes()– A helper function to create thesizesattribute for an image.wp_make_content_images_responsive()– Filtersimgelements in post content to addsrcsetandsizesattributes. For more information about the use of a display filter, read this post.wp_image_add_srcset_and_sizes()– Addssrcsetandsizesattributes to an existingimgelement. Used bywp_make_content_images_responsive().
As a safeguard against adding very large images to srcset attributes, we’ve included a max_srcset_image_width filter, which allows themes to set a maximum image width for images include in source set lists. The default value is 1600px.
A new default image size
A new default intermediate size, medium_large, has been added to better take advantage of responsive image support. The new size is 768px wide by default, with no height limit, and can be used like any other size available in WordPress. As it is a standard size, it will only be generated when new images are uploaded or sizes are regenerated with third party plugins.
The medium_large size is not included in the UI when selecting an image to insert in posts, nor are we including UI to change the image size from the media settings page. However, developers can modify the width of this new size using the update_option() function, similar to any other default image size.
Customizing responsive image markup
To modify the default srcset and sizes attributes, you should use the wp_calculate_image_srcset and wp_calculate_image_sizes filters, respectively.
Overriding the srcset or sizes attributes for images not embedded in post content (e.g. post thumbnails, galleries, etc.), can be accomplished using the wp_get_attachment_image_attributes filter, similar to how other image attributes are modified.
Additionally, you can create your own custom markup patterns by using wp_get_attachment_image_srcset() directly in your templates. Here is an example of how you could use this function to build an <img> element with a custom sizes attribute:
<?php
$img_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
?>
<img src="<?php echo esc_url( $img_src ); ?>"
srcset="<?php echo esc_attr( $img_srcset ); ?>"
sizes="(max-width: 50em) 87vw, 680px" alt="A rad wolf">
Final notes
Users of the RICG Responsive Images Plugin should upgrade to version 3.0.0 now in order to be compatible with the functionality that included in WordPress 4.4.
Tomas Mackevicius 3:33 am on November 10, 2015 Permalink | Log in to Reply
Can we say that from now on users will be encouraged to always include full sized image instead of one that fits the regular content width the best, like size Large?
Another question is if this improvement will affect images in older posts that are already inserted with certain predefined width parameters.
Thank you!
Joe McGill 4:38 am on November 10, 2015 Permalink | Log in to Reply
Hi Tomas,
Site authors will be able to include whichever size they feel is most appropriate, but now site visitors will get the benefit of downloading the best image source available to fit their needs, which could be larger or smaller, depending on their device capabilities.
Tom Belknap 4:10 pm on December 15, 2015 Permalink | Log in to Reply
I’m not sure that this is entirely true: while in full-size view I can see the proportional size, in practice WP is putting the thumbnail in on small screens.
Another question: if we override the default image placement (say, to use
instead of captions), we’ll need to perform the above snippet of code to make it work, is this correct?
David Chandra Purnama 4:10 am on November 10, 2015 Permalink | Log in to Reply
in wp we have “hard-crop” (such as thumbnail size), or soft-crop (like medium large sizes) or my fav is using fixes width, and very tall height to keep the image as is (resize, no crop)
so how do WP check this images? what images WP uses?
I don’t want to display my image content as thumbnail, when it shouldn’t be cropped (?)
thank you.
Joe McGill 4:39 am on November 10, 2015 Permalink | Log in to Reply
Hi David,
WordPress will only include images that match the same aspect ratio as the image in the ‘src’ attribute.
Monika 8:06 am on November 10, 2015 Permalink | Log in to Reply
I’m using WP 4.4 and twenty sixteen on my testsite.
*only developer plugins are active
*for “responsive image tests” I ‘m using always the same image and upload it again.
*my last test was this morning.
If I insert an image with 300×199 in a post,
I can find all large sizes in source => this doesn’t make sense too me.
example
<img src="xx/media/2015/11/IMGP9685-300×199.jpg" alt="IMGP9685"
width="300" height="199" class="aligncenter size-medium wp-image-750"
srcset="xx/media/2015/11/IMGP9685-250×166.jpg 250w,
xx/media/2015/11/IMGP9685-300×199.jpg 300w,
xx/media/2015/11/IMGP9685-768×511.jpg 768w,
xx/media/2015/11/IMGP9685-1024×681.jpg 1024w,
xx/media/2015/11/IMGP9685.jpg 1029w" sizes="(max-width: 300px) 85vw, 300px"
How can I avoid this?
Joe McGill 1:13 pm on November 10, 2015 Permalink | Log in to Reply
Hi Monika,
The larger sizes are included in the
srcsetattribute in order to account for screens with high density displays and only the most appropriate size will be used for any device, so this is the expected behavior. However, if you want to keep out all the large sized images from being included in yoursrcsetattributes, you can filter themax_srcset_image_width, like this:function filter_max_srcset( $max_width, $size_array ) {if ( $size_array[0] === 300 ) {
$max_width = 768;
}
return $max_width;
}
add_filter( 'max_srcset_image_width', 'filter_max_srcset', 10, 2 );
programmin 4:15 pm on December 21, 2015 Permalink | Log in to Reply
Actually, if you insert a medium or smaller sized image, then use the resizer to make it just a few pixels larger in the editor, the browser will download a massively larger image – see https://core.trac.wordpress.org/ticket/35128#comment:5
In this case 4.4 is using massively more bandwidth because of srcset, but it’s kind of a browser bug.
Mark-k 1:36 pm on November 10, 2015 Permalink | Log in to Reply
To add to monica above, it seems like there is a missing option, a non responsive image. Lets say the image is a company logo and it should be displayed at exactly one size no matter what images WP generates for it an if it doesn’t stretch well on the screen.
Joe McGill 3:54 pm on November 10, 2015 Permalink | Log in to Reply
Hi Mark,
The responsive image markup should not change the display size of your image. Instead, it’s used to let the browser know which image source to use. For example, if you have a company logo that should be displayed at 300px wide, and you have a 300px version of the logo and a 600px version of the logo, you can identify both image sources in the `srcset` attribute and retina displays could use the 600px version so the logo looks crisp on all devices.
Joe
Mark-k 5:54 pm on November 10, 2015 Permalink | Log in to Reply
The point is that for whatever reason I don’t want to use anything except for the full size image, what should I do then. Possible (but maybe invalid) scenario is the ability to save the full size image on my local pc. If I give the browser the option to select whatever image is being displayed, what would be the image saved?
Another related question that came into my mind is by what criteria the images are added to srcset? Are those all the images for which there is an add_image_size or is there some selectivity?
Mark-k 6:08 pm on November 10, 2015 Permalink | Log in to Reply
Maybe I have a better real life question. Once images are compressed into about a file size of 30k it is hard to get any real reduction in size just by using lower dimension without terminally reducing the quality of the details of the image. Therefor I do not want to suggest to the browser to get any image smaller then 30k even if it fits better because the price I pay in bandwidth is not worth the quality reduction, and I would prefer to avoid another hit on the server just because the resolution was changed when flipping the device without making enough display space for a much better image.
Joe McGill 10:35 pm on November 10, 2015 Permalink | Log in to Reply
Hi Mark,
There may be valid scenarios where you would not want this functionality, and if so, you are free to use the included filters to modify/remove the default behavior. That said, I would suggest spending a bit of time getting familiar with the benefits of responsive images and how they work before making that decision, because generally, the benefits to your users (and your bandwidth) should be worth it. For a primer on responsive images, check out this blog series: http://blog.cloudfour.com/responsive-images-101-definitions/
Cheers
Mark-k 7:43 am on November 11, 2015 Permalink
1. It is really annoying to get from core developers the attitude of “we know better then you so trust us”. In this case since I am following the whatwg mailing list I am quiet sure I am aware of this feature history and how it is intended to be used and what were the objections to it that created the picture element in the end as much as you.
2. Unlike oEmbed and REST API this is not a new functionality developed on empty slate and it has an impact on the behavior of all existing sites, therefor you can’t just say “it is easy to do with a filter” which might be very true but joe shmo that will upgrade from 4.3 to 4.4 doesn’t know that he is supposed to write a filter to keep his site functioning exactly as before.
3. So this is my suggestion
a. have an option to control whether this feature is inactive
b. on upgrade from 4.3 set the option to true
This follows what was done for link management so I am sure there is some efficient pattern to use here.
People that want to opt in can use a simple plugin that should be run only once to do that.
Joe McGill 1:08 pm on November 11, 2015 Permalink
Mark,
Thanks for the feedback. Comments are not generally the best forum for long explanations and I was attempting to acknowledge that you may have valid reasons for turning these off without a long technical explanation. I can see how it would have come across as condescending, which was not my goal.
I’ll add that we did ask for community feedback regarding whether this feature should be turned on by default or if we should toggle it on via a site option and the majority of people thought we should turn it on by default.
Thanks,
Joe
Travis Northcutt 8:51 pm on November 10, 2015 Permalink | Log in to Reply
First off, awesome! Thanks, RICG team, for making this happen.
> The medium_large size is not included in the UI when selecting an image to insert in posts, nor are we including UI to change the image size from the media settings page. However, developers can modify the width of this new size using the update_option() function, similar to any other default image size.
One thought on this: does this mean that if the width of medium_large is changed, there won’t be any indication of that change (save, of course, for the actual images being generated at a different size)? If so, I wonder if that might make debugging a tad difficult, since it could lead to inconsistent behavior (old images at 768px, new ones at ____px) without a clear reason as to why, without looking directly at the database (something many/most people won’t/can’t do).
That’s certainly not an argument in favor of a UI to change this, and is admittedly an edge case, but I wanted to at least mention it in case it bears further discussion.
Joe McGill 10:27 pm on November 10, 2015 Permalink | Log in to Reply
Hey Travis,
Good thought. For that size to change, a developer would have to intentionally run `update_option()`. I think it would be rare when that happens unintentionally, or that a future developer couldn’t check the size through a `get_option()` call in order to debug the issue. However, if we find out that leaving the option out of the admin UI causes a large amount of issues, we can certainly add it later.
Morten Rand-Hendriksen 10:04 pm on November 10, 2015 Permalink | Log in to Reply
Probably a dumb question:
Is `wp_make_content_images_responsive()` applied to posts by default ensuring that existing posts will receive responsive images? Or am I just misunderstanding the function of this function?
Joe McGill 10:29 pm on November 10, 2015 Permalink | Log in to Reply
Hi Morten,
Sorry that the post wasn’t clear. The `wp_make_content_images_responsive()` function is automatically hooked to the `the_content` filter and will automatically apply responsive image markup to all posts by default, regardless of when they were originally published.
Joe
Morten Rand-Hendriksen 10:40 pm on November 10, 2015 Permalink | Log in to Reply
OK. That’s what I suspected. So the purpose of the wp_make_content_images_responsive() function comes into play any time you want to apply the RICG markup to content that is not filtered through the_content then.
lamnt 8:19 am on November 11, 2015 Permalink | Log in to Reply
I did installed RICG 3.0 on wordpress 4.3 but i don’t see it works. Is this compatible with these? I also check attributes in “the_content”, i don’t see the srcset, data-size or something like that of RICG.
It seems doesn’t work filter and automatically apply responsive image.
Paal Joachim Romdahl 10:21 pm on November 10, 2015 Permalink | Log in to Reply
Ehhh hmm not sure what to say here….
How would this benefit the regular beginner user and designers?
I am trying to grasp what your saying.
If you could “dumb down” the language a bit that would help.
Thanks.
Joe McGill 10:32 pm on November 10, 2015 Permalink | Log in to Reply
Hey Paul,
The main purpose of this post is to explain to the new functionality to developers. However, the concepts behind responsive images have a lot of benefits for non-developers. For a full overview of what responsive images are, I would recommend reading through this blog series by Jason Grigsby (http://blog.cloudfour.com/responsive-images-101-definitions/).
Cheers.
Paal Joachim Romdahl 10:48 pm on November 20, 2015 Permalink | Log in to Reply
Thanks Joe! Btw your doing some awesome work!
programmin 4:10 am on November 11, 2015 Permalink | Log in to Reply
This is exciting news! I wonder if there are any good developer tools for testing through these, as the Firefox Inspector doesn’t seem to give any special preview to the srcset or sizes attributes, just shows a very long attribute text.
Thanks for the good work
FolioVision 4:43 am on November 11, 2015 Permalink | Log in to Reply
HI Joe,
This is wonderful! How does the srcset and sizes for responsive images fit in with Retina? Should we expect full retina support any time soon?
Alec
Joe McGill 12:58 pm on November 11, 2015 Permalink | Log in to Reply
Hi Alec,
Browsers that support the `srcset` and `sizes` take into account the screen density when selecting an appropriate source, so this will provide full retina support as long as the original uploaded image was large enough to have the appropriate sizes created by WordPress.
Joe
Jesse Heap 10:00 pm on December 9, 2015 Permalink | Log in to Reply
Joe,
Doesn’t that assume though that your theme is appropriately setup with image sizes that are 2x the size of the image?
If I’m understanding correctly I think it still may make sense to use plugins like WP Retina 2x as that plugin will automatically create a retina image that is twice the resolution regardless of whether you have the appropriate image sizes setup in your theme.
If I’m understanding correctly, using a plugin like Wp Retina 2x is potentially a better solution especially if you have varying image sizes as WP Retina 2x will dynamically create the 2x image based on the original image dimensions….
Am I correct?
Dwain Maralack 1:04 am on November 12, 2015 Permalink | Log in to Reply
Well done for getting the feature wrapped up Team!
David Chandra Purnama 1:26 pm on November 13, 2015 Permalink | Log in to Reply
thank you for the explanation.
is there possible performance and compatibility issue for filtering content with this complex parser? (vs the benefit for default content filter)
here’s my full thoughts for this feature to help explain my question:
https://shellcreeper.com/responsive-image-in-wordpress-4-4/
Joe McGill 3:05 pm on November 14, 2015 Permalink | Log in to Reply
Hi David,
Great write up about your experience testing the feature. Thanks for sharing.
From a performance point of view, filtering the content to add responsive image support adds a bit of overhead, but many times, I expect users to benefit by downloading smaller images than they would have normally—making the small overhead worthwhile.
On the compatibility side, I’m sure there will be some issues to work out. For example, the Jetpack team is working right now to make sure that Photon is compatible with this feature. As issues come up during the next few weeks, we’ll work to address what we can.
Thanks,
Joe
klihelp 10:27 pm on November 20, 2015 Permalink | Log in to Reply
Thanks!
joost de keijzer 10:35 am on November 26, 2015 Permalink | Log in to Reply
Hi, great feature!
De srcset attribute doesn’t seem to be added by default to images in a gallery. Is this on purpose?
tornography 10:09 am on December 9, 2015 Permalink | Log in to Reply
Please include the original size into srcset aswell. Otherwise the largest srcset is loaded, even if the original image is larger.
Example:
src = original.jpg // 1920*1200
srcset = small-300.jpg 300w, …, large-1024.jpg 1024w
sizes = (max-width: 1920px) 100vw, 1920px
Window/Browser is 2084px wide, but large-1024.jpg is laoded. If srcset is extended by the original size:
srcset = …, original.jpg 1920x
the original sized Image is laoded.
Joe McGill 3:09 pm on December 9, 2015 Permalink | Log in to Reply
Hi @tornography. We limit the maximum width that is included in the `srcset` by default, but you can override that value by adding a filter to the `max_srcset_image_width` hook. See https://developer.wordpress.org/reference/hooks/max_srcset_image_width/
tornography 3:11 pm on December 9, 2015 Permalink | Log in to Reply
I see. Thanks for pointing me to that.
jmy1138 3:01 pm on December 9, 2015 Permalink | Log in to Reply
For those of us that are already using the RICG Responsive Images Plugin, is there any advantages to dropping this plugin and using the native responsive image feature?
Joe McGill 3:12 pm on December 9, 2015 Permalink | Log in to Reply
Hi Jon,
The plugin still includes a few features that are not found in core. Namely, advanced image compression, the Picturefill polyfill to enable responsive image support on older browsers, and some backward compatibility shims for people who were using early versions of the plugin that wrote `srcset` and `sizes` information directly to the markup saved in posts. If none of those issues are important to you then you can safely remove the plugin.
Thanks,
Joe
jmy1138 5:07 pm on December 9, 2015 Permalink | Log in to Reply
Thanks for the feedback Joe. I can seeing compressing images before uploading to WP, enqueuing the Picturefill script, and making sure syntax is up to date would negate the need for the plugin.
Angristan 3:52 pm on December 9, 2015 Permalink | Log in to Reply
Some images are loaded with the srcset attribute in HTTP and not HTTPS, so most browsers are blocking them on my website…
John Blackbourn 6:24 pm on December 9, 2015 Permalink | Log in to Reply
Thanks for the feedback. Can you open a bug report on https://core.trac.wordpress.org/newticket please? I’d be interested to hear how HTTPS is configured on your site and if there’s anything we can correct to fix this.
archon810 12:45 pm on December 11, 2015 Permalink | Log in to Reply
There’s already a 2-year-old ticket open https://core.trac.wordpress.org/ticket/25449. Also please see https://wordpress.org/support/topic/responsive-images-src-url-is-https-srcset-url-is-http-no-images-loaded. Can we get this resolved in 4.4.1 hotfix?
Eric Mathison 6:36 am on December 10, 2015 Permalink | Log in to Reply
How will this behave with custom image sizes added with add_image_size? We’ve long adapted to not using the builtin WordPress Image sizes and create our own, which are easier to reference when adding into a post.
zjk 8:40 am on December 10, 2015 Permalink | Log in to Reply
Hi,
In my wordpress image are done with a structure of a div wrapper with classes like “preload” triggering the js process deferred after dom ready, also “loader” for getring a nice loading font awesome icon animation nicely centered in the container while the ressource is non obstruvisly loading. This allow me to get the best response time of default interface. Img src are are given in a data-src attribute of this div, and used by the js loading process. I just have in a noscript with default img src in case we have no js support. Please allow us to have your fonctionnality disabled by default as my manner of processing img is far better in term of support and frontend perfomance.
cheers
stemie 3:13 pm on December 10, 2015 Permalink | Log in to Reply
I have https enabled on my backend and since the WordPress 4.4 update my featured images in the backend display blank images. When I remove srcset image (with chrome developer tools) the featured image appears. The srcset image causing the problem is http while all my other images are https (or at least they begin with //). Any ideas how to get the featured image to show or enable https on the srcset?
thisisbbc 6:32 pm on December 10, 2015 Permalink | Log in to Reply
Hi there,
We’re struggling to get our product images to display the right size. They keep getting cropped for an unknown reason. Is there any known problems with WooCommerce?
Thank you
B
christoffer.alm 6:22 pm on December 11, 2015 Permalink | Log in to Reply
Is there any way to implement this on background images, aka with image-set?
background: -webkit-image-set( url(‘path/to/image’) 1x, url(‘path/to/high-res-image’) 2x );
Tim Berneman 7:40 pm on December 11, 2015 Permalink | Log in to Reply
What’s the code to remove the srcset tags from my images? I have some custom code and WP4.4 is cause my images not to display. Here is my current code:
I tried the_post_thumbnail() and that didn’t work either.
I just want to disable the new “srcset” tag in my code to get my images to display again!
Joe McGill 8:53 pm on December 11, 2015 Permalink | Log in to Reply
Hi Tim, the easiest way to disable responsive images on your site is to add this code snippet to your functions.php or better yet through a separate plugin file.
function disable_srcset( $sources ) {
return false;
}
add_filter( 'wp_calculate_image_srcset', 'disable_srcset' );
However, if your images aren’t displaying because of HTTPS mixed content issues, than you may want to keep an eye on this thread.
Bielousov 8:42 pm on December 11, 2015 Permalink | Log in to Reply
I actually hope this doesn’t work, for I had to create a front-end analog to dynamically add srcset with respect to retina display, not just screen size and really really hope it won’t break with this new update.
Nice try though WordPress, I was looking for this some time ago, but too late.
SnixyKitchen 3:08 am on December 14, 2015 Permalink | Log in to Reply
I’m super excited about this update because I’ve been inserting images that are 2x the display width to optimize for retina, which is surely slowing down my site on other non-retina screens. One issue I’ve noticed though is that on iphone retina screens, it’s choosing a really low resolution image from the srcset making all the images SUPER blurry! Does anyone know why this is happening? Or is there a way to set a min size to include in srcset so it doesn’t have this one as an optin??
greenzilla 6:42 pm on December 17, 2015 Permalink | Log in to Reply
I came across an issue where I would want to limit the srcset max width based on the images placement. IE: I don’t want a 100px w image placement to be able to grab a 300px w image. I would want to limit the srcset to a 200px w image. My phone (Droid Turbo 2) is pulling the 300px w image while the iphone 6 is pulling the 200px w image and desktop is grabbing the 100px image. My reasons to limit to 200px w is it looks ‘good enough’ and to save on bandwidth and decrease load times. This is where the invaluable ‘max_srcset_image_width’ filter comes into play. I can take the $size_array parameter and calculate ‘max_srcset_image_width’ for the desired image placement. Hopefully others will find this useful.
rcgordon 1:34 am on December 19, 2015 Permalink | Log in to Reply
The responsive images break some posts on the iPad on http://www.theshelterblog.com. I lauded the Disable Responsive Images plug-in to stop it. One specific post that was showing a thumbnail image on iPad (either portrait or landscape) is http://www.theshelterblog.com/18-year-old-builds-debt-free-tiny-house-as-school-project/.
The impacted image was only obtainable in a medium size (662×424).
donaldG2 4:01 pm on December 21, 2015 Permalink | Log in to Reply
I for one am so incredibly stoked to have this as part of core! I do have a quick question: will the polyfill script ever be included in core? I can see how you’d want to leave that up to the different users depending on their needs instead of including one.more.script, ha. I was a bit confused until finding this thread, thinking that picturefill.js had been included but glad to have discovered the thread. Many thanks!
chatmandesign 8:19 pm on December 23, 2015 Permalink | Log in to Reply
Is there a filter to change the src attribute? I want to support retina, but I don’t want to fallback to an image that big for browsers that don’t support responsive images, so I’d like to override the src to a more middle-size image (say, targeted at 1366w).
thinkwired 12:23 am on December 29, 2015 Permalink | Log in to Reply
I am seeing posts where some images have the additional srcset markup but other images do not (on the same post/page). These images were uploaded at the same time and all of them have various sizes in the upload folder. What would cause some images to display the responsive markup but, others not? I’m trying to diagnose the issue to no avail.