diff --git a/backstopjs/reference/regression_page_press-release-with-image_0_document_0_phone.png b/backstopjs/reference/regression_page_press-release-with-image_0_document_0_phone.png
index 73504e1cda..42980fdaa7 100644
Binary files a/backstopjs/reference/regression_page_press-release-with-image_0_document_0_phone.png and b/backstopjs/reference/regression_page_press-release-with-image_0_document_0_phone.png differ
diff --git a/changelogs/DP-7363.txt b/changelogs/DP-7363.txt
new file mode 100644
index 0000000000..3539cd76be
--- /dev/null
+++ b/changelogs/DP-7363.txt
@@ -0,0 +1,4 @@
+___DESCRIPTION___
+Added
+Minor
+- DP-7363: Enable srcset on the image pattern and demonstrate usage on Press Release with Image Page
diff --git a/styleguide/source/_patterns/01-atoms/09-media/image.md b/styleguide/source/_patterns/01-atoms/09-media/image.md
index 065f8cfb8e..f853d38a05 100644
--- a/styleguide/source/_patterns/01-atoms/09-media/image.md
+++ b/styleguide/source/_patterns/01-atoms/09-media/image.md
@@ -14,10 +14,14 @@ image {
     type: string / required
   src:
     type: string (url) / required
+  srcset:
+    type: string / optional
+  sizes:
+    type: string / optional
   height:
-    type: string / required
+    type: string / optional
   width:
-    type: string / required
+    type: string / optional
   shape:
     type: string / optional
 }
diff --git a/styleguide/source/_patterns/01-atoms/09-media/image.twig b/styleguide/source/_patterns/01-atoms/09-media/image.twig
index 44934598e0..f899c26035 100644
--- a/styleguide/source/_patterns/01-atoms/09-media/image.twig
+++ b/styleguide/source/_patterns/01-atoms/09-media/image.twig
@@ -1,6 +1,24 @@
-<img
-    class="ma__image{% if image.shape %} {{ image.shape }}{% endif %}"
-    alt="{{ image.alt }}"
-    src="{{ image.src }}"
-    height="{{ image.height }}"
-    width="{{ image.width }}" />
+<img
+  class="ma__image{% if image.shape %} {{ image.shape }}{% endif %}"
+  alt="{{ image.alt }}"
+  src="{{ image.src }}"
+  {% if image.versions %}
+    srcset="
+    {% for version in image.versions %}
+      {% if version.url and version.width %}
+        {{ version.url }} {{ version.width }}{% if not loop.last %},{% endif %}
+      {% endif %}
+    {% endfor %}
+    "
+    {% if image.sizes %}
+      {# Only use sizes if certain breakpoints limit the width of the image to less than approximately full width #}
+      sizes="{{ image.sizes }}"
+    {% endif %}
+  {% endif %}
+  {% if image.height %}
+    height="{{ image.height }}"
+  {% endif %}
+  {% if image.width %}
+    width="{{ image.width }}"
+  {% endif %}
+/>
diff --git a/styleguide/source/_patterns/01-atoms/09-media/image~responsive.json b/styleguide/source/_patterns/01-atoms/09-media/image~responsive.json
new file mode 100644
index 0000000000..37934a0009
--- /dev/null
+++ b/styleguide/source/_patterns/01-atoms/09-media/image~responsive.json
@@ -0,0 +1,20 @@
+{
+  "image": {
+    "alt": "alt text",
+    "src": "../../assets/images/placeholder/800x400.png",
+    "versions": [
+      {
+        "url": "../../assets/images/placeholder/400x200.png",
+        "width": "620w"
+      },
+      {
+        "url": "../../assets/images/placeholder/700x350.png",
+        "width": "780w"
+      },
+      {
+        "url": "../../assets/images/placeholder/800x400.png",
+        "width": "910w"
+      }
+    ]
+  }
+}
diff --git a/styleguide/source/_patterns/05-pages/press-release~with-image.json b/styleguide/source/_patterns/05-pages/press-release~with-image.json
index c1b3a1a66b..ff8852662b 100644
--- a/styleguide/source/_patterns/05-pages/press-release~with-image.json
+++ b/styleguide/source/_patterns/05-pages/press-release~with-image.json
@@ -56,8 +56,25 @@
       "image": { 
         "alt": "alt text", 
         "src": "../../assets/images/placeholder/820x460.png",
-        "height": "",
-        "width": ""
+        "versions": [
+          {
+            "url": "../../assets/images/placeholder/565x282.png",
+            "width": "565w"
+          },
+          {
+            "url": "../../assets/images/placeholder/820x460.png",
+            "width": "820w"
+          },
+          {
+            "url": "../../assets/images/placeholder/835x467.png",
+            "width": "835w"
+          },
+          {
+            "url": "../../assets/images/placeholder/1670x835.png",
+            "width": "1670w"
+          }
+        ],
+        "sizes": "(min-width: 910px) 820px, 100vw"
       },
       "caption": "This is an optional caption that can wrap to multiple lines."
     },
diff --git a/styleguide/source/assets/images/placeholder/1670x835.png b/styleguide/source/assets/images/placeholder/1670x835.png
new file mode 100644
index 0000000000..8b4b05eab2
Binary files /dev/null and b/styleguide/source/assets/images/placeholder/1670x835.png differ
diff --git a/styleguide/source/assets/images/placeholder/400x200.png b/styleguide/source/assets/images/placeholder/400x200.png
new file mode 100644
index 0000000000..e40f733bae
Binary files /dev/null and b/styleguide/source/assets/images/placeholder/400x200.png differ
diff --git a/styleguide/source/assets/images/placeholder/565x282.png b/styleguide/source/assets/images/placeholder/565x282.png
new file mode 100644
index 0000000000..26bdad08a7
Binary files /dev/null and b/styleguide/source/assets/images/placeholder/565x282.png differ
diff --git a/styleguide/source/assets/images/placeholder/700x350.png b/styleguide/source/assets/images/placeholder/700x350.png
new file mode 100644
index 0000000000..f7c84c3f18
Binary files /dev/null and b/styleguide/source/assets/images/placeholder/700x350.png differ
diff --git a/styleguide/source/assets/images/placeholder/835x467.png b/styleguide/source/assets/images/placeholder/835x467.png
new file mode 100644
index 0000000000..316f302ac5
Binary files /dev/null and b/styleguide/source/assets/images/placeholder/835x467.png differ