Musings

I know how to use the <img> element, but I’ve been hearing things about the upcoming <picture> element to be used for responsive images. The articles I’ve read on the subject are kind of mixed up about the usage of the <picture> element and I’d like to get some clarification.

How is the <picture> element different from the <img> element? Should I always use it instead of the <img> element given that I want all of my sites to be responsive?

Should I always use it instead of the <img> element given that I want all of my sites to be responsive?

No! The <picture> element is not a replacement for the older <img> element. In fact, most of the time you should use the <img> element.

As Jason Grigsby says in his article on the subject,

The ‘picture’ specification 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.

In essence, there are many use cases for the picture specification¹, but there are two primary ones: resolution switching, which is selecting a different source for the image when needed, and art direction, which is for most everything else like cropping, etc.

Most of the time we’ll just need resolution switching, in which case we should use the <img> element. “How can this be? My <img>s aren’t responsive.” Well, they might not yet be but they should be soon, granted the following format (pulled from Jason Grigsby’s article) is followed:

<img
  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"
  src="swing-400.jpg"
  alt="Kettlebell Swing"
/>

Essentially the srcset is a set of images that the browser can choose from and it’ll decide which one to choose based on some calculations and, in order to have varying dimensions at different viewports, the sizes options given. The src at the bottom is a fallback for browsers that don’t support srcset. For more information regarding the syntax of the new properties and <picture> element, check out Yoav Weiss’ great article on the topic.

The <picture> element, on the other hand, requires you to specify exactly when to change out the src for a new one. This is definitely not optimal because the computer is very good at picking the right image to use and, as developers, we want to be as lazy as possible while still having the function and looks we need :P

An example of using the picture element is as follows (again pulled from Jason Grigsby’s article)

<picture>
  <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." />
  <!-- Fallback -->
</picture>

“So when should I use the <picture> element?”

You should use the <picture> element when your use case is in an art direction, meaning when you need to crop the image at different viewports or do something similar, no other time.

Feel free to start using the responsive images specification¹ now as both src-set and the <picture> element fallback to currently supported methods. There is also a great poly fill called Picturefill so you can use the full features on current browsers.