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.
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!”
Last year, I wrote 8 Guidelines and 1 Rule for Responsive Images based on some consulting work we had done for a client with over 800,000 images on their site.
In preparation for An Event Apart Austin, I decided to revisit the guidelines and see if they still applied in light of browsers implementing the picture specification.
In particular, I was curious how much caution we should take when implementing solutions for responsive images. Last year, I wrote:
The one and only rule for responsive images: Plan for the fact that whatever you implement will be deprecated
Is that rule dated with the browsers standardizing on the picture specification?
I asked for some feedback from the responsive images community group on the risk of the specification changing and how much we should be hedging out bets.
Simon Pieters, who works for Opera, wrote:
It is also normal that the first shipping implementations are not perfectly compliant with the spec. For instance they might have implemented a slightly out of date algorithm and missed that something was changed, or simply have bugs. Then it is fixed in a future version and that might break your code if you only tested in one implementation.
This is no different from any other feature that is shipped on the Web. To avoid issues, test in multiple implementations and validate.
Should we still be hedging our bets a little?
No, that’s not necessary.
Now, a couple of people on the list responded that they have a large set of images on the sites they manage and centralizing image handling and markup still made sense. So perhaps it isn’t a rule, but still an idea that you should consider based on the scope of the site and the number of images involved.
I’ll leave the final word on the matter to Marcos Cáceres who played a critical role on the picture specification and works for Firefox, reassured me with these words:
Once it gets into the wild and people start using it, it can’t change. Thems is the golden rule of the Web.
Spec is stable and the browsers are coming this month – go forth and <picture> all the things! Make the web beautiful again :)
As Marcos says, go forth and <picture> all the things!
P.S. If you’re interested in more on this topic, join us at AEA Austin or AEA Orlando. You can use discount code ‘AEAGRIG’ to get $100 off your registration. I hope to see you there!