Why WordPress 4.4 makes responsive websites faster on mobiles

March 26, 2018

WordPress-responsive-images

WordPress version 4.4 was released last month and everyone's talking about the fact that it now integrates with the REST API - thus paving the way for a seemingly unlimited range of integrations. Now WordPress can be taken in directions that were previously unimaginable. Every WordPress blog is talking about it.

But what no one's talking about is the fact that WordPress 4.4 has finally implemented fully responsive images.

Didn't WordPress websites have responsive images before?

Kind of. But not exactly.

Previously, uploaded images in WordPress were automatically saved in various sizes: small, medium, large, as well as any custom sizes defined in your current theme (e.g. for featured images). However, when inserting a image in a post you can only choose one of these sizes.

That’s not an issue if you view the page on a desktop - for example a 'large' image may be 1,000 pixels and will display on the screen at 1,000 pixels. However, when you access it via a mobile device you’ll end up downloading a 1,000px wide image when your screen is only 400px wide. The image will appear at 400px but the actual image file that is being loaded is the full 1,000px. Ideally, you would want to serve a smaller file size to mobile devices based on their viewport size.

The reason this matters is that the bigger the images, the longer the page load times. Mobile and tablet users were being stung with larger page sizes and therefore slower load times - which is particularly problematic for users with slow connections, e.g. when they're out and about.

Was there a solution before WordPress 4.4?

Most WordPress website owners were blissfully unaware that their mobile users were being served unnecessarily large images. This meant that most WordPress websites loaded slower than they needed to on smaller screen sizes.

A few WordPress developers released plugins designed to tackle the problem. For example the BC Responsive Images plugin could be used to serve appropriately sized images, depending on the user's screen size. However these plugins weren't ideal because (a) not many people were aware of the problem, let alone these plugins; and (b) they were quite fiddly to set up and required some technical know-how.

How has WordPress 4.4 improved responsive images?

WordPress 4.4 added screen and sizes support. This transforms the actual image size - and therefore the image file size - depending on each user's screen size.

The new and improved responsive images are created automatically and don't require any setup or configuration. This means that to benefit from the change, all you have to do is update your version of WordPress to version 4.4 or above, and WordPress will take care of the rest. (And if you haven't updated yet, why not? It's vitally important to keep WordPress up to date.)

7 Comments

  1. DesignCentre
    February 15, 2016 Reply

    I found this theme while browsing through ThemeForest. These people have done AMAZING work with the design and usability.

    https://themeforest.net/item/dossier-modern-portfolio-wordpress-theme/14648994

  2. Max
    February 2, 2016 Reply

    Yeah, it is easy to misunderstand, what "old" and "existing" means... Already existing in posts or just in media library. Therefore my question. Searching the web I too found two guys telling explicitly that images already inserted in posts before updating had been changed, like your first answer.

    • Andy Keith
      February 10, 2016 Reply

      Hi Max,

      From research on our own site and our clients, it seems that all images are made responsive, as long as they were added to a post or page using the 'Add Media' button. This also includes featured images (aka post thumbnails) for blog posts. This change applies to any post or page, including those published before WP 4.4 was released (8th Dec 2015).

      Just to clarify, by 'responsive' I mean that the images make use of the new 'srcset' and 'sizes' attributes on the img tag in the outputted HTML.

      To answer your first question, any files already existing in the media library will also be responsive when you add them to a post/page, regardless of when you added them to the library.

      If your theme (or plugins) display images on a page as part of some custom feature built into the theme, then those images will not be responsive (even if uploaded or published after updating to 4.4) unless the theme or plugin author has updated their code to use this feature. For example, on our site we have a 'Portfolio' section, and each post has a gallery of screenshots showing the website in question. At the moment, these images are not responsive in the way that images inserted into a post are (i.e. they do not include the 'srcset' and 'sizes' attributes).

      A small caveat: we have found a few images on our site (and on client's sites) that are not being made responsive. For example, a number of featured images on our older blog posts do not have the srcset and sizes attributes, although other old blog posts do. Delving a bit deeper into the code, I haven't yet been able to establish why some of these older images are including the responsive stuff and others aren't. If anyone discovers the reason behind this, please let me know!

      Thanks.

      • Max
        February 18, 2016 Reply

        Hi Andy,
        "From research on our own site and our clients, it seems that all images are made responsive, as long as they were added to a post or page using the 'Add Media' button. This also includes featured images (aka post thumbnails) for blog posts. This change applies to any post or page, including those published before WP 4.4 was released (8th Dec 2015)."
        Thanks for your comprehensive and enlightning statement. I'm bit suprised, because it contradicts the above mentioned podcast at wptavern, done by the developer. Furthermore I'm sure many webmasters are not delighted by getting changed their old images in old posts/pages, because the result not always makes them happy.

        Regarding old images in old posts NOT being made responsive the only explanation I have is a lack of different sizes. For example in media settings you can disable the generation of several sizes.

  3. Max
    February 1, 2016 Reply

    Hi Katie,
    thanks for your fast response. Obviously WP developers changed their mind, because in the podcast here at https://wptavern.com/joe-mcgill-explains-how-responsive-images-work-in-wordpress-4-4 (at 06:05 to 06:55), one of the developers says, it would be too dangerious to change existing images in existing posts.

    • Katie Keith
      February 2, 2016 Reply

      Hmm that's strange, I had based my reply on something I had previously read in a different post saying that the change also affected old images - but that has since been rewritten to remove this comment! So perhaps it was wrong.

  4. Max
    January 31, 2016 Reply

    Hi Katie,
    "And if you’re worried about the images that you uploaded to your website prior to WordPress 4.4, don’t be. The changes apply to your existing images too."
    Does that mean
    a) Images already existing in my media library before WP 4.4 will become responsive after inserting them into a post or page OR
    b) Images already inserted in a post/page will become responsive automatically after updating to WP 4.4?

Please share your thoughts...

Your email address will not be published.