WordPress 4.4, Responsive Images and scrset
WordPress 4.4 shipped this week with a really interesting approach to responsive images.
Joe McGill, who led the project, has an overview of the changes:
WordPress automatically creates several sizes of each image uploaded to the media library. By including the available sizes of an image into a srcset attribute, browsers can now choose to download the most appropriate size and ignore the others—potentially saving bandwidth and speeding up page load times in the process.
That was the goal. Here’s an example of the actual code for an image in WordPress 4.4:
<img class="alignnone wp-image-9 size-large"
src="https://ostraining.com/wp-content/uploads/2015/12/mountains-1024x640.jpg"
srcset="https://ostraining.com/wp-content/uploads/2015/12/mountains-300x188.jpg 300w,
https://ostraining.com/wp-content/uploads/2015/12/mountains-768x480.jpg 768w,
https://ostraining.com/wp-content/uploads/2015/12/mountains-1024x640.jpg 1024w,
https://ostraining.com/wp-content/uploads/2015/12/mountains-1200x750.jpg 1200w"
sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw,
(max-width: 1362px) 62vw, 840px" />You can see that this code, inside the srcset attribute, includes 4 different versions of our original image. The 4 version of the same image have 4 different widths: 1200px, 1024px, 768px and 300px.
About the scrset attribute
What is the scrset attribute that has been added to this code in WordPress 4.4? Eric Portis at A List Apart has a great overview:
- scrset contains a comma-separated list of resource URLs.
- After each URL we include a “width descriptor,” which specifies each image’s pixel width.
- srcset-aware browsers use these pixel widths and everything else that they know about the current browsing environment to pick a source to load out of the set.
WordPress deliberately adds the height and width to each image version, which may be confusing. Here’s a simpler example of srcset, modified from Eric:
<img src="quilt_2/detail/medium.jpg"
srcset="quilt_2/detail/large.jpg 1920w,
quilt_2/detail/medium.jpg 960w,
quilt_2/detail/small.jpg 480w" >In our WordPress example, there were 4 image sizes specified in the comma-separated list: 1200px, 1024px, 768px and 300px.
So if there are four sizes in the code, why do we only see three WordPress sizes in the WordPress admin, “Thumbnail”, “Medium” and “Large”?
Here’s the answer from Joe:
A new default intermediate size, medium_large, has been added to better take advantage of responsive image support. The new size is 768px wide by default, with no height limit, and can be used like any other size available in WordPress. As it is a standard size, it will only be generated when new images are uploaded or sizes are regenerated with third party plugins.
Why did WordPress 4.4 change responsive image handing?
To make your site faster.
Back to Joe again for an explanation of why this technique is fast:
As of today, the average web page currently weighs over 2 MB with the majority of those bytes being attributed to images. Screen density and display sizes continue to increase and site owners are including larger image assets to keep up, causing slower page load times for people on smaller/older devices and on slower/expensive network connections. We have the opportunity to make a huge impact on the ~25% of the web that runs on WordPress by adding responsive image support out of the box so sites can serve appropriate sizes images to all users.
Without this technique, many sites upload one very large image that’s optimized for retina screens. They then show that large image on every device from massive screens to mobile phones.
What WordPress 4.4 does is smarter. It now provides 4 different images, so that the browser can choose. This means that a mobile phone user may download the 300px version, which is much smaller and faster-loading. A retina Mac user will still get a great-looking image by downloading the 1200px version.
