Responsive Images

So before I started this blog I read Ethan Marcotte's Responsive Design: Patterns and Principles. It's a fabulous book and I shall write about it in the near future. After reading this the approach I chose for Responsive Images is to use the <picture> element.

<picture> html element

History of <picture>

The <picture> is an HTML5 element, which was first suggested by Bruce Lawson, among others^{1 2 3 4 5} . The general idea being similar to the <video> & <audio> elements, which allowed the user to embed rich media and have a fallback for browsers that do not support this new elements. Browsers are our friends, in the fact that if a browser does not recognise an element it just ignores it and the fallback enclosed in the element is displayed instead.

Once a specification for picture element was agree a crowdfunder was created for Yoav Weiss to implement it in Blink⁷. Yoav then gave a talk about his work at State of the Browser 4⁸, hosted by London Web Standards.

Syntax

<picture>
  <source srcset="images/large.jpg" media="(min-width: 1024px)">
  <source srcset="images/medium.jpg" media="(min-width: 599px)">
  <img srcset="images/small.jpg" src="images/large.jpg" alt="alternative text for image">
</picture> 

How it works

First of all if the browser does not support the <picture> element, it just skips straight to the <img> element.

If the <picture> element is supported then it looks are the first <source> element and if the media attribute is true then it replaces the src attribute of the <img> element with the value of the srcset attribute.

If the media attribute is false it moves onto the next <source> element and so forth until it gets to the <img> element.

If the browser gets all the way to the <img> element then it replaces the src attribute with the value of the srcset attribute.

If the browser does not support the srcset attribute then it just uses the value of the src attribute.

Using <picture> with Squiz Matrix

Squiz Matrix allows you to automatically create different versions/sizes of an image when uploading an image called image varieties.

These varieties can be created manually⁹ or automatically via a trigger¹⁰.

Images Varieties can be:

• Size
  • width
  • height
  • both
  • min dimension
  • square and centered
• Alternative Image

Squiz Matrix Image Variety keyword replacements

In Squiz Matrix, you can use keyword replacements¹¹ to show dynamic information about the assets (e.g. Images, pages, etc).

There are two different syntaxes for using image varieties:

• %image_v_<variety_name>%
• <img src="./?a=xxxx:vy$"> (where xxxx is the asset id of the image and y is the order the image variety was created)

The first will print the <img> element with the image variety's url in the src attribute. The second will print the image variety's url in the src attribute.

A full list of all the image variety keyword replacements¹² can be found on the Squiz matrix manuals site.

Squiz Matrix <picture> element syntax

<picture>
  <source srcset="./?a=xxxx:v1$" media="(min-width: 1024px)">
  <source srcset="./?a=xxxx:v2$" media="(min-width: 599px)">
  <img src="./?a=xxxx:v3$" srcset="./?a=xxxx:v3$" alt="%globals_asset_attribute_alt:xxxx%">
</picture>

Alternative to <picture>

The srcset attribute can also be used in the <img> element.

Syntax

<img srcset="images/large.jpg 1440w,
             images/medium.jpg 720w,
             images/small.jpg 360w"
        src="images/main-medium.jpg"
        alt="alternative text for image" />

How it works

The srcset attribute has an image path followed by a width value if the width value is matched then that image is displayed, if not it moves onto the next image and width.

To find out more on how this works or is implemented I can highly recommend Ethan Marcotte's "A Book Apart - Responsive Design: Patterns and Principles".

Footnotes

¹ W3C Draft proposal for <picture> element

² Bruce Lawson's post: notes on adaptive images yet again

³ Bruce Lawson's post: html5 urgently needs adaptive images mechanism/

⁴ Bruce Lawson's post: editors draft <picture> element/

⁵ Bruce Lawson's post: why we cant do real responsive images with css or javascript/

⁶ Indie Go Go crowdfunding page for implementation of <picture> element in blink

⁷ Wikipedia entry on Blink web engine

⁸ Yoav Weiss's talk on Responsive Images at State of the Browser

⁹ Manually creating Image Varieties

¹⁰ Creating image varieties via a trigger in Squiz Matrix

¹¹ Squiz Matrix manuals page on keyword replacements

¹² Full list of image variety keyword replacements