Chrome 38 Supports Art Direction through the picture Element

Google has added support for the <picture> element in the recently released Chrome 38, enabling developers to specify multiple image sources based on various media queries.

The WebP image format introduced by Google provides up to 25-34% smaller download sizes for images compared to their PNG or JPG correspondents. While this reduces the number of bytes transferred over the network, helping web pages to be uploaded a bit faster, other solutions are needed to solve web responsive design needs.

The srcset attribute of the <img> element can be used to render one of several fixed-size images based on the device-pixel-ratio (DPR) as shown in the following example:

<img src="/images/100-example.jpg"
     srcset="/images/150-example.jpg 1.5x, /images/200-example.jpg 2x"
     alt="" width="100" height="150">

Another option is to display scaled images based on the viewport size:

<img sizes="100vw" 
     srcset="example-200.jpg 200w, example-600.jpg 600w, example-1200.jpg 1200w"
     src="example-200.jpg">

According to the Responsive Images Community Group (RICG), srcset is implemented by Chrome 34+, Safari and Firefox 33+ (with flags). Microsoft is considering the feature for IE. Opera 21+ also has it since it is using Chrome’s Blink engine. The WHATWG group specifies the srcset attribute and its usage.

Sometimes it is desirable for user agents to display an entire picture or portions of it, excluding the less relevant parts of it, depending on the physical size of the device, screen resolution, orientation and others. This approach is called Art Direction, exemplified by the following set of images (courtesy of responsiveimages.org):

While this can be done with some JavaScript, it is not advisable to do so because some user agents download page images before loading and running any scripts, or the page may show an empty spot for the image until the script gets its chance to download it. The recommended solution is to use the picture element which enables developers to specify multiple image sources, combining them with media queries.

The following example specifies different sources for various DPRs:

<picture>
  <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
  <img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
</picture>

The <img> element is used as a fallback for browsers that do not understand <picture>. The HTML specification contains other examples showing how to specify multiple sources for cropped images or different image formats.

This example of art direction can be tested with Chrome 38 which was recently pushed in the stable channel by Google. Too see it in action one needs to resize the browser’s window, forcing the browser to show different images.

Currently, only Chrome 38+ and Opera 25+ fully support <picture>. Firefox 33+ has it but needs to be enabled, and there is not much known about IE or Safari. Developers willing to create responsive images can fallback to Picturefill polyfill for browser not supporting it yet.