diff --git a/src/patterns/04-components/responsive-image/_responsive-image.scss b/src/patterns/04-components/responsive-image/_responsive-image.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d6c9de4193e6edf931f70be33e17e25885aa93bb
--- /dev/null
+++ b/src/patterns/04-components/responsive-image/_responsive-image.scss
@@ -0,0 +1,7 @@
+picture {
+  img {
+    width: 100%;
+  }
+
+  width: 100%;
+}
diff --git a/src/patterns/04-components/responsive-image/images/president_large.jpg b/src/patterns/04-components/responsive-image/images/president_large.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..edde98fb5c89edab7661b69ce5d7cd1ed88dc3ae
Binary files /dev/null and b/src/patterns/04-components/responsive-image/images/president_large.jpg differ
diff --git a/src/patterns/04-components/responsive-image/images/president_medium.jpg b/src/patterns/04-components/responsive-image/images/president_medium.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..aacb50b0216283b3fe454902c4273eca11704eae
Binary files /dev/null and b/src/patterns/04-components/responsive-image/images/president_medium.jpg differ
diff --git a/src/patterns/04-components/responsive-image/images/president_small.jpg b/src/patterns/04-components/responsive-image/images/president_small.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9fa83aa31540a2ed4aa44cda9f2e0f03691c5c0f
Binary files /dev/null and b/src/patterns/04-components/responsive-image/images/president_small.jpg differ
diff --git a/src/patterns/04-components/responsive-image/images/president_xlarge.jpg b/src/patterns/04-components/responsive-image/images/president_xlarge.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..63021afba8dda6967b5c4dad4527be0f9f89d997
Binary files /dev/null and b/src/patterns/04-components/responsive-image/images/president_xlarge.jpg differ
diff --git a/src/patterns/04-components/responsive-image/images/president_xsmall.jpg b/src/patterns/04-components/responsive-image/images/president_xsmall.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f3bf3a7e1af55ccb832f53d5d0200177707300c0
Binary files /dev/null and b/src/patterns/04-components/responsive-image/images/president_xsmall.jpg differ
diff --git a/src/patterns/04-components/responsive-image/responsive-image.twig b/src/patterns/04-components/responsive-image/responsive-image.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b8dcefa0fb139723fd13eb785c63313f5adcb926
--- /dev/null
+++ b/src/patterns/04-components/responsive-image/responsive-image.twig
@@ -0,0 +1,19 @@
+{% if output_image_tag %}
+  {{ img_element }}
+{% else %}
+  <picture class="uw-picture">
+    {% if sources %}
+      {#
+      Internet Explorer 9 doesn't recognise source elements that are wrapped in
+      picture tags. See http://scottjehl.github.io/picturefill/#ie9
+      #}
+      <!--[if IE 9]><video style="display: none;"><![endif]-->
+      {% for source in sources %}
+        <source srcset="{{ source.srcset|raw }}" media="{{ source.media }}" type="{{ source.type }}" />
+      {% endfor %}
+      <!--[if IE 9]></video><![endif]-->
+    {% endif %}
+    {# The controlling image, with the fallback image in srcset. #}
+    <img class="uw-picture__fallback" src="{{ img_element }}" alt="{{ alt }}">
+  </picture>
+{% endif %}
diff --git a/src/patterns/04-components/responsive-image/responsive-image.yml b/src/patterns/04-components/responsive-image/responsive-image.yml
new file mode 100644
index 0000000000000000000000000000000000000000..91faf6963a2c530689f6066c30bb85c456c7edd4
--- /dev/null
+++ b/src/patterns/04-components/responsive-image/responsive-image.yml
@@ -0,0 +1,18 @@
+sources:
+  - srcset: '/images/president_xlarge.jpg'
+    media: 'all and (min-width: 63.19rem)'
+    type: 'image/jpeg'
+  - srcset: '/images/president_large.jpg'
+    media: 'all and (min-width: 49.81rem)'
+    type: 'image/jpeg'
+  - srcset: '/images/president_medium.jpg'
+    media: 'all and (min-width: 30rem)'
+    type: 'image/jpeg'
+  - srcset: '/images/president_small.jpg'
+    media: 'all and (min-width: 25rem)'
+    type: 'image/jpeg'
+  - srcset: '/images/president_xsmall.jpg'
+    media: 'all and (min-width: 15rem)'
+    type: 'image/jpeg'
+img_element: '/images/president_xlarge.jpg'
+alt: 'Alternative text'