You’ve heard many times before, “Your website needs to be responsive and mobile friendly.”
Main reason: more and more people are accessing websites from mobile devices.
If you’ve ever accessed a website that isn’t mobile friendly, you already know what a huge pain it is.
But the biggest pain are images that are way too large for a mobile device; not only do they not fit on your screen, but they make the site load very slow.
To combat this problem, the WordPress core team has added functionality to WordPress that solves this problem by automatically making images responsive.
But to truly understand and appreciate this functionality, we need to look at the way images used to load.
The Old Way Of Loading Images
Let’s imagine there is a responsive web page that has a width the same size as the screen it displays on.
The only content on the page is an image, and the image loads so it takes up the full width of the screen it is on.
(In other words, the CSS width for the image and page 100%)
Now, we are going to load this web page on two devices:
- A smartphone with a width of 300px
- A desktop computer with a width of 1024px
For simplicity’s sake, let’s ignore retina displays and other high resolution displays.
Ok, so the image the image file we are loading is 1024px by 600px.
On the desktop display, the image size and the display size are the same. Works perfectly.
But on the smartphone, where the screen width is only 300px, the image shrinks down to 300px. However, the image file that loads is still 1024px.
On a smartphone, there is a lot of wasted bandwidth. That translates to longer loading times.
Wouldn’t it be better if we could load one image file for desktop, and then a smaller image file for mobile?
Well, that’s exactly what WordPress does now.
The New Way WordPress Loads Images
If you aren’t already aware, when you upload an image to WordPress, it automatically creates a few different sizes. You may have seen these image sizes when inserting an image into a page or post, and having to select a size.
WordPress takes advantage of these image sizes and finds the best to load depending on the screen size and how large the image will be.
It does this using some new attributes: SRCSET and SIZES.
As you know, the SRC attribute you usually see on an image tells the browser the URL to the image file. SRCSET provides the URLs for all the possible image files.
SIZES tells the browser which image file to load based how what it computes the image size will be.
So the image code ends up looking like this:
<img src="IMAGE_URL" srcset="MEDIUM_IMAGE_URL 300w, LARGE_IMAGE_URL 1024w" sizes="(max-width: 1024px) 100vw, 1024px" />
(More about SRCSET and SIZES here: Responsive Images In Practice)
To understand this, let’s go back to the example I started with.
When you load the webpage with the one image on the desktop, the browser reads the SIZES attribute and knows it need to load an image that is 1024px wide. So it looks through the SRCSET and sees that the full size image is already 1024px, so it just loads the full size image.
When the smartphone loads, the SIZES attribute tells the browser, “Ok, the image will only be 300px here.”
So it looks through the SRCSET and sees that the Medium image size has a width of 300px. So it loads the Medium sized image instead of the full width image.
Now, instead of a large 1024px image, the smartphone loads an image that is 1/3 the size.
Some Parting Words
In the example I used, you may have noticed I didn’t reference retina displays or other high resolution displays.
As you can imagine, having to deal with these displays brings in more complexities.
But (and this is why this feature is so cool), the responsive images and finding the right file and size to display all happens automatically.
If you’d like to read more about this topic, please see the links below:
- All about srcset and sizes
- All about this functionality in WordPress
- Details on incorporating this functionality into Themes