Responsive Images: Using srcset and sizes Attributes

responsive images

Responsive image techniques, such as the HTML srcset and sizes attributes allow us to serve different scaled images based on the size of the display. What this means is that mobile users can now be served smaller file sizes, which in turn speeds up the delivery of the content. While these attributes are not yet widely used, within the next month, 25% of the internet will suddenly be adopting these new techniques as these attributes have now been merged into WordPress 4.4 core. This is exciting news as it means another step towards faster content delivery on mobile devices!

We live in the world of mobile devices and data is being accessed much differently than it was before. According to HTTP archive, on average, 56 percent of a website’s page weight is made up of images. And with mobile traffic now surpassing desktop traffic, it is more important than ever to optimize images for all sizes of devices, both using lossless compression and by using the srcset and sizes attributes.

What are the SRCSET and SIZES Attributes?

“The srcset and sizes attributes extend the img and source elements to provide a list of available image sources and their sizes. Browsers can then use this information to pick the best image source. Both of the attributes are are part of the HTML specification and can used separately or in conjunction with the picture element.” You can read more about them at the Responsive Images Community Group.

Browser Support

Most modern web browsers support srcset, except IE and opera mini. However, Microsoft did recently add support to their new Edge browser. If the browser doesn’t support it, it will simply fallback to the original image. So there really is no disadvantage to using the attributes from a browser perspective.

web browser support srcset

How to Use SRCSET and Sizes

Let’s use this image of a car for an example. This is typically what your code would look like when linking to an image.

<img src="responsive-images-car.jpg" alt="responsive images car" width="640" height="434">

responsive images car

SRCSET Display Descriptors

Here is an example of using srcset with display descriptors. The srcset attribute is always used within the IMG element. You can see that we are simply adding the width of the images after the file name, such as 160w, 320w, 640w, etc. However the problem with this is that you are relying solely on the size of the viewport to tell the browser which image to load.

<img src="reponsive-images-car.jpg" alt="responsive images car" srcset="responsive-images-car-160.jpg 160w, responsive-images-car-320.jpg 320w, responsive-images-car-640.jpg 640w, responsive-images-car-1280.jpg 1280w">

And that is where the sizes attribute comes into play.

Sizes

With the sizes attribute we are telling the browser exactly what size the image will be in relation to the size of the viewport. This can be used in conjunction with the srcset attribute. These are media conditions, which are very much like a media queries which you are probably used to.

<img src="responsive-images-car.jpg" alt="responsive images car"
  srcset="responsive-images-car-160.jpg 160w, responsive-images-car-320.jpg 320w, responsive-images-car-640.jpg 640w, responsive-images-car-1280.jpg 1280w"
  sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

SRCSET Display Density

Here is an example of using srcset with a display density descriptor. These are used for resolution switching based on high-resolution retina displays. Each item contains the path to the image and the density (e.g., 1x, 2x, 3x). Note: you don’t need the sizes attribute when using the display density descriptors.

<img src="responsive-images-car.jpg" alt="responsive images car" srcset="responsive-images-car.jpg, responsive-images-car-2x.jpg 2x">

Don’t Forget WebP

And let’s not forget about WebP, as we have been seeing some incredible results with it lately. In our recent case study with our new WordPress Cache Enabler plugin WebP resulted in a 77% decrease in page size when comparing JPG to WebP and a 27% decrease when comparing PNG to WebP.

This is where the picture element and source type attribute come into play. The picture element is a markup pattern that allows developers to declare multiple sources for an image. By using media queries, it gives developers control as to when and if those images are presented to the user. The element is one part of the HTML specification. You can read more about it at the RICG.

Below is an example of us adding the picture element along with a WebP source type, in concjunction with the srcset attribute.

<picture><source type="image/webp" srcset="responsive-images-car-160.jpg 160w, responsive-images-car-320.jpg 320w, responsive-images-car-640.jpg 640w, responsive-images-car-1280.jpg 1280w"><img src="responsive-images-car.webp" alt="responsive images car"></picture>

Why Are Responsive Images Important?

The reason responsive images are so important all comes down to file sizes! On smaller devices such as an iPhone, there is no reason to download an image that is 1280px wide. It is a waste of bandwidth and resources. How much of a waste? Let’s take a look at the image sizes we used in the example above.

File Name Size
responsive-images-car-160.jpg 13.8 KB
responsive-images-car-320.jpg 50.99 KB
responsive-images-car-640.jpg 190.7 KB
responsive-images-car-1280.jpg 508.2 KB

The width of an iPhone screen is 480px, which means we would be serving up the responsive-images-car-320.jpg, at 50.99 KB. If we compare that to the original responsive-images-car-1280.jpg (which CSS would have to scale down) at 508 KB, that is a decrease of 89.97%! Let’s say your homepage has 5 of those images on it, that is a decrease of over 2MB. Note: The above is an example. Lots of mobile devices are now using high DPI screens. iPhones use Retina screens which have a higher pixel density, so a larger image might be required.

Also over time this can save quite a bit of bandwidth from your web host or your CDN provider, which in turn saves you money.

WordPress Support

WordPress now powers 25% of the internet, which means millions of website will now start using the responsive images markup attributes. If you are running WordPress, there is currently a plugin, RICG Responsive Images, with which you can start experimenting with responsive images. Note: this is the plugin that is actually being merged into core in WP version 4.4.

responsive images wordpress plugin

SRCSET and Sizes Changes in WordPress 4.4

Here are the following changes in WordPress 4.4:

  • Both the srcset and sizes attributes will be added to images by extending wp_get_attachment_image(), which includes all post_thumbnails, photo galleries, and any other images that use wp_get_attachment_image() to build the markup.
  • To help browsers select the best image from the source set list, they are also including a default sizes attribute that is equivalent to (max-width: {{image-width}}px) 100vw, {{image-width}}px.
  • A new default intermediate size, medium_large, is being added to better take advantage of responsive image support.
  • Retina: Browsers that support the srcset and sizes attributes take into account the screen density when selecting an appropriate source, so the changes will provide full retina support as long as the original uploaded image was large enough to have the appropriate sizes created by WordPress. Image dimensions can be changed in your WordPress media library settings.

Summary

As you can see it is more important than ever for web developers to start using these responsive image techniques as they will ensure faster download times for mobile users and over time save bandwidth. It is also very exciting to see the WordPress community adopt these and implement them into the WP core.

Related Articles

Responsive Images: Using srcset and sizes Attributes was last modified: April 25th, 2016 by Brian Jackson
Share This