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> html element
History of <picture>
<picture> is an HTML5 element, which was first suggested by Bruce Lawson, among others1 2 3 4 5 . The general idea being similar to the
<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 Blink7. Yoav then gave a talk about his work at State of the Browser 48, hosted by London Web Standards.
<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
<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
media attribute is false it moves onto the next
<source> element and so forth until it gets to the
If the browser gets all the way to the
<img> element then it replaces the
src attribute with the value of the
If the browser does not support the
srcset attribute then it just uses the value of the
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 manually9 or automatically via a trigger10.
Images Varieties can be:
- min dimension
- square and centered
- Alternative Image
Squiz Matrix Image Variety keyword replacements
In Squiz Matrix, you can use keyword replacements11 to show dynamic information about the assets (e.g. Images, pages, etc).
There are two different syntaxes for using image varieties:
<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
A full list of all the image variety keyword replacements12 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>
srcset attribute can also be used in the
<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".
1 W3C Draft proposal for
2 Bruce Lawson's post: notes on adaptive images yet again
3 Bruce Lawson's post: html5 urgently needs adaptive images mechanism/
4 Bruce Lawson's post: editors draft
6 Indie Go Go crowdfunding page for implementation of
<picture> element in blink
7 Wikipedia entry on Blink web engine
8 Yoav Weiss's talk on Responsive Images at State of the Browser
9 Manually creating Image Varieties
10 Creating image varieties via a trigger in Squiz Matrix
11 Squiz Matrix manuals page on keyword replacements
12 Full list of image variety keyword replacements