Why WordPress 4.4 makes responsive websites faster on mobiles

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