If you’ve done any work building responsive websites, you have undoubtedly encountered the challenges that images present for those sites. Delivering images at the largest size at which they will be shown and then using CSS to resize the physical dimensions of those images is a losing solution from a performance perspective. Done correctly, responsive websites require responsive images.
If you simply need to provide different sized versions of the same image for different screen sizes, then using the <img> attributes of srcset and sizes 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 at 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 the 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:
<picture>
<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”>
</picture>
The <picture> element itself wraps the entire piece here. 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 non-supporting browsers will simply show the image as normal and ignore the rest of this markup.
For browsers that do support this new feature, 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.
Browser Support
The <picture> element currently has somewhat mixed support. It is well supported in Chrome, Firefox, and Opera, but it is not supported in Safari or Internet Explorer. To use this element in your current web design work, you would need to polyfill that support.
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.
About the author: Alissa Zucker is an essay writer at the essay writing service Mcessay.com. She is interested in reading classic and psychological books which give her inspiration to write her own articles and short stories.