Cancel

Jeff Chandler

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.

Category:
Tags: , ,
52

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.

    Create forum topic from comment
    Reply

    • 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

      Create forum topic from comment
      Reply

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

    Create forum topic from comment
    Reply

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

      Create forum topic from comment
      Reply

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

        Create forum topic from comment
        Reply

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

    Create forum topic from comment
    Reply

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

        Create forum topic from comment
        Reply

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

    Create forum topic from comment
    Reply

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

      Create forum topic from comment
      Reply

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

    Create forum topic from comment
    Reply

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

    Create forum topic from comment
    Reply

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

    Create forum topic from comment
    Reply

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

    Create forum topic from comment
    Reply

    • @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.

      Create forum topic from comment
      Reply

      • 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. ;-)

        Create forum topic from comment
        Reply

  18. @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. ;-)

    Create forum topic from comment
    Reply

    • @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.

      Create forum topic from comment
      Reply

  19. @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.

    Create forum topic from comment
    Reply

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

    Create forum topic from comment
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You may also like

Newsletter

Subscribe Via Email

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

Discover more from WP Tavern

Subscribe now to keep reading and get access to the full archive.

Continue reading