Don’t use <picture> (most of the time)

Browser support for the picture specification is landing and as Marcos Cáceres said, it is time to “go forth and <picture> all the things!”

Except you shouldn’t. You shouldn’t <picture> all the things.

But you should start using picture now for responsive images. No reason to wait.

Confused? You’re not alone.

Standards are developed in non-linear fashion. Ideas evolve and merge. And often at the end of a lengthy process, you look back and wonder how you got here.

And in this case, where we ended up is with a specification called ‘picture’ that contains much more than the <picture> element. The picture specification includes srcset and sizes and you can use those attributes without using the <picture> element.

One of the earliest pieces of work that the Responsive Images Community Group undertook was defining the use cases for responsive images.

You don’t need to know all of the use cases, but you do need to know the difference between the two most common use cases in order to know which part of the picture specification will solve your problems. The two common use cases are:

• Resolution switching — In the resolution switching use case, we need to select a different source of the same image because we need a different resolution for any number of reasons. These reasons include the image being used at a different size based on the size of the screen, the pixel density of the screen, or to avoid downloading unnecessarily large images.¹

• Art direction — In the art direction use case, there is some reason why we need to modify the content of an image under certain conditions. Maybe we need to crop the image differently on small screens. Or perhaps we’re working with a hero image that contains text and simply providing a smaller version of the image won’t work because the text will be unreadable.

Basically, if you could resize an image without making any other changes, and have a new source that solves your responsive images needs, then you’re talking about the resolution switching use case. If you need to change anything other than resolution, you’re talking about art direction.²

Unless you’re solving for art direction, you don’t need to use the <picture> element. In fact, you’re likely doing your users a disservice by using the <picture> element.

The picture specification supports syntax that can be used without the <picture> element. An example syntax, borrow from Yoav Weiss’ excellent article Native Responsive Images, might look like this:

<img src="cat_500px.jpg" srcset="cat_750px.jpg 1.5x, cat_1000px.jpg 2x" alt="lolcat" width="500px" />
Code language: HTML, XML (xml)

Which will provide the browser with different options for display density. Or in a more complex example:

<img src="swing-400.jpg" sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" alt="Kettlebell Swing" />
Code language: HTML, XML (xml)

There is a lot to digest in those examples, and unfortunately, I don’t have the space to cover the syntax here. Instead, I recommend reading Yoav’s article or one of the additional resources listed below if you want to understand the details.³

When you use the srcset and sizes attributes on an <img> element, you are providing information that the browser can use to make an informed decision about what image is appropriate for the user based on a bunch of factors that you are unaware of.

As a web designer or developer, you have no way of knowing how much bandwidth the user currently has or if they’ve declared some sort of preference for the density of images they want. If we provide browsers with information via srcset and sizes then browsers can make smarter decisions about the appropriate image source.

In fact, I hope that browser makers compete on how they handle srcset and sizes by developing new user settings or smarter algorithms to help them pick the right images to download.

But none of that is possible when you use the <picture> element and its media attributes:

<picture> <source srcset="large.jpg" media="(min-width: 45em)" /></picture>
<picture> <source srcset="med.jpg" media="(min-width: 32em)" /></picture>
<picture> <img src="small.jpg" alt="The president giving an award." /></picture>
Code language: HTML, XML (xml)

When you specify the media queries for sources, you are providing rules to the browser that it must follow. The browser has no discretion to make smart decisions about what to download based on user preference, network, etc.

You should use the power to dictate what image gets downloaded sparingly. In fact, you should only use it when you’re solving for art direction, not for resolution switching.

Last year, Yoav tried to figure out what percentage of responsive images fell under the art direction use case. The answer: 25%.

Responsive design is still early so we may find that the percentage changes, but it is unlikely that we’ll ever reach a point where the number of art directed responsive images out-numbers the number of resolution switching ones.

Therefore, for most responsive images, the <picture> element is the wrong solution. You should be using <img> with srcset and sizes.

Getting this right matters a great deal to the future of the web. We’ve seen in the past what happens when web developers create a large installed base of suboptimal web pages. We end up with browsers adopting other browser’s css prefixes or media types such as mobile and TV ignored by all mobile phones and TVs.

If we create thousands of web pages that use the <picture> element for resolution switching, we doom ourselves to having to specify every single image needed instead of letting the computers—the browsers—do what they do best and automatically find the right image based on a multitude of variables.

Worse, we doom our users to a future where they are unable to take advantage of whatever browser advances come because we’ve taken the browser’s discretion away and dictated what image should be downloaded.

A lot of this confusion comes from the fact that we have a specification that ended up with picture in the title even though the specification covers more than just picture.

For those who have been heavily involved in the development of a solution for responsive images, picture is a nice shorthand. That’s why you see that even it referred to as <picture> in Chrome Status and Modern IE Status.

Using picture as a shorthand it creates confusion when talking to people who are just now looking to implement responsive images. I asked the Responsive Images Community how they’ve been handling this confusion.

Bruce Lawson says:

I tend to refer to “picture and friends” or, generically, “responsive images”

And Odin Hørthe Omdal adds:

I always talk about responsive images, and I think I probably say the respimg specification.

So I’m going to attempt to do the same. I’m going to break myself of the habit of referring to the picture specification and instead refer to responsive images specification even if that isn’t technically the name of the specification. I think people will understand what I mean, and it will help ensure more people understand that it isn’t all about <picture>.

To summarize:

• The picture specification contains more than just the <picture> element. Think of it as the responsive images specification. * For most responsive images, you shouldn’t use the <picture> element. You should use srcset and/or sizes.

• The way to know when to use the <picture> element is based on the use case you’re trying to solve.

• If you’re solving for the art direction use case, use the <picture> element. Anything else, you should stick to srcset and sizes.
• Getting this right early—before we have thousands of pages using <picture> incorrectly—is critical for the future of the web.

And with that, I will amend what Marcos wrote to say, “Go forth and make all your images responsive!”

---

1. In the responsive images use case document, resolution switching is described with three different examples: Resolution-based selection, Viewport-based selection and Device-pixel-ratio-based selection.
   And yes, they are all different reasons why you want to select a different resolution source, but they all involve resolution switching which is why I’m lumping them together.
2. You may find this article I wrote on A Framework for Discussing Responsive Images to be a good high-level overview of the use cases.
3. Some additional articles to help you understand the full features of the picture specification: HTML5 Rocks: Built-in Browser Support for Responsive Images, Srcset and sizes and Responsive Images Done Right: A Guide To <picture> And srcset by Eric Portis.