Art Directed Responsive Images with the "picture" Element

The syntax and limitations of the HTML "picture" element

Photo of building cropped for different screen sizes
Photo of building cropped for different screen sizes.

Images are a critically important component in the success of a website. They can also be one of the biggest challenges that web designers have to contend with during the development of a site. For example, if you’ve done any work building responsive websites, you have undoubtedly encountered the headaches that images present for those sites.

The most common approach to responsive images is to deliver them at the largest size at which they will be shown and then use CSS to resize their physical dimensions.

This is a losing solution from a performance perspective. Realistically, responsive websites require smarer responsive images solutions.

If you simply need to provide different sized versions of the same image for different screen sizes, then using the <img> attributes of is going to be your best bet. If you need to have a level of art direction with those images, however, then the HTML <picture> element will be a better fit.

What Is Art Direction for Responsive Images?

There are times when an image on a responsive website needs to be cropped differently depending on the screen size being used to view that site/image. Take a look the image that accompanies this article. It is a photo of the front of my office building. You will see how it is cropped in different ways across various devices. This is art direction. The image is not just resized across those different viewport sizes, but is actually presented as different images altogether.

The aforementioned srcset and sizes attributes do not allow for this level of art direction, but <picture> does.

The Syntax of <picture>

So what does the syntax of the HTML <picture> element look like? Here is an example:

<source media="(min-width: 1000px)"  srcset="building-lrg.jpg">
<source media="(min-width: 750px)"  srcset="building-med.jpg">
<img src="building-sm.jpg"  alt="The front of our office building">

The <picture> element itself wraps the entire segment of HTML. Alone, that element does nothing. It requires the source and img elements that are contained within it.

The img element should look familiar. It is just the same old img tag that we have used in web design for many years. This tag sets the default image that will be used. It also provides a fallback for any browsers that do not support the other new elements being used here (more on browser support shortly). Those unsupporting browsers will simply show the image as normal and ignore the rest of this markup. Backwards compatibility achieved!

For browsers that do support this new features, the “source” pieces are what is important next. The source uses two properties - media and srcset. The media property is set with a media query and it determines when the image URL set in the srcset property would be displayed.

In the example above, the “large” sized image would load for any viewport larger than 1000 pixels. The “medium” one would be displayed for viewports larger than 750 pixels, but less than 1000. Finally, for any viewports lower than 750 pixels, the default image, which in this case is the “small” one, would be displayed.

A Note on Double Downloads

One concern about this <picture> syntax that must be addressed is that it actually creates a double-download scenario. While the media queries will load and display the correct image, the default image is also loaded, even though it is not displayed. This is a problem that needs to be addressed for the <picture> element, but for now, this article on “How To Avoid Duplicate Downloads In Responsive Images” provides some helpful ways to sidestep this issue.

Browser Support

The <picture> element currently has somewhat mixed support. It is well supported in Chrome, Firefox, Opera, Safari, and even Microsoft Edge, but it is not supported in Internet Explorer 11 or Opera Mini.  To use this element in your current web design work, you would need to polyfill that support if either of those browsers are important to your visitors base.

Picturefill from the Filament Group is one way you can support responsive images in older browsers. Not only will that polyfill add support for <picture>, but it will also support the srcset and sizes attributes for images.

Edited by Jeremy Girard on 1/15/17