Joe McGill Explains How Responsive Images Work in WordPress 4.4

One of the key features in WordPress 4.4 is responsive images. Joe McGill, who is helping to merge the feature to core, joined me for a thirty minute interview to explain how it works.

When users upload images in WordPress, it automatically crops new images to smaller sizes. For example, if you upload an image that’s 1500 x 706, the image sizes might look like this:

  • Full Size – 1500 x 706
  • Large – 500 x 235
  • Medium – 300 x 141
  • Thumbnail – 150 x 150

Additional sizes are created depending on the theme. If the full size image is attached to a post, users on desktop and mobile devices will see the full size image. However, it doesn’t make sense to use the full size image on mobile devices because of its display and file size.

Responsive images in WordPress 4.4 adds srcset and sizes support to WordPress. This allows the software to automatically use and display the right image based on a device’s screen size. If I attach a full size 1500 x 706 image to a post in WordPress 4.4, mobile devices will see the large or medium-sized image instead.

Responsive images don’t have any settings to configure as the magic happens behind the scenes. I encourage you to listen to the interview as it may be easier to understand listening to us talk through the feature.


52 responses to “Joe McGill Explains How Responsive Images Work in WordPress 4.4”

  1. Great feature… sorry for my ignorance, but is this what some refer to as adaptive design, or adaptive design is something different?

    And if this is the same as adaptive design, why don’t we call it that, so there is no confusion?

    My understand is that in responsive design, the same image is used to serve to desktop, tablet and phone screens, only the screen dimension changes, but not the actual image.

    With adaptive design, a different image is served, along with the dimensions of the image, depending on the device (screen size).

    Shouldn’t the title of this article be “adaptive images” instead? Where am I going wrong here?

    Again, great feature,and once again, great reporting Jeff.

    • Hi Nick,

      Good question.

      Before responsive design was popular, many sites attempted to dynamically serve different layouts (including images) to browsers based on the device type (e.g. phone, tablet, etc.). In these cases, all of the dynamic stuff happened at the server, before the page was rendered. This strategy is what I usually associate with the term “adaptive design”.

      Responsive design, on the other hand, uses tools like media queries to allow a single page to be rendered that will “respond” in the browser based on things like viewport width and display density.

      Responsive images follows the second strategy and sends all of the information to the browser up front and lets the browser take care of loading the appropriate image rather than making those decisions on the server before the page is loaded.

      Hope that helps.

      – Joe

      • Truly however, the images aren’t responsive, ie you cannot have a 90% image size (example) as you might in a responsive design. Rather, you are serving the smallest possible “full sized” image based on screen size, using one of about four or five stops along the way.

        Don’t get me wrong, I think it’s a pretty neat feature. But it’s not responsive, just perhaps progressive.

      • When you say ” sends all of the information to the browser up front “, do you mean that there is a conversation between browser and server – the server tells the browser which sizes it has, and the browser requests one of them?

        • Normal browser behavior: request goes to server, server sends back response. This response includes links to other resources – fonts, css, JS, and images. The browser notices these resources, and sends additional requests to the server and fetches those resources.

          What the new responsive image approach does is provide additional attributes to the image tag that alerts the browser to the different image files available for that particular image tag so that the browser can then intelligently request the right image file (source) for whatever window/viewport size or even resolution support the browser has. This means the browser can request the right “sized” image file for an image instead of being served an overly large image and resizing down to fit the space after the fact.

  2. Yes Joe,

    That actually helps a lot, so thanks a lot.

    As a professional, I rarely find myself reading something and going “what the hell?” This was one of those rare instances. You learn something new every day…

  3. I’ve been interested in responsive images for well over a year now – ever since I bought a MacBook Pro with a Retina screen in fact. I’ve since made my site completely retina ready – so that low res (regular size) images are swapped out for larger resolution images IF a visitor is using a retina/HD device. I’m wondering, with this new feature, what will happen when a site owner uploads say a 1750px image (which would be fine for non-retina screens), and a visitor’s computer is retina and could really do with an image twice that width (a 13inch MacBook Pro has a pixel width of 2560px)… will the site owner ever be made aware that the image they’ve uploaded will look fuzzy on retina screens? Or will they remain in blissful ignorance – simply thinking the image they’ve uploaded (1750px wide) is big enough?

    • Hi Brin,

      WordPress won’t upscale images that are uploaded, so images that are too small to look sharp on retina devices will still remain that way.

      However, the bigger benefit of this feature for users is not that we are making non-retina images retina, but that we are allowing smaller images to load when a user doesn’t need the bigger size.

      • But will users that want their images to look as crisp as they can on retina screens realize that they need to be uploading super large images? I like Danny’s comment above – his point is kind what I was getting at… Educating folk (via some kind of mechanism? …somehow), I think, is important.

  4. At one point you discussed the possibility of a media size between the existing Large and Medium, which might be about twice as wide as the Medium size. One of the first things we do when setting up a new site is to set the Medium size appropriately for the site (typically anywhere from 200-400px wide and twice as tall), then set the Large size to double that in both dimensions.

    If a larger size image is needed in a specific instance, we insert the Full Size version and scale it down using the Custom Size option in the editor. This approach works best when the images you upload aren’t absurdly large to begin with.

    Of course, it’s a relatively simple matter to introduce another size if you want to, either with one line of php in your theme, or using the Simple Image Sizes plugin. The nice thing about the latter is that when you’re done, it will generate the php for you so you can remove the plugin before launch.

      • SlideShow Pro solved this problem a long time back. SSP was a powerful Flash gallery option aimed at photographers, later adapted to provide a non-Flash version for i-Devices but Apple’s hatred of Flash meant the developers gave up on it sadly and SSP closed shop 1st Dec 2015.
        You uploaded a single large image directly via a Lightroom Plugin [or manually] and the CMS behind the scenes spits out an image resized on the fly to fit the screen site is being viewed on and MOST importantly also sharpened to prevent the usual softness you get when shrinking images.
        Any chance that methodology could be implemented?
        Far easier that uploading images at different set sizes,
        that may not even be the correct size most of the time.

  5. This is a great feature. I was wondering, though, what happens with cropped images, ratios and custom image sizes? For example, if I created “my-custom-size” at 500×500 (cropped to fit the exact dimensions), would I be able to set a “my-custom-size-small” cropped at 250×250 pixels as a fallback for this particular size?

    Supposing that I have
    Large: 500×500 (not cropped)
    Custom: 500×500 (cropped)
    Medium: 250×250 (not cropped)
    custom-small: 250×250 (cropped)

    which size would be chosen to fill the place of the Custom size in smaller screens?

    • The responsive images code will include all sizes available that match the intended height/width ratio, even custom sizes, so in this case both of your custom sizes would be displayed and the default thumbnail size.

      Additionally, in this example, all of the default sizes would also get included if the original uploaded image was square.

      Hope that makes sense.

      • Thanks for the response.

        So, if I understood it correctly, it doesn’t care about the size name (Large, Medium or whatever) or if it is custom or not. If it finds a smaller size that corresponds to the ratio of your initial image, it will display it when the screen size meets the required dimensions.

  6. To learn about how responsive images work it may be easier to understand if you listen to the interview.

    I am very interested to learn more and understand it better, but I wonder why I would have to sit through a podcast of almost half an hour.

    Is it just me?

  7. 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?

    Otherwise if I understand correctly, if I will include Large size, it will not benefit from this new feature, right?

  8. Thank you for discussing the new feature here. This is how I understood adaptive and responsive images by now:

    While responsive images are mainly used to respond to the viewport (scaling), adaptive images try to give a better answer to connection speeds.

    The solution which is discussed here seems to be something in the middle. I mean – it is great to be able to deliver images as a respond to viewport, display width and density, but how will all the people feel who have the greatest new mobile phones but very bad connections to the internet?

    Will mobile phones with bad connections ever learn to ask for smaller images or will we have to use one more script to block the big pics in these cases? It is not very easy to find a good answer to (retina) performance issues. Right?

  9. I will be doing a short 10 min. presentation at WordCamp Tokyo tomorrow, on this new implementation of Responsive Images. So exciting to see lots active development still going on towards 4.4 release, but nightmare to keep re-editing the slides :-)

  10. I’m a little late in replying to this post, but I finally had the time to check it out and listen to Joe. I can understand some positive aspects of this, but there is something I wanted to elaborate a bit more on the part of how many images are created with the various sizes and being stored on the server taking up space.

    Nowadays, host packages offer you huge disk space, so it would take a while to fill it up with a ton of images and doubt for “most” users will see this as a big problem. However, there is something that no one has taken in account…Backing up your website creates a file. The more images that get generated from each upload, the bigger your backup file will be. This can create many issues for people, so this is something they will have to think about.

    I recently wrote an article “Have you ever seen what is in your Uploads folder?” where it gives people an overview of the shear number of images that are created when Media Sizes are added (or kept intact). It was primarily focused around the amount of disk space these images take up, but also talked about the size of backup files, especially if one uses a lot of images on a daily or weekly basis. I generally prefer the media sizes are set to 0, and any image I upload, I create the size I need…including optimizing them.

    On the positive side of Adaptive Images (not responsive images) coming in 4.4, I can see how it could benefit load times in mobile devices, although we still have to consider disk space and backup file sizes.

    Here is something to also consider (unless I missed it somewhere), that some designs require an image to fill an area or container 100% in width, that this new adaptive function (not responsive) will/should load an image version that is closest to but not smaller than the container it needs to fill. If it is smaller, we will end up with an image that does not fill the required area as it should, therefore affecting the layout. There is also the case of page backgrounds; does this function affect that as well?

    • @Andre,

      I agree. This looks like adaptive images to me too. I fear it’s going to get very messy for precisely the reasons you have given.

      I really don’t understand why the images couldn’t be made properly responsive instead. That’s what the plugin, Soliloquy Lite, manages. While Soliloquy Lite is generally thought of as a slider plugin, I actually use it instead just to show individual responsive images. It works far better than this messy adaptive stuff.

      • Well – normally you have a thumbnail already, a medium size and a large size for your images. You can define these sizes yourself and If you need more sizes you can have more. Within your theme you can always define a standard image that fits best.

        The problem we are faced to is the same problem as you might have had it with your TV (receiver) already, when it jumped from normal size to HD Ready or Full HD. May be you try to use 4k technology (Ultra HD) already for some films but they have to be scaled up because they can not be delivered in that quality. In the result you can not enjoy your film in the highest possible quality right now.

        As mobile device companies love to play with ‘high density marketing campaigns’ and people still believe it is much better to download double sized, tripple sized or even larger pictures and buy those devices, they definitely will need the larger pictures to get their pictures sharp on new devices.

        In the end you will have to deliver lots of different image sizes and especially mobile devices will cause more and more (data) traffic because they don`t ask for the standard image that fits best but for the large ones. ;-)

        I would suggest to call it ‘design optimization’ (to sharpen the pictures) as you can not tell devices with low bandwidth connections that they better do not load the large pics. I have not heard about ‘intelligent browsers’ yet that check connection speeds before requesting high density images (if available).

        So in my opinion adaptive images have been cool before the mobile devices started to waste more and more bandwidth. It`s a bit tricky. ;-)

        • @fob,

          You obviously haven’t tried Soliloquy Lite. No need to mess around with different sizes. It doesn’t hop from one fixed size to another, but scales images in just the same way as responsive text scales.

  11. @KTS915

    You can scale SVG images without loss. But not the other images like GIF, JPG or PNG for example. Many people by mistake use their largest images in themes instead of thumbnails where thumbnails normally make sense. Other people try to scale up thumbs to full size images. If you make use of large images where it is not recommended to use them you are wasting a lot of bandwidth and slow down the performance of your website very much. Try to use a thumbnail to be shown in full size and you will see that it looks terrible. So the trick is NOT to use the standard image and scale it up and down with HTML or CSS technics (only) but try to serve a perfect matching image that has not to be scaled very much.

    When it comes to high density displays, e.g. on MacBooks (2560 x 1600 Pixel) or on all kinds of new mobile devices (e.g. 1,5x, 2.0x, …) the little horror show begins. Just think about a photographers photo gallery. Do you expect the photographer to know what he is doing when he uploads his 20 or even 40 Megapixel photoshooting results? Do you expect him to show (compressed or up-)scaled results or perfectly scaled and sharpened photos?

    Try to scale any photo or an image from 400×600 to 1200×1800 pixels and tell me if you like it. As you can see it is hard to find the perfect mix between high quality and high speed.

    But – did you always try to see 4k TV on a small screen? It does not work. I mean, you can not see the difference between HD and Ultra HD. That`s why I think things can simply be ‘overdone’ for smartphones (with connection speeds you can never trust). We will see how the web evolves.

    In other words: You can ignore the things around you and stay with old solutions or try to improve it a bit. I think it is not very helpful to compare a simple slider plugin solution with answers to new web challenges and theme development aspects.

    I just tried to explain my view on the things. I think, responsive is for beginners, adaptive is more for professionals, but not easy to use today as you have no control over the speed issues. I mean – people understand WWW as ‘world wide web’, not ‘world wide wait’, although they are using smartphones more and more. ;-)

    • @fob, Yes I know about SVGs. I use them about 90% of the time for this reason.

      But I don’t buy your idea that adaptive rasterized images are more “professional” then responsive ones. At best, all you’re saying is that WordPress doesn’t have a good way of automatically making Retina-friendly versions of images, so we’re settling for the moment on having more versions of images than we currently do.

      That might be pragmatic in the light of what WordPress is capable of. But it’s messy and far from optimal.

  12. @KTS915: What I meant is ‘it is difficult for theme developers to find out what might be best for the users of their theme’. 90% SVG usage sounds amazing. In this case you should really have no need for adaptive images. People who do not serve many pictures might not need it, too.

    Well – don`t understand me wrong. I am no advocat for the new ‘fixed solution’. I see reasons enough (pro and contra) to leave things like that as a plugin (or theme development process) so that users can decide theirselves if they want to use adaptive images or not and if it makes sense in the given project. On the other hand, if it goes to core, it should be very well supported and may be upgraded later and hopefully we will even be able to turn it off if we don`t need it.

  13. Hi,
    did I get it right, that the responsive feature is “ON” by default automatically after updating to WP 4.4, but it doesn’t touch already existing pages/posts and the images there?

    What happens if there is only ONE size of an image in media library? Will the new responsive feature do anything with this image?


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.