BT

Chrome 38 Supports Art Direction through the picture Element

| by Abel Avram Follow 9 Followers on Oct 16, 2014. Estimated reading time: 2 minutes |

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):

art-direction

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.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT