When to use for resolution switching

Written by Jason Grigsby on

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 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:

<picture>
   <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" />
</picture>

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.)


Never miss an article!

Get Weekly Digests


Comments

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.

source type="" works in much the same way as source media="" – the first "match" wins. But whereas with media we’re matching media conditions against the current environment, with type, the browser is matching against a list of supported formats. But it must choose the first source that matches.

Hence this issue on the picture spec, which seeks to add a type() descriptor to srcset. If that gets implemented, the browser will indeed be able to look at all of the formats on offer, and choose whichever one it pleases.

Eric Portis

Replies

Eric: Good point. Dictating the file format seems much less dangerous to me than dictating the image size. '

We can know a lot about what format displays the image best, but we don't know much about the conditions the user is in when they are viewing an image (e.g., their bandwidth constraints) which is why I feel strongly about abuse of the media attribute.

That said, I have no objection to the idea that srcset could be expanded to support type and giving the browser the option to choose the format as well as the size.


Let’s discuss your project! Email Us