From e997361cb5f4d17abbf5b42b47342bfc6403e061 Mon Sep 17 00:00:00 2001
From: Joseph Wynn <joseph@wildlyinaccurate.com>
Date: Sun, 7 Dec 2014 13:41:05 +0000
Subject: [PATCH] Add example template with <picture> tag

---
 README.md | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b17db5a..8bd45ee 100644
--- a/README.md
+++ b/README.md
@@ -101,7 +101,7 @@ You can use Liquid variables as attributes with the `responsive_image_block` tag
 
 You will need to create a template in order to use the `responsive_image` tag. Below are some sample templates to get you started.
 
-#### Basic image tag with `srcset`
+#### Responsive images with `srcset`
 
 ```twig
 <img src="/{{ path }}"
@@ -111,6 +111,17 @@ You will need to create a template in order to use the `responsive_image` tag. B
      ">
 ```
 
+#### Responsive images with `<picture>`
+
+```twig
+<picture>
+    {% for i in resized %}
+        <source media="(min-width: {{ i.width }}px)" srcset="/{{ i.path }}">
+    {% endfor %}
+    <img src="/{{ path }}">
+</picture>
+```
+
 #### Responsive images using [Imager.js](https://github.com/BBC-News/Imager.js/)
 
 > This template assumes an `output_path_format` of `assets/resized/%{width}/%{basename}`