There are many instances in web design where photo's are a crucial aspect of the design. Well, they had better be, otherwise what are they even doing in the design? When we say photo’s though, we’re talking about real photographs. A photo taken with a camera or a bitmap image (jpg, png, etc.). With responsive designs we resize the photo based on the users screen size, but with that approach there's almost always a quality gap.

The <picture> element accepts multiple image sources, and empowers the browser to decide which image is appropriate based on the user's conditions. These conditions are often network speeds, or their screen resolution.

Why do I need multiple sources?

Not all images need multiple sources, so lets talk about a couple simple examples where it might make sense to do so.

Hero images:

These are often full width, but usually don't have a 1:1 aspect ratio. This is fine on a desktop browser, but on a mobile device chances are the image is ~200px tall at full width, and you can't see jack son! That's a problem...

The solution: Multiple image sources will allow a completely different image to be served for mobile users. In this case a different aspect ratio could be used.

High resolution images:

According to global statistics the average desktop computer's (or laptop) screen resolution is 1366px by 768px. If you have a nice photo that you need to show off, you're going to need to be somewhere around that pixel size (give or take a few hundred pixels), and that's still going to look a bit pixelated on a higher pixel density display (ex: a retina screen). That's not cool...

The solution: You guessed it, multiple image sources! Here we can source other files that have a lower resolution, and file size for mobile screen, or we can crank out a higher resolution photo for a screen with a higher pixel density.

How does one implement the <picture> element?

Here's a real world example:

<picture>
<source media="(min-width:64rem)" srcset="img/sudden-valley.jpg">
<source srcset="img/sudden-valley_sm.jpg">
<img src="img/sudden-valley.jpg"/>
</picture>

The <picture> element is the container for <source>, and <img> elements. When the browser sees <picture> it determines which one makes the most sense for your user based on media queries, or other source attributes. More on source attributes later...

Support and considerations

While <picture> is perfectly valid HTML5, not all browsers have implemented it in its full glory. No big deal, that's where the <img> tag inside of your <picture> element comes in. This <img> is what is shown when the browser doesn't understand what <picture> is. That's beautiful.

Can I Use picture? Data on support for the picture feature across the major browsers from caniuse.com.

The <source> element

<source> elements are created for each separate image that you would want to (conditionally) render inside of the <picture> element.

A lot of the time one or two <source>'s would be defined, but as many can be made as you'd like.

Source attributes

  • media: Set a min/max width or height.
  • srcset: Set the path to the image, and what width to use.
  • type: Set a MIME type for the image. If the user agent doesn't support the type, it's skipped.

Here is another example:

<picture>
<source media="(min-width: 72rem)" srcset="img/sudden-valley_16x9-lg.jpg">
<source media="(min-width: 64rem)" srcset="img/sudden-valley_16x9.jpg">
<source srcset="img/sudden-valley_9x9.jpg">
<img src="img/sudden-valley_16x9.jpg"/>
</picture>

Go forth and prosper!

This isn't a license to pepper your site up with 800kb images, but now you can support mobile devices and desktop devices without sacrificing quality.


Author
Tony Montemorano

An espresso swilling frontal-nerdist with an insatiable love for the web.

Post Categories