When to use for resolution switching

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>
Code language: HTML, XML (xml)

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