Picture Element & Srcset

Intro

In order to deal with the issue of images in responsive sites the ‘picture’ element and srcset have very recently been developed into a HTML standard after much specification discussion. An excellent explanation of the problem with how browsers currently deal with images can be found at this link http://ericportis.com/posts/2014/srcset-sizes/

As a very simplified overview: In web development traditionally images were included as fixed width pieces of content, however with the popularity of responsive design they now need to be fluid width. More importantly as responsive design work is viewed on a large variety devices which have varying levels of load speed and/or data costs associated with them, its crucial that a responsive site doesn’t serve up massive images when realistically only smaller ones are needed for the particular screen size. At present browsers can’t know what size is the right size image to download or render as they are missing key variable information from the user and developer. The picture element/srcset works to fill in the blanks for the browser so that regardless of the device/window size/layout the appropriate image size can be queued up.

Browser Support

Browser support for these elements is only just starting to come on board now but having recently gone through intense specification with the web community it has been moved into a HTML standard, and it expected to be in all new releases of the major browsers in the near future. For information on current support check out Can I Use http://caniuse.com/srcset, http://caniuse.com/#feat=picture The elements currently have browser support in the latest nightly version of Firefox and within Chrome Canary. To get it enabled you need to go to chrome://flags in Chrome Canary – you’ll then need to find ‘Enable experimental Web Platform features. Mac, Windows, Linux, Chrome OS, Android’ and make sure it’s enabled.

Interim Solution/Fallback solution

Until full support comes about there’s a pollyfill names PictureFill available from Scott Jehl in the Filament group. http://scottjehl.github.io/picturefill/ and the code itself has an initial src attribute for older browsers that have no support.

So… what do I do now?

There are 2 options in how these latest standards can be implemented: Picture Element or Srcset. Picture element is generally being used more for art direction within implementation (check out the art direction section on this link http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/ ) whereas srcset is used more for just resizing to the appropriate width for the device.

The picture element route

The picture element looks like this:

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
    <source srcset="examples/images/large.jpg" media="(min-width: 800px)">
    <source srcset="examples/images/medium.jpg">
    <!--[if IE 9]></video><![endif]-->
    <img srcset="examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>

A couple of things to note here:

• the srcset attribute can have 1 or more URLS (which can use expanded srcset syntax if desired for resolution switching),and the img element should have a srcset attribute for fallback purposes as well (some browsers like Android 2.3’s won’t see the source elements)
• The first source with a media attribute that matches the user’s context will determine the src of the img element at the end, so you’ll want to present larger options first when using min-width media queries (like in the examples below), and larger options last when using max-width media queries.
• To support IE9, you need to wrap a video element wrapper around the source elements in your picture tag. You do this using conditional comments.

The picturefill examples page does a great job of explaining the element and its options in it’s entirety. http://scottjehl.github.io/picturefill/#examples

The srcset route

<img
  src="image/0017/4373/varieties/350-wide.jpg"
  srcset="image/0017/4373/varieties/350-wide.jpg 350w,
  image/0017/4373/varieties/500-wide.jpg 500w,
  image/0017/4373/varieties/1024-wide.jpg 1024w,
  image/0017/4373/Professor-Farnsworth.jpg 2611w"
  sizes="(min-width: calc(1140px / .7)) 1140px,
  (min-width: 64em) 70vw,
  (min-width: 37.5em) 95vw,
  100vw"
  alt="Professor Farsnworth says good news everyone" />

A couple of things to note here:

• src = this is the default image – any browser that doesn’t support srcset gets this image

• srcset – for each of the images passed through its set out like: [image path] [pixel size of that image],

• sizes – for each of the sizes passed through its set out like: [media query], [length] – length refers to the images width on that layout when the media query evaluates to true. For example at 64em the image might be show up as 70% width of the page (shown as 70vw), but as the screen size gets smaller (37.5em)  it stretches to become 95% of the with of the page to stack the content. There’s scope for calculations here also instead of exact figures.

• trailing 100vw – this is the default size that gets used if no media queries match before it. Any lengths without a media query attached are deemed default.

That’s the quick overview, have a read through the links in the document for more detailed information on the how and why of each.

Recap of useful links