I wrote recently about why you shouldn’t use <picture> for responsive images most of the time.
In short, my argument is that most responsive images fall under the resolution switching use case and that <picture> is best used for art direction.
There is one resolution switching use case where <picture> makes sense—when you want to provide different file formats using the type attribute.
If that is the case, then you should use <picture> without the media attribute.
Most of the syntax examples for <picture> include the media attribute, but it isn’t required. You can do something like:
<source type="image/svg+xml" srcset="logo.svg" />
<source type="image/webp" srcset="logo.webp" />
<source type="image/png" srcset="logo.png" />
<img src="logo.gif" alt="Company logo" />
That is a simple example with a single file per source element, but there is no reason you can’t use the full power of the srcset attribute to provide multiple files per file type. You can even add the sizes attribute to give you more control.
So long as you don’t use the media attribute, you’re still giving the browser the information it needs to pick the right image source without dictating to it that it must use a specific one.
And unless you’re doing art direction, you should be striving to provide the browser with options, but letting the browser pick which source will work best.
(Thanks to Kevin Lozandier for reminding me that I need to write this up, and to Brett Jankford and Wesley Smits for raising this point in the comments on my previous article.)
Now that responsive images have landed in Chrome and Opera, I’ve started working on a flowchart to help people decide how to use these new features.
This work led me to wonder what ever happened to the
For those who haven’t heard of the
image-set() specification, it was a precursor to
srcset which is now part of the responsive images specification. It was originally proposed in February 2012, and WebKit-based browsers shipped prefixed support for it in August of the same year.
The are a few differences between
image-set(), but the biggest difference is that
image-set() deals with CSS images whereas
srcset is an attribute on the
How we forgot about image-set()
In 2012, the
image-set() spec was still under development and we were cautioned against using it at the time. Because media queries were available in CSS, handling CSS images in responsive designs wasn’t as difficult as handling responsive images in HTML itself.
So the Responsive Images Community Group focused on how to solve the
<img> problem. And I gradually forgot about
image-set() thinking that it was moving forward in the CSS Working Group and browsers.
It seems that I may not have been the only one who forgot about
image-set() because despite being two years older than
<picture>, it is still only supported under prefixing in Chrome and Safari. Worse, it isn’t on the roadmap for either Internet Explorer or Firefox.
Why we need image-set()
image-set() for the exact same reasons we need
sizes. Whenever we are dealing with a CSS image that fits the resolution switching use case instead of the art direction use case, we should be using
image-set() instead of media queries.
In fact, you can take nearly everything I wrote in Don’t Use <picture> (most of the time) and substitute
srcset and media queries for
<picture> and the same logic applies.
image-set() for resolution switching because it gives browsers the choice of what size image source will work best. And in cases where all we are dealing with is resolution switching, the browser is better informed than we are as web authors.
Help get image-set() into browsers
We need your help to make sure that image-set() is implemented in browsers. Help us by voicing your support and ask browsers to prioritize this feature:
Image-set() is a key piece of having a comprehensive responsive images solution in browsers. It has been languishing too long. Let’s get it back on track.
This past week, I had the luxury of attending the Digital Project Management conference in Austin. If you are a project manager and you haven’t heard about this group of awesome digital PMs, you are missing out. The first time I attended one of their events, I thought, finally! These are my people! People who actually do what I do at Cloud Four. My tribe.
What do I do, every day? What do digital project managers actually do? It’s mundane stuff, folks. In any given day, I write a ton of emails and Basecamp threads, review lists — many, many lists, in many different forms. I pester people in every way imaginable. (Letters. I’ve written actual letters at times.) I listen, a lot. I run conference calls, I Skype, I Hangout, I Slack, I SIP into meetings. Today, I slacked, then hangout, then called the same person in a 10 minute period. This is not glorious work.
It occurs to me frequently that this is work that really anyone could do. In fact, the tools we use are often designed so that anyone on my team is empowered to use them.
Want to schedule a meeting? Great! Lucid Meetings makes this really simple. It even walks you through agenda creation and attendee selection! (You know you need an agenda for every meeting, right? Make them good ones, too.) Want to ask the client a question? Perfect! Hit them up in Slack, or Basecamp. You don’t need me.
Sometimes it feels like the work we do is complete BS.
This is not the most encouraging thought to be having about your chosen career.
But here’s the thing: the reason we have project managers at all is because most people are not thinking about these things. Your project team is so heads down on the work they are doing that they don’t think about the overall project progress, or the political implications of asking a certain question, or just the right way to deal with that nagging change request. They don’t worry about the overall budget impact of that bug that was just found in QA, or how the hell you are going to schedule one extra sprint when you’ve got two other projects starting that same week.
They just don’t. But YOU do. And YOU are really freaking good at it.
[cue the inspirational music]
YOU wake up in the middle of the night, wondering why that one stakeholder didn’t seem engaged in your kick-off meeting that day.
YOU can’t shake that feeling that something isn’t right about that call you just had with your developer. She didn’t really say anything, but you know something is off and how to suss it out.
YOU know exactly how to load your project teams to maximize efficiency without overloading them.
YOU can evaluate a budget overage, report it to the customer, and offer alternatives that are actionable and clear.
YOU inspire and motivate your team to keep on keeping on.
YOU see patterns of inefficiencies in your organization and have ideas on how to address them.
And this is not just about making sure that someone (anyone) is tasked with these types of things. It’s making sure the right person is leading it.
This stuff is our DNA. And it’s not mundane or ordinary. It’s essential, technical, precise, and difficult work. It’s hard and soft skills. It’s invisible, yes, but like my ever-so-talented colleague Tyler Sticka described it, we’re like the project’s nervous system. The developers, designers, and other project team members are like arms and the legs, moving the body around, but they’d be paralyzed without a good PM to make sure signals are going where they need to be.
Like Nancy Lyons said in the closing DPM keynote, “We are change-makers, we are thinkers, we are do-ers.”
That’s some really cool, important BS, if you ask me.
Responsive images are landing soon and many organizations are looking for ways to resize images. Thankfully, there are a number of startups, established companies, and open source solutions for image resizing.
I’ve pulled together a spreadsheet of the image resizing services to make it easy for people to explore their options.
Figuring out what to include and what to ignore was difficult.
For example, GD and ImageMagick are available on many platforms and you could build your own service using them. Many CMS tools have built-in image resizing tools.
I focused on services and software that provided a level of abstraction (e.g., you can ask for image resizing via a URL) or were specifically focused on responsive images.
Does the image resizer try to detect the correct image size and would that be desired?
The spreadsheet has a column for detection to indicate whether or not the image resizer tries to automatically detect what size of image to request or deliver.
With the responsive images specification landing in browsers soon, I’m not sure if detection is desirable. The benefit of srcset and sizes is letting the browser choose what source is best.
What other image manipulation is offered?
Many of the image services offer services that can crop, filter, and otherwise manipulate images. Some even add things like focal point or facial recognition.
Performance is the missing column
As long as you’re centralizing images processing, you should try to find a service that will compress them as much as possible and provide other performance benefits such as caching and CDN support.
If I were evaluating services, I would be looking for these things, but comparing image compression is tough because it is a balance of raw file size and image quality the requires a judgment call.
Cost is a column I didn’t want to add
When I published this spreadsheet originally, I got a lot of people asking for column to compare price. I resisted adding it until recently. And I only report on whether the service is free or paid.
Comparing prices in the spreadsheet is pointless. Every service that charges varies pricing based on the volume of images. The prices will change in the future, and I don’t want to maintain that information. And the services are different.
I encourage you to explore the services themselves. Some are quite reasonably priced and the expensive ones offer a ton of features.
So take a look at the list of image resizing services. If you see something that is missing, please let me know.
I hope you find this useful.
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.
<picture> vs. picture
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
sizes and you can use those attributes without using the
Knowing which use case you’re solving tells you what solution you need
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.
For most responsive images, you won’t need the <picture> element
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
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:
srcset="cat_750px.jpg 1.5x, cat_1000px.jpg 2x"
Which will provide the browser with different options for display density. Or in a more complex example:
<img sizes="(max-width: 30em) 100vw,
(max-width: 50em) 50vw,
calc(33vw - 100px)"
src="swing-400.jpg" alt="Kettlebell Swing">
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
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
sizes then browsers can make smarter decisions about the appropriate image source.
In fact, I hope that browser makers compete on how they handle
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
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)" srcset="med.jpg">
<img src="small.jpg" alt="The president giving an award.">
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.
For the majority of the images on the web, <picture> is the wrong solution
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
The future of the web depends on us getting this right
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.
Perhaps we need to stop referring to the picture specification
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
Simple guidelines for using the responsive images specification
- 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
- 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
- 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!”