diff --git a/packages/components/psammead-bulletin/CHANGELOG.md b/packages/components/psammead-bulletin/CHANGELOG.md
index 01c0a18509..482d9c25e7 100644
--- a/packages/components/psammead-bulletin/CHANGELOG.md
+++ b/packages/components/psammead-bulletin/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 5.0.54 | [PR#4606](https://github.com/bbc/psammead/pull/4606) Bump dependencies |
 | 5.0.53 | [PR#4600](https://github.com/bbc/psammead/pull/4600) Fix TalkBack reading nested spans incorrectly |
 | 5.0.52 | [PR#4601](https://github.com/bbc/psammead/pull/4601) Bumps dependencies |
 | 5.0.51 | [PR#4603](https://github.com/bbc/psammead/pull/4603) Bumps dependencies |
diff --git a/packages/components/psammead-bulletin/package.json b/packages/components/psammead-bulletin/package.json
index 556e17c5ae..d508df88ac 100644
--- a/packages/components/psammead-bulletin/package.json
+++ b/packages/components/psammead-bulletin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-bulletin",
-  "version": "5.0.53",
+  "version": "5.0.54",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,
@@ -22,7 +22,7 @@
     "@bbc/gel-foundations": "7.0.0",
     "@bbc/psammead-assets": "3.1.10",
     "@bbc/psammead-live-label": "2.0.32",
-    "@bbc/psammead-story-promo": "8.0.34",
+    "@bbc/psammead-story-promo": "8.0.35",
     "@bbc/psammead-styles": "8.0.1",
     "@bbc/psammead-visually-hidden-text": "2.0.7"
   },
diff --git a/packages/components/psammead-bulletin/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-bulletin/src/__snapshots__/index.test.jsx.snap
index 8b46c0a090..ea43b2b5fe 100644
--- a/packages/components/psammead-bulletin/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-bulletin/src/__snapshots__/index.test.jsx.snap
@@ -49,32 +49,37 @@ exports[`Bulletin should render audio correctly 1`] = `
 }
 
 .emotion-6 {
+  display: block;
+  width: 100%;
+}
+
+.emotion-8 {
   display: inline-block;
   width: 100%;
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-6 {
+  .emotion-8 {
     width: 66.67%;
     padding-right: 1rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
-  .emotion-6 {
+  .emotion-8 {
     width: initial;
     grid-column: 1/span 6;
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-6 {
+    .emotion-8 {
       grid-column: 3/span 4;
       padding: 0;
     }
   }
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222222;
   margin: 0;
   padding: 0.5rem;
@@ -86,28 +91,28 @@ exports[`Bulletin should render audio correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     padding-left: 0;
   }
 }
 
-.emotion-10 {
+.emotion-12 {
   position: static;
   color: #222222;
   -webkit-text-decoration: none;
@@ -115,7 +120,7 @@ exports[`Bulletin should render audio correctly 1`] = `
   overflow-wrap: break-word;
 }
 
-.emotion-10:before {
+.emotion-12:before {
   bottom: 0;
   content: '';
   left: 0;
@@ -127,17 +132,17 @@ exports[`Bulletin should render audio correctly 1`] = `
   z-index: 1;
 }
 
-.emotion-10:hover,
-.emotion-10:focus {
+.emotion-12:hover,
+.emotion-12:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-10:visited {
+.emotion-12:visited {
   color: #6E6E73;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -148,7 +153,7 @@ exports[`Bulletin should render audio correctly 1`] = `
   margin: 0;
 }
 
-.emotion-14 {
+.emotion-16 {
   color: #3F3F42;
   margin: 0;
   padding: 0 0.5rem 1rem;
@@ -160,26 +165,26 @@ exports[`Bulletin should render audio correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-14 {
+  .emotion-16 {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-14 {
+  .emotion-16 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-14 {
+  .emotion-16 {
     padding-left: 0;
   }
 }
 
-.emotion-16 {
+.emotion-18 {
   background-color: #222222;
   border: 0.0625rem solid transparent;
   color: #FFFFFF;
@@ -204,21 +209,21 @@ exports[`Bulletin should render audio correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-16 {
+  .emotion-18 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-16 {
+  .emotion-18 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-16 {
+  .emotion-18 {
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
     display: -ms-inline-flexbox;
@@ -228,7 +233,7 @@ exports[`Bulletin should render audio correctly 1`] = `
   }
 }
 
-.emotion-18 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -240,7 +245,7 @@ exports[`Bulletin should render audio correctly 1`] = `
   padding-right: 0.5rem;
 }
 
-.emotion-18>svg {
+.emotion-20>svg {
   color: #FFFFFF;
   fill: currentColor;
   width: 1.0625rem;
@@ -248,7 +253,7 @@ exports[`Bulletin should render audio correctly 1`] = `
   margin: 0;
 }
 
-.emotion-20 {
+.emotion-22 {
   vertical-align: middle;
   margin: 0 0.25rem;
   color: #222222;
@@ -264,23 +269,33 @@ exports[`Bulletin should render audio correctly 1`] = `
     <div
       class="emotion-2 emotion-3"
     >
-      <img
-        alt="Iron man"
+      <picture
         class="emotion-4 emotion-5"
-        src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
-      />
+      >
+        <source
+          srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 1024w"
+        />
+        <source
+          srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg 1024w"
+        />
+        <img
+          alt="Iron man"
+          class="emotion-6 emotion-7"
+          src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/11897/production/_106613817_999_al_.jpg"
+        />
+      </picture>
     </div>
     <div
-      class="emotion-6 emotion-7"
+      class="emotion-8 emotion-9"
       dir="ltr"
     >
       <h3
-        class="emotion-8 emotion-9"
+        class="emotion-10 emotion-11"
         dir="ltr"
       >
         <a
           aria-labelledby="bulletin-httpsbbccouk"
-          class="emotion-10 emotion-11"
+          class="emotion-12 emotion-13"
           href="https://bbc.co.uk"
         >
           <span
@@ -288,7 +303,7 @@ exports[`Bulletin should render audio correctly 1`] = `
             role="text"
           >
             <span
-              class="emotion-12 emotion-13"
+              class="emotion-14 emotion-15"
             >
               Listen, 
             </span>
@@ -299,23 +314,23 @@ exports[`Bulletin should render audio correctly 1`] = `
         </a>
       </h3>
       <p
-        class="emotion-14 emotion-15"
+        class="emotion-16 emotion-17"
         dir="ltr"
       >
         This is the summary text
       </p>
       <div
         aria-hidden="true"
-        class="emotion-16 emotion-17"
+        class="emotion-18 emotion-19"
         dir="ltr"
       >
         <span
-          class="emotion-18 emotion-19"
+          class="emotion-20 emotion-21"
           dir="ltr"
         >
           <svg
             aria-hidden="true"
-            class="emotion-20 emotion-21"
+            class="emotion-22 emotion-23"
             focusable="false"
             height="12px"
             viewBox="0 0 13 12"
@@ -385,32 +400,37 @@ exports[`Bulletin should render audio correctly with lang prop passed in 1`] = `
 }
 
 .emotion-6 {
+  display: block;
+  width: 100%;
+}
+
+.emotion-8 {
   display: inline-block;
   width: 100%;
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-6 {
+  .emotion-8 {
     width: 66.67%;
     padding-right: 1rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
-  .emotion-6 {
+  .emotion-8 {
     width: initial;
     grid-column: 1/span 6;
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-6 {
+    .emotion-8 {
       grid-column: 3/span 4;
       padding: 0;
     }
   }
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222222;
   margin: 0;
   padding: 0.5rem;
@@ -422,28 +442,28 @@ exports[`Bulletin should render audio correctly with lang prop passed in 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     padding-right: 0;
   }
 }
 
-.emotion-10 {
+.emotion-12 {
   position: static;
   color: #222222;
   -webkit-text-decoration: none;
@@ -451,7 +471,7 @@ exports[`Bulletin should render audio correctly with lang prop passed in 1`] = `
   overflow-wrap: break-word;
 }
 
-.emotion-10:before {
+.emotion-12:before {
   bottom: 0;
   content: '';
   left: 0;
@@ -463,17 +483,17 @@ exports[`Bulletin should render audio correctly with lang prop passed in 1`] = `
   z-index: 1;
 }
 
-.emotion-10:hover,
-.emotion-10:focus {
+.emotion-12:hover,
+.emotion-12:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-10:visited {
+.emotion-12:visited {
   color: #6E6E73;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -484,7 +504,7 @@ exports[`Bulletin should render audio correctly with lang prop passed in 1`] = `
   margin: 0;
 }
 
-.emotion-14 {
+.emotion-16 {
   color: #3F3F42;
   margin: 0;
   padding: 0 0.5rem 1rem;
@@ -496,26 +516,26 @@ exports[`Bulletin should render audio correctly with lang prop passed in 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-14 {
+  .emotion-16 {
     font-size: 0.9375rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-14 {
+  .emotion-16 {
     font-size: 0.875rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-14 {
+  .emotion-16 {
     padding-right: 0;
   }
 }
 
-.emotion-16 {
+.emotion-18 {
   background-color: #222222;
   border: 0.0625rem solid transparent;
   color: #FFFFFF;
@@ -540,21 +560,21 @@ exports[`Bulletin should render audio correctly with lang prop passed in 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-16 {
+  .emotion-18 {
     font-size: 1rem;
     line-height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-16 {
+  .emotion-18 {
     font-size: 1rem;
     line-height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-16 {
+  .emotion-18 {
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
     display: -ms-inline-flexbox;
@@ -564,7 +584,7 @@ exports[`Bulletin should render audio correctly with lang prop passed in 1`] = `
   }
 }
 
-.emotion-18 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -576,7 +596,7 @@ exports[`Bulletin should render audio correctly with lang prop passed in 1`] = `
   padding-left: 0.5rem;
 }
 
-.emotion-18>svg {
+.emotion-20>svg {
   color: #FFFFFF;
   fill: currentColor;
   width: 1.0625rem;
@@ -584,7 +604,7 @@ exports[`Bulletin should render audio correctly with lang prop passed in 1`] = `
   margin: 0;
 }
 
-.emotion-20 {
+.emotion-22 {
   vertical-align: middle;
   margin: 0 0.25rem;
   color: #222222;
@@ -600,23 +620,33 @@ exports[`Bulletin should render audio correctly with lang prop passed in 1`] = `
     <div
       class="emotion-2 emotion-3"
     >
-      <img
-        alt="Iron man"
+      <picture
         class="emotion-4 emotion-5"
-        src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
-      />
+      >
+        <source
+          srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 1024w"
+        />
+        <source
+          srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg 1024w"
+        />
+        <img
+          alt="Iron man"
+          class="emotion-6 emotion-7"
+          src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/11897/production/_106613817_999_al_.jpg"
+        />
+      </picture>
     </div>
     <div
-      class="emotion-6 emotion-7"
+      class="emotion-8 emotion-9"
       dir="rtl"
     >
       <h3
-        class="emotion-8 emotion-9"
+        class="emotion-10 emotion-11"
         dir="rtl"
       >
         <a
           aria-labelledby="bulletin-httpsbbccouk"
-          class="emotion-10 emotion-11"
+          class="emotion-12 emotion-13"
           href="https://bbc.co.uk"
         >
           <span
@@ -624,7 +654,7 @@ exports[`Bulletin should render audio correctly with lang prop passed in 1`] = `
             role="text"
           >
             <span
-              class="emotion-12 emotion-13"
+              class="emotion-14 emotion-15"
               lang="en-GB"
             >
               Listen, 
@@ -636,23 +666,23 @@ exports[`Bulletin should render audio correctly with lang prop passed in 1`] = `
         </a>
       </h3>
       <p
-        class="emotion-14 emotion-15"
+        class="emotion-16 emotion-17"
         dir="rtl"
       >
         This is the summary text
       </p>
       <div
         aria-hidden="true"
-        class="emotion-16 emotion-17"
+        class="emotion-18 emotion-19"
         dir="rtl"
       >
         <span
-          class="emotion-18 emotion-19"
+          class="emotion-20 emotion-21"
           dir="rtl"
         >
           <svg
             aria-hidden="true"
-            class="emotion-20 emotion-21"
+            class="emotion-22 emotion-23"
             focusable="false"
             height="12px"
             viewBox="0 0 13 12"
@@ -722,32 +752,37 @@ exports[`Bulletin should render live audio correctly 1`] = `
 }
 
 .emotion-6 {
+  display: block;
+  width: 100%;
+}
+
+.emotion-8 {
   display: inline-block;
   width: 100%;
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-6 {
+  .emotion-8 {
     width: 66.67%;
     padding-right: 1rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
-  .emotion-6 {
+  .emotion-8 {
     width: initial;
     grid-column: 1/span 6;
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-6 {
+    .emotion-8 {
       grid-column: 3/span 4;
       padding: 0;
     }
   }
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222222;
   margin: 0;
   padding: 0.5rem;
@@ -759,28 +794,28 @@ exports[`Bulletin should render live audio correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     padding-left: 0;
   }
 }
 
-.emotion-10 {
+.emotion-12 {
   position: static;
   color: #222222;
   -webkit-text-decoration: none;
@@ -788,7 +823,7 @@ exports[`Bulletin should render live audio correctly 1`] = `
   overflow-wrap: break-word;
 }
 
-.emotion-10:before {
+.emotion-12:before {
   bottom: 0;
   content: '';
   left: 0;
@@ -800,17 +835,17 @@ exports[`Bulletin should render live audio correctly 1`] = `
   z-index: 1;
 }
 
-.emotion-10:hover,
-.emotion-10:focus {
+.emotion-12:hover,
+.emotion-12:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-10:visited {
+.emotion-12:visited {
   color: #6E6E73;
 }
 
-.emotion-12 {
+.emotion-14 {
   font-family: ReithSans,Helvetica,Arial,sans-serif;
   font-weight: 700;
   font-style: normal;
@@ -819,7 +854,7 @@ exports[`Bulletin should render live audio correctly 1`] = `
   margin-right: 0.5rem;
 }
 
-.emotion-14 {
+.emotion-16 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -830,7 +865,7 @@ exports[`Bulletin should render live audio correctly 1`] = `
   margin: 0;
 }
 
-.emotion-16 {
+.emotion-18 {
   color: #3F3F42;
   margin: 0;
   padding: 0 0.5rem 1rem;
@@ -842,26 +877,26 @@ exports[`Bulletin should render live audio correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-16 {
+  .emotion-18 {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-16 {
+  .emotion-18 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-16 {
+  .emotion-18 {
     padding-left: 0;
   }
 }
 
-.emotion-18 {
+.emotion-20 {
   background-color: #B80000;
   border: 0.0625rem solid transparent;
   color: #FFFFFF;
@@ -886,21 +921,21 @@ exports[`Bulletin should render live audio correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-18 {
+  .emotion-20 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-18 {
+  .emotion-20 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-18 {
+  .emotion-20 {
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
     display: -ms-inline-flexbox;
@@ -910,7 +945,7 @@ exports[`Bulletin should render live audio correctly 1`] = `
   }
 }
 
-.emotion-20 {
+.emotion-22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -922,7 +957,7 @@ exports[`Bulletin should render live audio correctly 1`] = `
   padding-right: 0.5rem;
 }
 
-.emotion-20>svg {
+.emotion-22>svg {
   color: #FFFFFF;
   fill: currentColor;
   width: 1.0625rem;
@@ -930,7 +965,7 @@ exports[`Bulletin should render live audio correctly 1`] = `
   margin: 0;
 }
 
-.emotion-22 {
+.emotion-24 {
   vertical-align: middle;
   margin: 0 0.25rem;
   color: #222222;
@@ -946,23 +981,33 @@ exports[`Bulletin should render live audio correctly 1`] = `
     <div
       class="emotion-2 emotion-3"
     >
-      <img
-        alt="Iron man"
+      <picture
         class="emotion-4 emotion-5"
-        src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
-      />
+      >
+        <source
+          srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 1024w"
+        />
+        <source
+          srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg 1024w"
+        />
+        <img
+          alt="Iron man"
+          class="emotion-6 emotion-7"
+          src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/11897/production/_106613817_999_al_.jpg"
+        />
+      </picture>
     </div>
     <div
-      class="emotion-6 emotion-7"
+      class="emotion-8 emotion-9"
       dir="ltr"
     >
       <h3
-        class="emotion-8 emotion-9"
+        class="emotion-10 emotion-11"
         dir="ltr"
       >
         <a
           aria-labelledby="bulletin-httpsbbccouk"
-          class="emotion-10 emotion-11"
+          class="emotion-12 emotion-13"
           href="https://bbc.co.uk"
         >
           <span
@@ -971,13 +1016,13 @@ exports[`Bulletin should render live audio correctly 1`] = `
           >
             <span
               aria-hidden="true"
-              class="emotion-12 emotion-13"
+              class="emotion-14 emotion-15"
               dir="ltr"
             >
               LIVE 
             </span>
             <span
-              class="emotion-14 emotion-15"
+              class="emotion-16 emotion-17"
               lang="en-GB"
             >
               Listen LIVE, 
@@ -987,23 +1032,23 @@ exports[`Bulletin should render live audio correctly 1`] = `
         </a>
       </h3>
       <p
-        class="emotion-16 emotion-17"
+        class="emotion-18 emotion-19"
         dir="ltr"
       >
         This is the summary text
       </p>
       <div
         aria-hidden="true"
-        class="emotion-18 emotion-19"
+        class="emotion-20 emotion-21"
         dir="ltr"
       >
         <span
-          class="emotion-20 emotion-21"
+          class="emotion-22 emotion-23"
           dir="ltr"
         >
           <svg
             aria-hidden="true"
-            class="emotion-22 emotion-23"
+            class="emotion-24 emotion-25"
             focusable="false"
             height="12px"
             viewBox="0 0 13 12"
@@ -1078,32 +1123,37 @@ exports[`Bulletin should render live video correctly 1`] = `
 }
 
 .emotion-6 {
+  display: block;
+  width: 100%;
+}
+
+.emotion-8 {
   display: inline-block;
   width: 100%;
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-6 {
+  .emotion-8 {
     width: 50%;
     padding-right: 1rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
-  .emotion-6 {
+  .emotion-8 {
     width: initial;
     grid-column: 1/span 6;
   }
 
   @media (min-width: 37.5rem) {
-    .emotion-6 {
+    .emotion-8 {
       grid-column: 4/span 3;
       padding: 0;
     }
   }
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222222;
   margin: 0;
   padding: 0.5rem;
@@ -1115,26 +1165,26 @@ exports[`Bulletin should render live video correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-10 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-10 {
     font-size: 1.25rem;
     line-height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 0 0.5rem 0;
   }
 }
 
-.emotion-10 {
+.emotion-12 {
   position: static;
   color: #222222;
   -webkit-text-decoration: none;
@@ -1142,7 +1192,7 @@ exports[`Bulletin should render live video correctly 1`] = `
   overflow-wrap: break-word;
 }
 
-.emotion-10:before {
+.emotion-12:before {
   bottom: 0;
   content: '';
   left: 0;
@@ -1154,17 +1204,17 @@ exports[`Bulletin should render live video correctly 1`] = `
   z-index: 1;
 }
 
-.emotion-10:hover,
-.emotion-10:focus {
+.emotion-12:hover,
+.emotion-12:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-10:visited {
+.emotion-12:visited {
   color: #6E6E73;
 }
 
-.emotion-12 {
+.emotion-14 {
   font-family: ReithSans,Helvetica,Arial,sans-serif;
   font-weight: 700;
   font-style: normal;
@@ -1173,7 +1223,7 @@ exports[`Bulletin should render live video correctly 1`] = `
   margin-right: 0.5rem;
 }
 
-.emotion-14 {
+.emotion-16 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -1184,7 +1234,7 @@ exports[`Bulletin should render live video correctly 1`] = `
   margin: 0;
 }
 
-.emotion-16 {
+.emotion-18 {
   color: #3F3F42;
   margin: 0;
   padding: 0 0.5rem 1rem;
@@ -1196,27 +1246,27 @@ exports[`Bulletin should render live video correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-16 {
+  .emotion-18 {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-16 {
+  .emotion-18 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-16 {
+  .emotion-18 {
     padding-left: 0;
     padding-right: 0;
   }
 }
 
-.emotion-18 {
+.emotion-20 {
   background-color: #B80000;
   border: 0.0625rem solid transparent;
   color: #FFFFFF;
@@ -1241,21 +1291,21 @@ exports[`Bulletin should render live video correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-18 {
+  .emotion-20 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-18 {
+  .emotion-20 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-18 {
+  .emotion-20 {
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
     display: -ms-inline-flexbox;
@@ -1264,7 +1314,7 @@ exports[`Bulletin should render live video correctly 1`] = `
   }
 }
 
-.emotion-20 {
+.emotion-22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1276,7 +1326,7 @@ exports[`Bulletin should render live video correctly 1`] = `
   padding-right: 0.5rem;
 }
 
-.emotion-20>svg {
+.emotion-22>svg {
   color: #FFFFFF;
   fill: currentColor;
   width: 1.0625rem;
@@ -1284,7 +1334,7 @@ exports[`Bulletin should render live video correctly 1`] = `
   margin: 0;
 }
 
-.emotion-22 {
+.emotion-24 {
   vertical-align: middle;
   margin: 0 0.25rem;
   color: #222222;
@@ -1300,23 +1350,33 @@ exports[`Bulletin should render live video correctly 1`] = `
     <div
       class="emotion-2 emotion-3"
     >
-      <img
-        alt="Iron man"
+      <picture
         class="emotion-4 emotion-5"
-        src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
-      />
+      >
+        <source
+          srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 1024w"
+        />
+        <source
+          srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg 1024w"
+        />
+        <img
+          alt="Iron man"
+          class="emotion-6 emotion-7"
+          src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/11897/production/_106613817_999_al_.jpg"
+        />
+      </picture>
     </div>
     <div
-      class="emotion-6 emotion-7"
+      class="emotion-8 emotion-9"
       dir="ltr"
     >
       <h3
-        class="emotion-8 emotion-9"
+        class="emotion-10 emotion-11"
         dir="ltr"
       >
         <a
           aria-labelledby="bulletin-httpsbbccouk"
-          class="emotion-10 emotion-11"
+          class="emotion-12 emotion-13"
           href="https://bbc.co.uk"
         >
           <span
@@ -1325,13 +1385,13 @@ exports[`Bulletin should render live video correctly 1`] = `
           >
             <span
               aria-hidden="true"
-              class="emotion-12 emotion-13"
+              class="emotion-14 emotion-15"
               dir="ltr"
             >
               LIVE 
             </span>
             <span
-              class="emotion-14 emotion-15"
+              class="emotion-16 emotion-17"
               lang="en-GB"
             >
               Watch LIVE, 
@@ -1341,23 +1401,23 @@ exports[`Bulletin should render live video correctly 1`] = `
         </a>
       </h3>
       <p
-        class="emotion-16 emotion-17"
+        class="emotion-18 emotion-19"
         dir="ltr"
       >
         This is the summary text
       </p>
       <div
         aria-hidden="true"
-        class="emotion-18 emotion-19"
+        class="emotion-20 emotion-21"
         dir="ltr"
       >
         <span
-          class="emotion-20 emotion-21"
+          class="emotion-22 emotion-23"
           dir="ltr"
         >
           <svg
             aria-hidden="true"
-            class="emotion-22 emotion-23"
+            class="emotion-24 emotion-25"
             focusable="false"
             height="12px"
             viewBox="0 0 32 32"
@@ -1424,32 +1484,37 @@ exports[`Bulletin should render radio bulletin without ariaId 1`] = `
 }
 
 .emotion-6 {
+  display: block;
+  width: 100%;
+}
+
+.emotion-8 {
   display: inline-block;
   width: 100%;
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-6 {
+  .emotion-8 {
     width: 66.67%;
     padding-right: 1rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
-  .emotion-6 {
+  .emotion-8 {
     width: initial;
     grid-column: 1/span 6;
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-6 {
+    .emotion-8 {
       grid-column: 3/span 4;
       padding: 0;
     }
   }
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222222;
   margin: 0;
   padding: 0.5rem;
@@ -1461,28 +1526,28 @@ exports[`Bulletin should render radio bulletin without ariaId 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     padding-left: 0;
   }
 }
 
-.emotion-10 {
+.emotion-12 {
   position: static;
   color: #222222;
   -webkit-text-decoration: none;
@@ -1490,7 +1555,7 @@ exports[`Bulletin should render radio bulletin without ariaId 1`] = `
   overflow-wrap: break-word;
 }
 
-.emotion-10:before {
+.emotion-12:before {
   bottom: 0;
   content: '';
   left: 0;
@@ -1502,17 +1567,17 @@ exports[`Bulletin should render radio bulletin without ariaId 1`] = `
   z-index: 1;
 }
 
-.emotion-10:hover,
-.emotion-10:focus {
+.emotion-12:hover,
+.emotion-12:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-10:visited {
+.emotion-12:visited {
   color: #6E6E73;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -1523,7 +1588,7 @@ exports[`Bulletin should render radio bulletin without ariaId 1`] = `
   margin: 0;
 }
 
-.emotion-14 {
+.emotion-16 {
   color: #3F3F42;
   margin: 0;
   padding: 0 0.5rem 1rem;
@@ -1535,26 +1600,26 @@ exports[`Bulletin should render radio bulletin without ariaId 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-14 {
+  .emotion-16 {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-14 {
+  .emotion-16 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-14 {
+  .emotion-16 {
     padding-left: 0;
   }
 }
 
-.emotion-16 {
+.emotion-18 {
   background-color: #222222;
   border: 0.0625rem solid transparent;
   color: #FFFFFF;
@@ -1579,21 +1644,21 @@ exports[`Bulletin should render radio bulletin without ariaId 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-16 {
+  .emotion-18 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-16 {
+  .emotion-18 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-16 {
+  .emotion-18 {
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
     display: -ms-inline-flexbox;
@@ -1603,7 +1668,7 @@ exports[`Bulletin should render radio bulletin without ariaId 1`] = `
   }
 }
 
-.emotion-18 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1615,7 +1680,7 @@ exports[`Bulletin should render radio bulletin without ariaId 1`] = `
   padding-right: 0.5rem;
 }
 
-.emotion-18>svg {
+.emotion-20>svg {
   color: #FFFFFF;
   fill: currentColor;
   width: 1.0625rem;
@@ -1623,7 +1688,7 @@ exports[`Bulletin should render radio bulletin without ariaId 1`] = `
   margin: 0;
 }
 
-.emotion-20 {
+.emotion-22 {
   vertical-align: middle;
   margin: 0 0.25rem;
   color: #222222;
@@ -1639,23 +1704,33 @@ exports[`Bulletin should render radio bulletin without ariaId 1`] = `
     <div
       class="emotion-2 emotion-3"
     >
-      <img
-        alt="Iron man"
+      <picture
         class="emotion-4 emotion-5"
-        src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
-      />
+      >
+        <source
+          srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 1024w"
+        />
+        <source
+          srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg 1024w"
+        />
+        <img
+          alt="Iron man"
+          class="emotion-6 emotion-7"
+          src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/11897/production/_106613817_999_al_.jpg"
+        />
+      </picture>
     </div>
     <div
-      class="emotion-6 emotion-7"
+      class="emotion-8 emotion-9"
       dir="ltr"
     >
       <h3
-        class="emotion-8 emotion-9"
+        class="emotion-10 emotion-11"
         dir="ltr"
       >
         <a
           aria-labelledby="bulletin-null"
-          class="emotion-10 emotion-11"
+          class="emotion-12 emotion-13"
           href="https://bbc.co.uk"
         >
           <span
@@ -1663,7 +1738,7 @@ exports[`Bulletin should render radio bulletin without ariaId 1`] = `
             role="text"
           >
             <span
-              class="emotion-12 emotion-13"
+              class="emotion-14 emotion-15"
             >
               Listen, 
             </span>
@@ -1674,23 +1749,23 @@ exports[`Bulletin should render radio bulletin without ariaId 1`] = `
         </a>
       </h3>
       <p
-        class="emotion-14 emotion-15"
+        class="emotion-16 emotion-17"
         dir="ltr"
       >
         This is the summary text
       </p>
       <div
         aria-hidden="true"
-        class="emotion-16 emotion-17"
+        class="emotion-18 emotion-19"
         dir="ltr"
       >
         <span
-          class="emotion-18 emotion-19"
+          class="emotion-20 emotion-21"
           dir="ltr"
         >
           <svg
             aria-hidden="true"
-            class="emotion-20 emotion-21"
+            class="emotion-22 emotion-23"
             focusable="false"
             height="12px"
             viewBox="0 0 13 12"
@@ -1760,32 +1835,37 @@ exports[`Bulletin should render radio bulletin without summary correctly 1`] = `
 }
 
 .emotion-6 {
+  display: block;
+  width: 100%;
+}
+
+.emotion-8 {
   display: inline-block;
   width: 100%;
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-6 {
+  .emotion-8 {
     width: 66.67%;
     padding-right: 1rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
-  .emotion-6 {
+  .emotion-8 {
     width: initial;
     grid-column: 1/span 6;
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-6 {
+    .emotion-8 {
       grid-column: 3/span 4;
       padding: 0;
     }
   }
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222222;
   margin: 0;
   padding: 0.5rem;
@@ -1797,28 +1877,28 @@ exports[`Bulletin should render radio bulletin without summary correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     padding-left: 0;
   }
 }
 
-.emotion-10 {
+.emotion-12 {
   position: static;
   color: #222222;
   -webkit-text-decoration: none;
@@ -1826,7 +1906,7 @@ exports[`Bulletin should render radio bulletin without summary correctly 1`] = `
   overflow-wrap: break-word;
 }
 
-.emotion-10:before {
+.emotion-12:before {
   bottom: 0;
   content: '';
   left: 0;
@@ -1838,17 +1918,17 @@ exports[`Bulletin should render radio bulletin without summary correctly 1`] = `
   z-index: 1;
 }
 
-.emotion-10:hover,
-.emotion-10:focus {
+.emotion-12:hover,
+.emotion-12:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-10:visited {
+.emotion-12:visited {
   color: #6E6E73;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -1859,7 +1939,7 @@ exports[`Bulletin should render radio bulletin without summary correctly 1`] = `
   margin: 0;
 }
 
-.emotion-14 {
+.emotion-16 {
   background-color: #222222;
   border: 0.0625rem solid transparent;
   color: #FFFFFF;
@@ -1884,21 +1964,21 @@ exports[`Bulletin should render radio bulletin without summary correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-14 {
+  .emotion-16 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-14 {
+  .emotion-16 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-14 {
+  .emotion-16 {
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
     display: -ms-inline-flexbox;
@@ -1908,7 +1988,7 @@ exports[`Bulletin should render radio bulletin without summary correctly 1`] = `
   }
 }
 
-.emotion-16 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1920,7 +2000,7 @@ exports[`Bulletin should render radio bulletin without summary correctly 1`] = `
   padding-right: 0.5rem;
 }
 
-.emotion-16>svg {
+.emotion-18>svg {
   color: #FFFFFF;
   fill: currentColor;
   width: 1.0625rem;
@@ -1928,7 +2008,7 @@ exports[`Bulletin should render radio bulletin without summary correctly 1`] = `
   margin: 0;
 }
 
-.emotion-18 {
+.emotion-20 {
   vertical-align: middle;
   margin: 0 0.25rem;
   color: #222222;
@@ -1944,23 +2024,33 @@ exports[`Bulletin should render radio bulletin without summary correctly 1`] = `
     <div
       class="emotion-2 emotion-3"
     >
-      <img
-        alt="Iron man"
+      <picture
         class="emotion-4 emotion-5"
-        src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
-      />
+      >
+        <source
+          srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 1024w"
+        />
+        <source
+          srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg 1024w"
+        />
+        <img
+          alt="Iron man"
+          class="emotion-6 emotion-7"
+          src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/11897/production/_106613817_999_al_.jpg"
+        />
+      </picture>
     </div>
     <div
-      class="emotion-6 emotion-7"
+      class="emotion-8 emotion-9"
       dir="ltr"
     >
       <h3
-        class="emotion-8 emotion-9"
+        class="emotion-10 emotion-11"
         dir="ltr"
       >
         <a
           aria-labelledby="bulletin-httpsbbccouk"
-          class="emotion-10 emotion-11"
+          class="emotion-12 emotion-13"
           href="https://bbc.co.uk"
         >
           <span
@@ -1968,7 +2058,7 @@ exports[`Bulletin should render radio bulletin without summary correctly 1`] = `
             role="text"
           >
             <span
-              class="emotion-12 emotion-13"
+              class="emotion-14 emotion-15"
             >
               Listen, 
             </span>
@@ -1980,16 +2070,16 @@ exports[`Bulletin should render radio bulletin without summary correctly 1`] = `
       </h3>
       <div
         aria-hidden="true"
-        class="emotion-14 emotion-15"
+        class="emotion-16 emotion-17"
         dir="ltr"
       >
         <span
-          class="emotion-16 emotion-17"
+          class="emotion-18 emotion-19"
           dir="ltr"
         >
           <svg
             aria-hidden="true"
-            class="emotion-18 emotion-19"
+            class="emotion-20 emotion-21"
             focusable="false"
             height="12px"
             viewBox="0 0 13 12"
@@ -2064,32 +2154,37 @@ exports[`Bulletin should render video correctly 1`] = `
 }
 
 .emotion-6 {
+  display: block;
+  width: 100%;
+}
+
+.emotion-8 {
   display: inline-block;
   width: 100%;
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-6 {
+  .emotion-8 {
     width: 50%;
     padding-right: 1rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
-  .emotion-6 {
+  .emotion-8 {
     width: initial;
     grid-column: 1/span 6;
   }
 
   @media (min-width: 37.5rem) {
-    .emotion-6 {
+    .emotion-8 {
       grid-column: 4/span 3;
       padding: 0;
     }
   }
 }
 
-.emotion-8 {
+.emotion-10 {
   color: #222222;
   margin: 0;
   padding: 0.5rem;
@@ -2101,26 +2196,26 @@ exports[`Bulletin should render video correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-10 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-10 {
     font-size: 1.25rem;
     line-height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 0 0.5rem 0;
   }
 }
 
-.emotion-10 {
+.emotion-12 {
   position: static;
   color: #222222;
   -webkit-text-decoration: none;
@@ -2128,7 +2223,7 @@ exports[`Bulletin should render video correctly 1`] = `
   overflow-wrap: break-word;
 }
 
-.emotion-10:before {
+.emotion-12:before {
   bottom: 0;
   content: '';
   left: 0;
@@ -2140,17 +2235,17 @@ exports[`Bulletin should render video correctly 1`] = `
   z-index: 1;
 }
 
-.emotion-10:hover,
-.emotion-10:focus {
+.emotion-12:hover,
+.emotion-12:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-10:visited {
+.emotion-12:visited {
   color: #6E6E73;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -2161,7 +2256,7 @@ exports[`Bulletin should render video correctly 1`] = `
   margin: 0;
 }
 
-.emotion-14 {
+.emotion-16 {
   color: #3F3F42;
   margin: 0;
   padding: 0 0.5rem 1rem;
@@ -2173,27 +2268,27 @@ exports[`Bulletin should render video correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-14 {
+  .emotion-16 {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-14 {
+  .emotion-16 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-14 {
+  .emotion-16 {
     padding-left: 0;
     padding-right: 0;
   }
 }
 
-.emotion-16 {
+.emotion-18 {
   background-color: #222222;
   border: 0.0625rem solid transparent;
   color: #FFFFFF;
@@ -2218,21 +2313,21 @@ exports[`Bulletin should render video correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-16 {
+  .emotion-18 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-16 {
+  .emotion-18 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-16 {
+  .emotion-18 {
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
     display: -ms-inline-flexbox;
@@ -2241,7 +2336,7 @@ exports[`Bulletin should render video correctly 1`] = `
   }
 }
 
-.emotion-18 {
+.emotion-20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2253,7 +2348,7 @@ exports[`Bulletin should render video correctly 1`] = `
   padding-right: 0.5rem;
 }
 
-.emotion-18>svg {
+.emotion-20>svg {
   color: #FFFFFF;
   fill: currentColor;
   width: 1.0625rem;
@@ -2261,7 +2356,7 @@ exports[`Bulletin should render video correctly 1`] = `
   margin: 0;
 }
 
-.emotion-20 {
+.emotion-22 {
   vertical-align: middle;
   margin: 0 0.25rem;
   color: #222222;
@@ -2277,23 +2372,33 @@ exports[`Bulletin should render video correctly 1`] = `
     <div
       class="emotion-2 emotion-3"
     >
-      <img
-        alt="Iron man"
+      <picture
         class="emotion-4 emotion-5"
-        src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
-      />
+      >
+        <source
+          srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 1024w"
+        />
+        <source
+          srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg 1024w"
+        />
+        <img
+          alt="Iron man"
+          class="emotion-6 emotion-7"
+          src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/11897/production/_106613817_999_al_.jpg"
+        />
+      </picture>
     </div>
     <div
-      class="emotion-6 emotion-7"
+      class="emotion-8 emotion-9"
       dir="ltr"
     >
       <h3
-        class="emotion-8 emotion-9"
+        class="emotion-10 emotion-11"
         dir="ltr"
       >
         <a
           aria-labelledby="bulletin-httpsbbccouk"
-          class="emotion-10 emotion-11"
+          class="emotion-12 emotion-13"
           href="https://bbc.co.uk"
         >
           <span
@@ -2301,7 +2406,7 @@ exports[`Bulletin should render video correctly 1`] = `
             role="text"
           >
             <span
-              class="emotion-12 emotion-13"
+              class="emotion-14 emotion-15"
             >
               Watch, 
             </span>
@@ -2312,23 +2417,23 @@ exports[`Bulletin should render video correctly 1`] = `
         </a>
       </h3>
       <p
-        class="emotion-14 emotion-15"
+        class="emotion-16 emotion-17"
         dir="ltr"
       >
         This is the summary text
       </p>
       <div
         aria-hidden="true"
-        class="emotion-16 emotion-17"
+        class="emotion-18 emotion-19"
         dir="ltr"
       >
         <span
-          class="emotion-18 emotion-19"
+          class="emotion-20 emotion-21"
           dir="ltr"
         >
           <svg
             aria-hidden="true"
-            class="emotion-20 emotion-21"
+            class="emotion-22 emotion-23"
             focusable="false"
             height="12px"
             viewBox="0 0 32 32"
diff --git a/packages/components/psammead-bulletin/src/index.stories.jsx b/packages/components/psammead-bulletin/src/index.stories.jsx
index ec24e66654..ac7abf0e25 100644
--- a/packages/components/psammead-bulletin/src/index.stories.jsx
+++ b/packages/components/psammead-bulletin/src/index.stories.jsx
@@ -21,11 +21,20 @@ const BulletinComponent = ({
   const withSummary = boolean('With summary', true);
   const ctaText = mediaType === 'audio' ? 'Listen' : 'Watch';
   const offScreenText = isLive ? `${ctaText} Live` : ctaText;
+  const imageSizes = [300, 450, 600, 1024];
+  const imageSrc =
+    'https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/11897/production/_106613817_999_al_.jpg';
 
   const image = (
     <Image
-      src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
+      src={imageSrc.replace('[WIDTH]', 660)}
       alt="Iron man"
+      srcset={imageSizes
+        .map(size => `${imageSrc.replace('[WIDTH]', size)}.webp ${size}w`)
+        .join(', ')}
+      fallbackSrcset={imageSizes
+        .map(size => `${imageSrc.replace('[WIDTH]', size)} ${size}w`)
+        .join(', ')}
     />
   );
 
diff --git a/packages/components/psammead-bulletin/src/index.test.jsx b/packages/components/psammead-bulletin/src/index.test.jsx
index 178d3529b9..f5976ffead 100644
--- a/packages/components/psammead-bulletin/src/index.test.jsx
+++ b/packages/components/psammead-bulletin/src/index.test.jsx
@@ -19,14 +19,23 @@ const BulletinComponent = ({
   const summaryText = 'This is the summary text';
   const headlineText = 'This is the headline';
   const ctaLink = 'https://bbc.co.uk';
+  const imageSizes = [300, 450, 600, 1024];
+  const imageSrc =
+    'https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/11897/production/_106613817_999_al_.jpg';
 
   const playCtaText = isLive ? `${ctaText} Live` : ctaText;
   const offScreenText = isLive ? `${ctaText} LIVE` : ctaText;
 
   const image = (
     <Image
-      src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
+      src={imageSrc}
       alt="Iron man"
+      srcset={imageSizes
+        .map(size => `${imageSrc.replace('[WIDTH]', size)}.webp ${size}w`)
+        .join(', ')}
+      fallbackSrcset={imageSizes
+        .map(size => `${imageSrc.replace('[WIDTH]', size)} ${size}w`)
+        .join(', ')}
     />
   );
   return (
diff --git a/packages/components/psammead-grid/CHANGELOG.md b/packages/components/psammead-grid/CHANGELOG.md
index b97834c0c9..4aeb344828 100644
--- a/packages/components/psammead-grid/CHANGELOG.md
+++ b/packages/components/psammead-grid/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 3.1.12 | [PR#4606](https://github.com/bbc/psammead/pull/4606) Bump dependencies |
 | 3.1.11 | [PR#4574](https://github.com/bbc/psammead/pull/4574) Bumps psammead-styles |
 | 3.1.10 | [PR#4568](https://github.com/bbc/psammead/pull/4568) Bump dependencies |
 | 3.1.9 | [PR#4565](https://github.com/bbc/psammead/pull/4565) Bump from psammead-styles |
diff --git a/packages/components/psammead-grid/package.json b/packages/components/psammead-grid/package.json
index 68f7ed35bc..f31b4f8687 100644
--- a/packages/components/psammead-grid/package.json
+++ b/packages/components/psammead-grid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-grid",
-  "version": "3.1.11",
+  "version": "3.1.12",
   "description": "Grid component",
   "main": "dist/index.js",
   "module": "esm/index.js",
diff --git a/packages/components/psammead-grid/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-grid/src/__snapshots__/index.test.jsx.snap
index 839c1e57a1..dc5bb87730 100644
--- a/packages/components/psammead-grid/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-grid/src/__snapshots__/index.test.jsx.snap
@@ -1730,8 +1730,13 @@ exports[`Grid component should render Grid with enableGelGutters & margins on on
   visibility: visible;
 }
 
+.emotion-8 {
+  display: block;
+  width: 100%;
+}
+
 @media (max-width: 14.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 0.5rem;
     width: calc(100%);
     display: inline-block;
@@ -1740,7 +1745,7 @@ exports[`Grid component should render Grid with enableGelGutters & margins on on
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 0.5rem;
     width: calc(100%);
     display: inline-block;
@@ -1749,7 +1754,7 @@ exports[`Grid component should render Grid with enableGelGutters & margins on on
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 1rem;
     width: calc(100%);
     display: inline-block;
@@ -1758,7 +1763,7 @@ exports[`Grid component should render Grid with enableGelGutters & margins on on
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 1rem;
     width: calc(100%);
     display: inline-block;
@@ -1767,7 +1772,7 @@ exports[`Grid component should render Grid with enableGelGutters & margins on on
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     width: calc(75%);
     display: inline-block;
     vertical-align: top;
@@ -1775,7 +1780,7 @@ exports[`Grid component should render Grid with enableGelGutters & margins on on
 }
 
 @media (min-width: 80rem) {
-  .emotion-8 {
+  .emotion-10 {
     width: calc(75%);
     display: inline-block;
     vertical-align: top;
@@ -1783,14 +1788,14 @@ exports[`Grid component should render Grid with enableGelGutters & margins on on
 }
 
 @supports (display: grid) {
-  .emotion-8 {
+  .emotion-10 {
     display: block;
     width: initial;
     margin: 0;
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -1798,7 +1803,7 @@ exports[`Grid component should render Grid with enableGelGutters & margins on on
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -1806,7 +1811,7 @@ exports[`Grid component should render Grid with enableGelGutters & margins on on
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -1814,7 +1819,7 @@ exports[`Grid component should render Grid with enableGelGutters & margins on on
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -1822,14 +1827,14 @@ exports[`Grid component should render Grid with enableGelGutters & margins on on
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
     }
   }
 
   @media (min-width: 80rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
     }
@@ -1848,16 +1853,26 @@ exports[`Grid component should render Grid with enableGelGutters & margins on on
       <div
         class="emotion-4 emotion-5"
       >
-        <img
-          alt="Robert Downey Junior in Iron Man"
+        <picture
           class="emotion-6 emotion-7"
-          src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
-          width="640"
-        />
+        >
+          <source
+            srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 1024w"
+          />
+          <source
+            srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg 1024w"
+          />
+          <img
+            alt="Robert Downey Junior in Iron Man"
+            class="emotion-8 emotion-9"
+            src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
+            width="640"
+          />
+        </picture>
       </div>
     </div>
     <div
-      class="emotion-8 emotion-1"
+      class="emotion-10 emotion-1"
       dir="ltr"
     >
       <p>
diff --git a/packages/components/psammead-grid/src/index.stories.jsx b/packages/components/psammead-grid/src/index.stories.jsx
index 2b40eb0cc3..0a5466c70d 100644
--- a/packages/components/psammead-grid/src/index.stories.jsx
+++ b/packages/components/psammead-grid/src/index.stories.jsx
@@ -5,7 +5,6 @@ import {
   withServicesKnob,
   buildRTLSubstories,
 } from '@bbc/psammead-storybook-helpers';
-import Image from '@bbc/psammead-image';
 import StoryPromo, { Headline, Summary, Link } from '@bbc/psammead-story-promo';
 import Grid from '.';
 import {
@@ -1275,17 +1274,9 @@ storiesOf(STORY_KIND, module)
           </>
         );
 
-        const Img = (
-          <Image
-            alt="Robert Downey Junior in Iron Man"
-            src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
-            width="640"
-          />
-        );
-
         return (
           <StoryPromo
-            image={Img}
+            image={<ExampleImage />}
             info={Info}
             promoType={promoType}
             dir={dir}
@@ -1473,11 +1464,7 @@ storiesOf(STORY_KIND, module)
           group5: 6,
         }}
       >
-        <Image
-          alt="Robert Downey Junior in Iron Man"
-          src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
-          width="640"
-        />
+        <ExampleImage />
       </Grid>
       <Grid
         dir={dir}
@@ -1532,11 +1519,7 @@ storiesOf(STORY_KIND, module)
             group5: 6,
           }}
         >
-          <Image
-            alt="Robert Downey Junior in Iron Man"
-            src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
-            width="640"
-          />
+          <ExampleImage />
         </Grid>
         <Grid
           dir={dir}
@@ -1590,11 +1573,7 @@ storiesOf(STORY_KIND, module)
           group5: 6,
         }}
       >
-        <Image
-          alt="Robert Downey Junior in Iron Man"
-          src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
-          width="640"
-        />
+        <ExampleImage />
       </Grid>
       <Grid
         dir={dir}
@@ -1608,11 +1587,7 @@ storiesOf(STORY_KIND, module)
           group5: 2,
         }}
       >
-        <Image
-          alt="Robert Downey Junior in Iron Man"
-          src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
-          width="640"
-        />
+        <ExampleImage />
       </Grid>
       <Grid
         dir={dir}
@@ -1626,11 +1601,7 @@ storiesOf(STORY_KIND, module)
           group5: 2,
         }}
       >
-        <Image
-          alt="Robert Downey Junior in Iron Man"
-          src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
-          width="640"
-        />
+        <ExampleImage />
       </Grid>
     </Grid>
   ));
diff --git a/packages/components/psammead-grid/src/testHelpers.jsx b/packages/components/psammead-grid/src/testHelpers.jsx
index b4e5c283c7..d67aba975a 100644
--- a/packages/components/psammead-grid/src/testHelpers.jsx
+++ b/packages/components/psammead-grid/src/testHelpers.jsx
@@ -29,15 +29,27 @@ const ImageSpacing = styled.div`
   padding: 0 0 ${GEL_SPACING} 0;
 `;
 
-export const ExampleImage = () => (
-  <ImageSpacing>
-    <Image
-      alt="Robert Downey Junior in Iron Man"
-      src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
-      width="640"
-    />
-  </ImageSpacing>
-);
+export const ExampleImage = () => {
+  const imageSizes = [300, 450, 600, 1024];
+  const imageSrc =
+    'https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/11897/production/_106613817_999_al_.jpg';
+
+  return (
+    <ImageSpacing>
+      <Image
+        alt="Robert Downey Junior in Iron Man"
+        src={imageSrc.replace('[WIDTH]', 660)}
+        width="640"
+        srcset={imageSizes
+          .map(size => `${imageSrc.replace('[WIDTH]', size)}.webp ${size}w`)
+          .join(', ')}
+        fallbackSrcset={imageSizes
+          .map(size => `${imageSrc.replace('[WIDTH]', size)} ${size}w`)
+          .join(', ')}
+      />
+    </ImageSpacing>
+  );
+};
 
 export const ExampleMediaIndicator = styled(MediaIndicator)``;
 
diff --git a/packages/components/psammead-image/CHANGELOG.md b/packages/components/psammead-image/CHANGELOG.md
index cff00c0e01..8755973a1b 100644
--- a/packages/components/psammead-image/CHANGELOG.md
+++ b/packages/components/psammead-image/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 3.0.0 | [PR#4606](https://github.com/bbc/psammead/pull/4606) Add support for WebP |
 | 2.0.8 | [PR#4486](https://github.com/bbc/psammead/pull/4486) upgrade minor/patch dependencies |
 | 2.0.7 | [PR#4420](https://github.com/bbc/psammead/pull/4420) bumps 3rd-party dependencies |
 | 2.0.6 | [PR#4368](https://github.com/bbc/psammead/pull/4368) use Yarn Workspaces |
diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md
index e095f6048a..80b73775da 100644
--- a/packages/components/psammead-image/README.md
+++ b/packages/components/psammead-image/README.md
@@ -56,6 +56,7 @@ const WrappingContainer = ({ alt, src, height, width, sizes }) => (
 ## Props
 
 ### Img
+
 <!-- prettier-ignore -->
 | Prop | Type | Required | Default | Example |
 |:-----|:-----|:---------|:--------|:--------|
@@ -63,7 +64,8 @@ const WrappingContainer = ({ alt, src, height, width, sizes }) => (
 | `height` | number/string | No  | null  | 450 |
 | `sizes`  | string        | No  | null  | "100vw" |
 | `src`    | string        | Yes | -     | "https://bbc.com/300/cat.jpg" |
-| `srcset` | string        | No  | null  | "https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w" |
+| `srcset` | string        | No  | null  | "https://bbc.com/300/cat.jpg.webp 300w, https://bbc.com/450/cat.jpg.webp 450w, https://bbc.com/600/cat.jpg.webp 600w" |
+| `fallbackSrcset` | string        | No  | null  | "https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w" |
 | `width`  | number/string | No  | null  | 600 |
 | `fade`   |  boolean      | No  | false | true |
 
@@ -80,6 +82,7 @@ The `sizes` prop is optional since some projects might not want to use the sizes
 The `fade` prop is optional and set to `false` by default. It's been used to apply a fade-in animation effect on the `Img` component.
 
 ### AmpImg
+
 <!-- prettier-ignore -->
 | Prop | Type | Required | Default | Example |
 |:-----|:-----|:---------|:--------|:--------|
@@ -89,7 +92,8 @@ The `fade` prop is optional and set to `false` by default. It's been used to app
 | `layout`      | string        | Yes | -    | "responsive" |
 | `sizes`       | string        | No  | null | "100vw" |
 | `src`         | string        | Yes | -    | "https://bbc.com/300/cat.jpg" |
-| `srcset`      | string        | No  | null | "https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w" |
+| `srcset`      | string        | No  | null | "https://bbc.com/300/cat.jpg.webp 300w, https://bbc.com/450/cat.jpg.webp 450w, https://bbc.com/600/cat.jpg.webp 600w" |
+| `fallbackSrcset` | string        | No  | null  | "https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w" |
 | `width`       | number/string | Yes | -    | 600 |
 
 The `attribution` prop is available to pass in strings to include the image source. [For further details, please refer to the `amp-img` attribute docs](https://www.ampproject.org/docs/reference/components/amp-img#attributes).
diff --git a/packages/components/psammead-image/package.json b/packages/components/psammead-image/package.json
index 7061a46245..c89db06d87 100644
--- a/packages/components/psammead-image/package.json
+++ b/packages/components/psammead-image/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-image",
-  "version": "2.0.8",
+  "version": "3.0.0",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,
diff --git a/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
index 8f5738fdfc..bbfd51229e 100644
--- a/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
+++ b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
@@ -14,7 +14,7 @@ exports[`Image - AmpImg should render image with custom dimensions correctly 1`]
 </div>
 `;
 
-exports[`Image - AmpImg should render image with srcset correctly 1`] = `
+exports[`Image - AmpImg should render image with only srcset correctly 1`] = `
 <div>
   <amp-img
     alt="Student sitting an exam"
@@ -23,12 +23,39 @@ exports[`Image - AmpImg should render image with srcset correctly 1`] = `
     layout="responsive"
     sizes="100vw"
     src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
-    srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
+    srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
     width="1024"
   />
 </div>
 `;
 
+exports[`Image - AmpImg should render image with srcset and fallbackSrcset correctly 1`] = `
+<div>
+  <amp-img
+    alt="Student sitting an exam"
+    attribution=""
+    height="576"
+    layout="responsive"
+    sizes="100vw"
+    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
+    srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
+    width="1024"
+  >
+    <amp-img
+      alt="Student sitting an exam"
+      attribution=""
+      fallback="true"
+      height="576"
+      layout="responsive"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
+      srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
+      width="1024"
+    />
+  </amp-img>
+</div>
+`;
+
 exports[`Image - AmpImg should render landscape image correctly 1`] = `
 <div>
   <amp-img
diff --git a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
index 243612089e..9ed5f33094 100644
--- a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
@@ -7,15 +7,29 @@ exports[`Image - imported as '{ Img }' should render image correctly without wid
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="Student sitting an exam"
+  <picture
     class="emotion-0 emotion-1"
-    height="576"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
-    srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
-  />
+  >
+    <source
+      srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
+    />
+    <source
+      srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
+    />
+    <img
+      alt="Student sitting an exam"
+      class="emotion-2 emotion-3"
+      height="576"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
+    />
+  </picture>
 </div>
 `;
 
@@ -26,35 +40,90 @@ exports[`Image - imported as '{ Img }' should render image with custom dimension
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="By Elisa Decker, from her series \\"Sidewalk\\""
+  <picture
     class="emotion-0 emotion-1"
-    height="547"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
-    width="445"
-  />
+  >
+    <source />
+    <img
+      alt="By Elisa Decker, from her series \\"Sidewalk\\""
+      class="emotion-2 emotion-3"
+      height="547"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
+      width="445"
+    />
+  </picture>
 </div>
 `;
 
-exports[`Image - imported as '{ Img }' should render image with srcset correctly 1`] = `
+exports[`Image - imported as '{ Img }' should render image with only srcset correctly 1`] = `
 .emotion-0 {
   display: block;
   width: 100%;
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="Student sitting an exam"
+  <picture
     class="emotion-0 emotion-1"
-    height="576"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
-    srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
-    width="1024"
-  />
+  >
+    <source
+      srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
+    />
+    <img
+      alt="Student sitting an exam"
+      class="emotion-2 emotion-3"
+      height="576"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
+      width="1024"
+    />
+  </picture>
+</div>
+`;
+
+exports[`Image - imported as '{ Img }' should render image with srcset and fallbackSrcset correctly 1`] = `
+.emotion-0 {
+  display: block;
+  width: 100%;
+  visibility: visible;
+}
+
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
+<div>
+  <picture
+    class="emotion-0 emotion-1"
+  >
+    <source
+      srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
+    />
+    <source
+      srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
+    />
+    <img
+      alt="Student sitting an exam"
+      class="emotion-2 emotion-3"
+      height="576"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
+      width="1024"
+    />
+  </picture>
 </div>
 `;
 
@@ -65,15 +134,25 @@ exports[`Image - imported as '{ Img }' should render landscape image correctly 1
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="Student sitting an exam"
+  <picture
     class="emotion-0 emotion-1"
-    height="576"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
-    width="1024"
-  />
+  >
+    <source />
+    <img
+      alt="Student sitting an exam"
+      class="emotion-2 emotion-3"
+      height="576"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
+      width="1024"
+    />
+  </picture>
 </div>
 `;
 
@@ -84,15 +163,25 @@ exports[`Image - imported as '{ Img }' should render portrait image correctly 1`
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
+  <picture
     class="emotion-0 emotion-1"
-    height="1280"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
-    width="1024"
-  />
+  >
+    <source />
+    <img
+      alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
+      class="emotion-2 emotion-3"
+      height="1280"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
+      width="1024"
+    />
+  </picture>
 </div>
 `;
 
@@ -103,15 +192,25 @@ exports[`Image - imported as '{ Img }' should render square image correctly 1`]
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="Tracks through the snow"
+  <picture
     class="emotion-0 emotion-1"
-    height="1024"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/114FE/production/_104801907_79010.jpg"
-    width="1024"
-  />
+  >
+    <source />
+    <img
+      alt="Tracks through the snow"
+      class="emotion-2 emotion-3"
+      height="1024"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/114FE/production/_104801907_79010.jpg"
+      width="1024"
+    />
+  </picture>
 </div>
 `;
 
@@ -122,15 +221,29 @@ exports[`Image - imported as default 'Image' should render image correctly witho
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="Student sitting an exam"
+  <picture
     class="emotion-0 emotion-1"
-    height="576"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
-    srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
-  />
+  >
+    <source
+      srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
+    />
+    <source
+      srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
+    />
+    <img
+      alt="Student sitting an exam"
+      class="emotion-2 emotion-3"
+      height="576"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
+    />
+  </picture>
 </div>
 `;
 
@@ -141,35 +254,90 @@ exports[`Image - imported as default 'Image' should render image with custom dim
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
+<div>
+  <picture
+    class="emotion-0 emotion-1"
+  >
+    <source />
+    <img
+      alt="By Elisa Decker, from her series \\"Sidewalk\\""
+      class="emotion-2 emotion-3"
+      height="547"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
+      width="445"
+    />
+  </picture>
+</div>
+`;
+
+exports[`Image - imported as default 'Image' should render image with only srcset correctly 1`] = `
+.emotion-0 {
+  display: block;
+  width: 100%;
+  visibility: visible;
+}
+
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="By Elisa Decker, from her series \\"Sidewalk\\""
+  <picture
     class="emotion-0 emotion-1"
-    height="547"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
-    width="445"
-  />
+  >
+    <source
+      srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
+    />
+    <img
+      alt="Student sitting an exam"
+      class="emotion-2 emotion-3"
+      height="576"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
+      width="1024"
+    />
+  </picture>
 </div>
 `;
 
-exports[`Image - imported as default 'Image' should render image with srcset correctly 1`] = `
+exports[`Image - imported as default 'Image' should render image with srcset and fallbackSrcset correctly 1`] = `
 .emotion-0 {
   display: block;
   width: 100%;
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="Student sitting an exam"
+  <picture
     class="emotion-0 emotion-1"
-    height="576"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
-    srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
-    width="1024"
-  />
+  >
+    <source
+      srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
+    />
+    <source
+      srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
+    />
+    <img
+      alt="Student sitting an exam"
+      class="emotion-2 emotion-3"
+      height="576"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
+      width="1024"
+    />
+  </picture>
 </div>
 `;
 
@@ -180,15 +348,25 @@ exports[`Image - imported as default 'Image' should render landscape image corre
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="Student sitting an exam"
+  <picture
     class="emotion-0 emotion-1"
-    height="576"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
-    width="1024"
-  />
+  >
+    <source />
+    <img
+      alt="Student sitting an exam"
+      class="emotion-2 emotion-3"
+      height="576"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
+      width="1024"
+    />
+  </picture>
 </div>
 `;
 
@@ -199,15 +377,25 @@ exports[`Image - imported as default 'Image' should render portrait image correc
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
+  <picture
     class="emotion-0 emotion-1"
-    height="1280"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
-    width="1024"
-  />
+  >
+    <source />
+    <img
+      alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
+      class="emotion-2 emotion-3"
+      height="1280"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
+      width="1024"
+    />
+  </picture>
 </div>
 `;
 
@@ -218,87 +406,152 @@ exports[`Image - imported as default 'Image' should render square image correctl
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="Tracks through the snow"
+  <picture
     class="emotion-0 emotion-1"
-    height="1024"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/114FE/production/_104801907_79010.jpg"
-    width="1024"
-  />
+  >
+    <source />
+    <img
+      alt="Tracks through the snow"
+      class="emotion-2 emotion-3"
+      height="1024"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/114FE/production/_104801907_79010.jpg"
+      width="1024"
+    />
+  </picture>
 </div>
 `;
 
 exports[`Image - with Fade-in effect' should render image correctly without width 1`] = `
-@keyframes animation-0 {
-  from {
-    opacity: 0;
-  }
+.emotion-0 {
+  display: block;
+  width: 100%;
+  visibility: visible;
+}
 
-  to {
-    opacity: 1;
-  }
+.emotion-2 {
+  display: block;
+  width: 100%;
 }
 
+<div>
+  <picture
+    class="emotion-0 emotion-1"
+  >
+    <source
+      srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
+    />
+    <source
+      srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
+    />
+    <img
+      alt="Student sitting an exam"
+      class="emotion-2 emotion-3"
+      height="576"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
+    />
+  </picture>
+</div>
+`;
+
+exports[`Image - with Fade-in effect' should render image with custom dimensions correctly 1`] = `
 .emotion-0 {
   display: block;
   width: 100%;
   visibility: visible;
-  -webkit-animation: animation-0 0.2s linear;
-  animation: animation-0 0.2s linear;
-  -webkit-transition: visibility 0.2s linear;
-  transition: visibility 0.2s linear;
+}
+
+.emotion-2 {
+  display: block;
+  width: 100%;
 }
 
 <div>
-  <img
-    alt="Student sitting an exam"
+  <picture
     class="emotion-0 emotion-1"
-    height="576"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
-    srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
-  />
+  >
+    <source />
+    <img
+      alt="By Elisa Decker, from her series \\"Sidewalk\\""
+      class="emotion-2 emotion-3"
+      height="547"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
+      width="445"
+    />
+  </picture>
 </div>
 `;
 
-exports[`Image - with Fade-in effect' should render image with custom dimensions correctly 1`] = `
+exports[`Image - with Fade-in effect' should render image with only srcset correctly 1`] = `
 .emotion-0 {
   display: block;
   width: 100%;
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="By Elisa Decker, from her series \\"Sidewalk\\""
+  <picture
     class="emotion-0 emotion-1"
-    height="547"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
-    width="445"
-  />
+  >
+    <source
+      srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
+    />
+    <img
+      alt="Student sitting an exam"
+      class="emotion-2 emotion-3"
+      height="576"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
+      width="1024"
+    />
+  </picture>
 </div>
 `;
 
-exports[`Image - with Fade-in effect' should render image with srcset correctly 1`] = `
+exports[`Image - with Fade-in effect' should render image with srcset and fallbackSrcset correctly 1`] = `
 .emotion-0 {
   display: block;
   width: 100%;
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="Student sitting an exam"
+  <picture
     class="emotion-0 emotion-1"
-    height="576"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
-    srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
-    width="1024"
-  />
+  >
+    <source
+      srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
+    />
+    <source
+      srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
+    />
+    <img
+      alt="Student sitting an exam"
+      class="emotion-2 emotion-3"
+      height="576"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
+      width="1024"
+    />
+  </picture>
 </div>
 `;
 
@@ -309,15 +562,25 @@ exports[`Image - with Fade-in effect' should render landscape image correctly 1`
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="Student sitting an exam"
+  <picture
     class="emotion-0 emotion-1"
-    height="576"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
-    width="1024"
-  />
+  >
+    <source />
+    <img
+      alt="Student sitting an exam"
+      class="emotion-2 emotion-3"
+      height="576"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
+      width="1024"
+    />
+  </picture>
 </div>
 `;
 
@@ -328,15 +591,25 @@ exports[`Image - with Fade-in effect' should render portrait image correctly 1`]
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
+  <picture
     class="emotion-0 emotion-1"
-    height="1280"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
-    width="1024"
-  />
+  >
+    <source />
+    <img
+      alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
+      class="emotion-2 emotion-3"
+      height="1280"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
+      width="1024"
+    />
+  </picture>
 </div>
 `;
 
@@ -347,14 +620,24 @@ exports[`Image - with Fade-in effect' should render square image correctly 1`] =
   visibility: visible;
 }
 
+.emotion-2 {
+  display: block;
+  width: 100%;
+}
+
 <div>
-  <img
-    alt="Tracks through the snow"
+  <picture
     class="emotion-0 emotion-1"
-    height="1024"
-    sizes="100vw"
-    src="https://ichef.bbci.co.uk/news/300/cpsprodpb/114FE/production/_104801907_79010.jpg"
-    width="1024"
-  />
+  >
+    <source />
+    <img
+      alt="Tracks through the snow"
+      class="emotion-2 emotion-3"
+      height="1024"
+      sizes="100vw"
+      src="https://ichef.bbci.co.uk/news/300/cpsprodpb/114FE/production/_104801907_79010.jpg"
+      width="1024"
+    />
+  </picture>
 </div>
 `;
diff --git a/packages/components/psammead-image/src/index.amp.jsx b/packages/components/psammead-image/src/index.amp.jsx
index 1dae61b55f..4457ce5e80 100644
--- a/packages/components/psammead-image/src/index.amp.jsx
+++ b/packages/components/psammead-image/src/index.amp.jsx
@@ -6,9 +6,19 @@ import { number, string } from 'prop-types';
 const omitInvalidProps = omit(['classname']);
 
 const AmpImg = props => {
-  const { srcset, ...otherProps } = props;
+  const { srcset, fallbackSrcset, ...otherProps } = props;
 
-  return <amp-img srcSet={srcset} {...omitInvalidProps(otherProps)} />;
+  return (
+    <amp-img srcSet={srcset} {...omitInvalidProps(otherProps)}>
+      {fallbackSrcset && (
+        <amp-img
+          fallback
+          srcSet={fallbackSrcset}
+          {...omitInvalidProps(otherProps)}
+        />
+      )}
+    </amp-img>
+  );
 };
 
 AmpImg.propTypes = {
@@ -19,6 +29,7 @@ AmpImg.propTypes = {
   sizes: string,
   src: string.isRequired,
   srcset: string,
+  fallbackSrcset: string,
   width: number.isRequired,
 };
 
@@ -26,6 +37,7 @@ AmpImg.defaultProps = {
   attribution: '',
   sizes: null,
   srcset: null,
+  fallbackSrcset: null,
 };
 
 export default AmpImg;
diff --git a/packages/components/psammead-image/src/index.amp.stories.jsx b/packages/components/psammead-image/src/index.amp.stories.jsx
index eddbabae75..f7a56ebd44 100644
--- a/packages/components/psammead-image/src/index.amp.stories.jsx
+++ b/packages/components/psammead-image/src/index.amp.stories.jsx
@@ -6,10 +6,10 @@ const additionalProps = {
   layout: 'responsive',
 };
 
-stories(
-  AmpImg,
-  'Components/Images/Image - AmpImg',
-  true,
+stories({
+  Component: AmpImg,
+  title: 'Components/Images/Image - AmpImg',
+  includeHeight: true,
   additionalProps,
-  ampDecorator,
-);
+  styleDecorator: ampDecorator,
+});
diff --git a/packages/components/psammead-image/src/index.jsx b/packages/components/psammead-image/src/index.jsx
index 5e1ec1a74c..50ce12933c 100644
--- a/packages/components/psammead-image/src/index.jsx
+++ b/packages/components/psammead-image/src/index.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { number, oneOfType, string, bool } from 'prop-types';
+import { number, oneOfType, string, bool, func } from 'prop-types';
 import styled from '@emotion/styled';
 import { keyframes, css } from '@emotion/react';
 
@@ -20,17 +20,28 @@ const fadeIn = css`
   transition: visibility 0.2s linear;
 `;
 
-const StyledImg = styled.img`
+const StyledPicture = styled.picture`
   display: block;
   width: 100%;
   visibility: visible;
   ${props => props.fade && fadeIn};
 `;
 
+const StyledImg = styled.img`
+  display: block;
+  width: 100%;
+`;
+
 export const Img = props => {
-  const { srcset, ...otherProps } = props;
+  const { src, srcset, fallbackSrcset, onLoad, ...otherProps } = props;
 
-  return <StyledImg srcSet={srcset} {...otherProps} />;
+  return (
+    <StyledPicture onLoad={onLoad}>
+      <source srcSet={srcset} />
+      {fallbackSrcset && <source srcSet={fallbackSrcset} />}
+      <StyledImg src={src} {...otherProps} />
+    </StyledPicture>
+  );
 };
 
 Img.propTypes = {
@@ -40,7 +51,9 @@ Img.propTypes = {
   sizes: string,
   src: string.isRequired,
   srcset: string,
+  fallbackSrcset: string,
   width: oneOfType([string, number]),
+  onLoad: func,
 };
 
 Img.defaultProps = {
@@ -48,7 +61,9 @@ Img.defaultProps = {
   height: null,
   sizes: null,
   srcset: null,
+  fallbackSrcset: null,
   width: null,
+  onLoad: () => {},
 };
 
 export default Img;
diff --git a/packages/components/psammead-image/src/index.stories.jsx b/packages/components/psammead-image/src/index.stories.jsx
index bb45b93b35..c95246ab17 100644
--- a/packages/components/psammead-image/src/index.stories.jsx
+++ b/packages/components/psammead-image/src/index.stories.jsx
@@ -1,21 +1,15 @@
-import React from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { Img } from '.';
-import { stories, getProps } from './testHelpers/stories';
-import { landscape } from './testHelpers/fixtureData';
-import notes from '../README.md';
+import { stories } from './testHelpers/stories';
 
 const type = 'Img';
 
-stories(
-  Img,
-  'Components/Images/Image - Img',
-  false,
-  {},
-  withKnobs,
+stories({
+  Component: Img,
+  title: 'Components/Images/Image - Img',
+  includeHeight: false,
+  additionalProps: {},
+  styleDecorator: withKnobs,
   type,
-).add(
-  'image without width',
-  () => <Img {...getProps(landscape, false, type)} width={null} />,
-  { notes },
-);
+  isCanonical: true,
+});
diff --git a/packages/components/psammead-image/src/testHelpers/fixtureData.js b/packages/components/psammead-image/src/testHelpers/fixtureData.js
index 51e68585c7..57d0b4b18f 100644
--- a/packages/components/psammead-image/src/testHelpers/fixtureData.js
+++ b/packages/components/psammead-image/src/testHelpers/fixtureData.js
@@ -10,6 +10,9 @@ export const landscape = {
   sizes: '100vw',
   src: landscapeImageUrl.replace('[WIDTH]', sizes[0]),
   srcset: sizes
+    .map(size => `${landscapeImageUrl.replace('[WIDTH]', size)}.webp ${size}w`)
+    .join(', '),
+  fallbackSrcset: sizes
     .map(size => `${landscapeImageUrl.replace('[WIDTH]', size)} ${size}w`)
     .join(', '),
   width: 1024,
@@ -23,6 +26,9 @@ export const portrait = {
   sizes: '100vw',
   src: portraitImageUrl.replace('[WIDTH]', sizes[0]),
   srcset: sizes
+    .map(size => `${portraitImageUrl.replace('[WIDTH]', size)}.webp ${size}w`)
+    .join(', '),
+  fallbackSrcset: sizes
     .map(size => `${portraitImageUrl.replace('[WIDTH]', size)} ${size}w`)
     .join(', '),
   width: 1024,
@@ -35,6 +41,9 @@ export const square = {
   sizes: '100vw',
   src: squareImageUrl.replace('[WIDTH]', sizes[0]),
   srcset: sizes
+    .map(size => `${squareImageUrl.replace('[WIDTH]', size)}.webp ${size}w`)
+    .join(', '),
+  fallbackSrcset: sizes
     .map(size => `${squareImageUrl.replace('[WIDTH]', size)} ${size}w`)
     .join(', '),
   width: 1024,
@@ -47,6 +56,9 @@ export const custom = {
   sizes: '100vw',
   src: customImageUrl.replace('[WIDTH]', sizes[0]),
   srcset: sizes
+    .map(size => `${customImageUrl.replace('[WIDTH]', size)}.webp ${size}w`)
+    .join(', '),
+  fallbackSrcset: sizes
     .map(size => `${customImageUrl.replace('[WIDTH]', size)} ${size}w`)
     .join(', '),
   width: 445,
diff --git a/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx b/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx
index 92507b5128..d7fd3a3ac6 100644
--- a/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx
+++ b/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx
@@ -52,7 +52,21 @@ const snapshotTests = (Component, additionalProps) => {
     />,
   );
   shouldMatchSnapshot(
-    'should render image with srcset correctly',
+    'should render image with srcset and fallbackSrcset correctly',
+    <Component
+      alt={landscape.alt}
+      attribution={landscape.attribution}
+      sizes={landscape.sizes}
+      src={landscape.src}
+      srcset={landscape.srcset}
+      fallbackSrcset={landscape.fallbackSrcset}
+      height={landscape.height}
+      width={landscape.width}
+      {...additionalProps}
+    />,
+  );
+  shouldMatchSnapshot(
+    'should render image with only srcset correctly',
     <Component
       alt={landscape.alt}
       attribution={landscape.attribution}
diff --git a/packages/components/psammead-image/src/testHelpers/stories.jsx b/packages/components/psammead-image/src/testHelpers/stories.jsx
index 026d2a66e6..4c83463547 100644
--- a/packages/components/psammead-image/src/testHelpers/stories.jsx
+++ b/packages/components/psammead-image/src/testHelpers/stories.jsx
@@ -10,6 +10,7 @@ export function getProps(image, includeHeight, type) {
     sizes: image.sizes,
     src: image.src,
     srcset: image.srcset,
+    fallbackSrcset: image.fallbackSrcset,
     width: image.width,
     fade: type === 'Img' ? boolean('Fade', false) : null,
   };
@@ -18,14 +19,15 @@ export function getProps(image, includeHeight, type) {
   return props;
 }
 
-export const stories = (
+export const stories = ({
   Component,
   title,
   includeHeight = false,
   additionalProps = {},
   styleDecorator = storyFn => storyFn(),
   type,
-) =>
+  isCanonical = false,
+}) =>
   storiesOf(title, module)
     .addDecorator(styleDecorator)
     .add(
@@ -78,4 +80,9 @@ export const stories = (
         />
       ),
       { notes },
+    )
+    .add(
+      isCanonical && 'image without width',
+      () => <Component {...getProps(landscape, false, type)} width={null} />,
+      { notes },
     );
diff --git a/packages/components/psammead-media-player/CHANGELOG.md b/packages/components/psammead-media-player/CHANGELOG.md
index 6be6e0f419..6b1fba0d75 100644
--- a/packages/components/psammead-media-player/CHANGELOG.md
+++ b/packages/components/psammead-media-player/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version       | Description                                                                                                                  |
 | ------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| 6.0.0| [PR#4606](https://github.com/bbc/psammead/pull/4606) Adds support for WebP |
 | 5.1.13 | [PR#4601](https://github.com/bbc/psammead/pull/4601) Bumps dependencies |
 | 5.1.13 | [PR#4574](https://github.com/bbc/psammead/pull/4574) Bumps psammead-styles transitive packages |
 | 5.1.12 | [PR#4568](https://github.com/bbc/psammead/pull/4568) Bump from psammead-styles |
diff --git a/packages/components/psammead-media-player/package.json b/packages/components/psammead-media-player/package.json
index 2a7d585836..4424968d10 100644
--- a/packages/components/psammead-media-player/package.json
+++ b/packages/components/psammead-media-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-media-player",
-  "version": "5.1.14",
+  "version": "6.0.0",
   "description": "Provides a media player with optional placeholder",
   "main": "dist/index.js",
   "module": "esm/index.js",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@bbc/psammead-assets": "3.1.10",
-    "@bbc/psammead-image": "2.0.8",
+    "@bbc/psammead-image": "3.0.0",
     "@bbc/psammead-image-placeholder": "3.4.10",
     "@bbc/psammead-play-button": "3.0.32"
   },
diff --git a/packages/components/psammead-media-player/src/Placeholder/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-player/src/Placeholder/__snapshots__/index.test.jsx.snap
index d710a3b80b..1dbd743101 100644
--- a/packages/components/psammead-media-player/src/Placeholder/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-media-player/src/Placeholder/__snapshots__/index.test.jsx.snap
@@ -106,6 +106,11 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = `
   visibility: visible;
 }
 
+.emotion-19 {
+  display: block;
+  width: 100%;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -152,11 +157,16 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = `
         2:30
       </time>
     </button>
-    <img
-      alt=""
+    <picture
       class="emotion-17 emotion-18"
-      src="http://foo.bar/placeholder.png"
-    />
+    >
+      <source />
+      <img
+        alt=""
+        class="emotion-19 emotion-20"
+        src="http://foo.bar/placeholder.png"
+      />
+    </picture>
   </div>
 </div>
 `;
@@ -293,6 +303,11 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan
   visibility: visible;
 }
 
+.emotion-21 {
+  display: block;
+  width: 100%;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -345,11 +360,16 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan
         2:30
       </time>
     </button>
-    <img
-      alt=""
+    <picture
       class="emotion-19 emotion-20"
-      src="http://foo.bar/placeholder.png"
-    />
+    >
+      <source />
+      <img
+        alt=""
+        class="emotion-21 emotion-22"
+        src="http://foo.bar/placeholder.png"
+      />
+    </picture>
   </div>
 </div>
 `;
@@ -454,6 +474,11 @@ exports[`Media Player: Placeholder should render a video placeholder without dur
   visibility: visible;
 }
 
+.emotion-17 {
+  display: block;
+  width: 100%;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -493,11 +518,16 @@ exports[`Media Player: Placeholder should render a video placeholder without dur
         </svg>
       </div>
     </button>
-    <img
-      alt=""
+    <picture
       class="emotion-15 emotion-16"
-      src="http://foo.bar/placeholder.png"
-    />
+    >
+      <source />
+      <img
+        alt=""
+        class="emotion-17 emotion-18"
+        src="http://foo.bar/placeholder.png"
+      />
+    </picture>
   </div>
 </div>
 `;
@@ -608,6 +638,11 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = `
   visibility: visible;
 }
 
+.emotion-19 {
+  display: block;
+  width: 100%;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -657,11 +692,16 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = `
         2:30
       </time>
     </button>
-    <img
-      alt=""
+    <picture
       class="emotion-17 emotion-18"
-      src="http://foo.bar/placeholder.png"
-    />
+    >
+      <source />
+      <img
+        alt=""
+        class="emotion-19 emotion-20"
+        src="http://foo.bar/placeholder.png"
+      />
+    </picture>
   </div>
 </div>
 `;
@@ -766,6 +806,11 @@ exports[`Media Player: Placeholder should render an audio placeholder without du
   visibility: visible;
 }
 
+.emotion-17 {
+  display: block;
+  width: 100%;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -808,11 +853,16 @@ exports[`Media Player: Placeholder should render an audio placeholder without du
         </svg>
       </div>
     </button>
-    <img
-      alt=""
+    <picture
       class="emotion-15 emotion-16"
-      src="http://foo.bar/placeholder.png"
-    />
+    >
+      <source />
+      <img
+        alt=""
+        class="emotion-17 emotion-18"
+        src="http://foo.bar/placeholder.png"
+      />
+    </picture>
   </div>
 </div>
 `;
@@ -966,6 +1016,11 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName
   visibility: visible;
 }
 
+.emotion-21 {
+  display: block;
+  width: 100%;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -1018,11 +1073,16 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName
         2:30
       </time>
     </button>
-    <img
-      alt=""
+    <picture
       class="emotion-19 emotion-20"
-      src="http://foo.bar/placeholder.png"
-    />
+    >
+      <source />
+      <img
+        alt=""
+        class="emotion-21 emotion-22"
+        src="http://foo.bar/placeholder.png"
+      />
+    </picture>
   </div>
 </div>
 `;
diff --git a/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap
index a93190c360..5514151048 100644
--- a/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap
@@ -229,6 +229,11 @@ exports[`Media Player: Canonical Entry renders a landscape container with a plac
   visibility: visible;
 }
 
+.emotion-21 {
+  display: block;
+  width: 100%;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -279,11 +284,16 @@ exports[`Media Player: Canonical Entry renders a landscape container with a plac
           2:30
         </time>
       </button>
-      <img
-        alt=""
+      <picture
         class="emotion-19 emotion-20"
-        src="http://foo.bar/placeholder.png"
-      />
+      >
+        <source />
+        <img
+          alt=""
+          class="emotion-21 emotion-22"
+          src="http://foo.bar/placeholder.png"
+        />
+      </picture>
     </div>
   </div>
 </div>
@@ -427,6 +437,11 @@ exports[`Media Player: Canonical Entry renders a placeholder image with guidance
   visibility: visible;
 }
 
+.emotion-23 {
+  display: block;
+  width: 100%;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -483,11 +498,16 @@ exports[`Media Player: Canonical Entry renders a placeholder image with guidance
           2:30
         </time>
       </button>
-      <img
-        alt=""
+      <picture
         class="emotion-21 emotion-22"
-        src="http://foo.bar/placeholder.png"
-      />
+      >
+        <source />
+        <img
+          alt=""
+          class="emotion-23 emotion-24"
+          src="http://foo.bar/placeholder.png"
+        />
+      </picture>
     </div>
   </div>
 </div>
@@ -605,6 +625,11 @@ exports[`Media Player: Canonical Entry renders a portrait container with a place
   visibility: visible;
 }
 
+.emotion-21 {
+  display: block;
+  width: 100%;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -655,11 +680,16 @@ exports[`Media Player: Canonical Entry renders a portrait container with a place
           2:30
         </time>
       </button>
-      <img
-        alt=""
+      <picture
         class="emotion-19 emotion-20"
-        src="http://foo.bar/placeholder.png"
-      />
+      >
+        <source />
+        <img
+          alt=""
+          class="emotion-21 emotion-22"
+          src="http://foo.bar/placeholder.png"
+        />
+      </picture>
     </div>
   </div>
 </div>
@@ -896,6 +926,11 @@ exports[`Media Player: Canonical Entry renders with no-js styles when noJsClassN
   visibility: visible;
 }
 
+.emotion-23 {
+  display: block;
+  width: 100%;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -952,11 +987,16 @@ exports[`Media Player: Canonical Entry renders with no-js styles when noJsClassN
           2:30
         </time>
       </button>
-      <img
-        alt=""
+      <picture
         class="emotion-21 emotion-22"
-        src="http://foo.bar/placeholder.png"
-      />
+      >
+        <source />
+        <img
+          alt=""
+          class="emotion-23 emotion-24"
+          src="http://foo.bar/placeholder.png"
+        />
+      </picture>
     </div>
   </div>
 </div>
diff --git a/packages/components/psammead-story-promo-list/CHANGELOG.md b/packages/components/psammead-story-promo-list/CHANGELOG.md
index 3dd7414181..bdc5b201ee 100644
--- a/packages/components/psammead-story-promo-list/CHANGELOG.md
+++ b/packages/components/psammead-story-promo-list/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 6.0.29 | [PR#4606](https://github.com/bbc/psammead/pull/4606) Bumps psammead-styles |
 | 6.0.28 | [PR#4574](https://github.com/bbc/psammead/pull/4574) Bumps psammead-styles |
 | 6.0.27 | [PR#4568](https://github.com/bbc/psammead/pull/4568) Bump dependencies |
 | 6.0.26 | [PR#4565](https://github.com/bbc/psammead/pull/4565) Bump from psammead-styles |
diff --git a/packages/components/psammead-story-promo-list/package.json b/packages/components/psammead-story-promo-list/package.json
index 5c8a084151..9a309dc4c1 100644
--- a/packages/components/psammead-story-promo-list/package.json
+++ b/packages/components/psammead-story-promo-list/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-story-promo-list",
-  "version": "6.0.28",
+  "version": "6.0.29",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,
diff --git a/packages/components/psammead-story-promo-list/src/index.stories.jsx b/packages/components/psammead-story-promo-list/src/index.stories.jsx
index 3debfd5361..f0f87ca88d 100644
--- a/packages/components/psammead-story-promo-list/src/index.stories.jsx
+++ b/packages/components/psammead-story-promo-list/src/index.stories.jsx
@@ -12,7 +12,13 @@ import notes from '../README.md';
 
 // eslint-disable-next-line react/prop-types
 const ImageComponent = ({ alt, src }) => (
-  <Image alt={alt} src={src} width="640" />
+  <Image
+    alt={alt}
+    src={src}
+    width="640"
+    srcset={`${src}.webp 640w`}
+    fallbackSrcset={`${src} 640w`}
+  />
 );
 
 // eslint-disable-next-line react/prop-types
diff --git a/packages/components/psammead-story-promo/CHANGELOG.md b/packages/components/psammead-story-promo/CHANGELOG.md
index 91104f3ebd..0023fd6531 100644
--- a/packages/components/psammead-story-promo/CHANGELOG.md
+++ b/packages/components/psammead-story-promo/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 8.0.35 | [PR#4606](https://github.com/bbc/psammead/pull/4606) Bump dependencies |
 | 8.0.34 | [PR#4603](https://github.com/bbc/psammead/pull/4603) Conditionally add aria-labelledby attribute |
 | 8.0.33 | [PR#4602](https://github.com/bbc/psammead/pull/4602) Use 'children' value instead of 'URL' for aria-labelledby |
 | 8.0.32 | [PR#4588](https://github.com/bbc/psammead/pull/4588) Fix TalkBack reading nested spans incorrectly |
diff --git a/packages/components/psammead-story-promo/package.json b/packages/components/psammead-story-promo/package.json
index 59b1991702..06292094c6 100644
--- a/packages/components/psammead-story-promo/package.json
+++ b/packages/components/psammead-story-promo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-story-promo",
-  "version": "8.0.34",
+  "version": "8.0.35",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,
diff --git a/packages/components/psammead-story-promo/src/index.stories.jsx b/packages/components/psammead-story-promo/src/index.stories.jsx
index b454800b89..93b75f5ba4 100644
--- a/packages/components/psammead-story-promo/src/index.stories.jsx
+++ b/packages/components/psammead-story-promo/src/index.stories.jsx
@@ -14,16 +14,25 @@ import relatedItems from '../testHelpers/relatedItems';
 import IndexAlsosContainer from '../testHelpers/IndexAlsosContainer';
 import notes from '../README.md';
 
-const buildImg = () => (
-  <Image
-    alt={text('Image alt text', 'Robert Downey Junior in Iron Man')}
-    src={text(
-      'Image src',
-      'https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg',
-    )}
-    width="640"
-  />
-);
+const buildImg = () => {
+  const imageSizes = [300, 450, 600, 1024];
+  const imageSrc =
+    'https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/11897/production/_106613817_999_al_.jpg';
+
+  return (
+    <Image
+      alt={text('Image alt text', 'Robert Downey Junior in Iron Man')}
+      src={text('Image src', imageSrc.replace('[WIDTH]', 660))}
+      width="640"
+      srcset={imageSizes
+        .map(size => `${imageSrc.replace('[WIDTH]', size)}.webp ${size}w`)
+        .join(', ')}
+      fallbackSrcset={imageSizes
+        .map(size => `${imageSrc.replace('[WIDTH]', size)} ${size}w`)
+        .join(', ')}
+    />
+  );
+};
 
 const StyledTime = styled.time`
   padding: 0 ${GEL_SPACING_HLF};
diff --git a/yarn.lock b/yarn.lock
index d26f4617fe..19466299af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1693,7 +1693,7 @@ __metadata:
     "@bbc/gel-foundations": 7.0.0
     "@bbc/psammead-assets": 3.1.10
     "@bbc/psammead-live-label": 2.0.32
-    "@bbc/psammead-story-promo": 8.0.34
+    "@bbc/psammead-story-promo": 8.0.35
     "@bbc/psammead-styles": 8.0.1
     "@bbc/psammead-visually-hidden-text": 2.0.7
     "@emotion/styled": ^11.3.0
@@ -1876,7 +1876,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@bbc/psammead-image@2.0.8, @bbc/psammead-image@workspace:packages/components/psammead-image":
+"@bbc/psammead-image@3.0.0, @bbc/psammead-image@workspace:packages/components/psammead-image":
   version: 0.0.0-use.local
   resolution: "@bbc/psammead-image@workspace:packages/components/psammead-image"
   dependencies:
@@ -1953,7 +1953,7 @@ __metadata:
   resolution: "@bbc/psammead-media-player@workspace:packages/components/psammead-media-player"
   dependencies:
     "@bbc/psammead-assets": 3.1.10
-    "@bbc/psammead-image": 2.0.8
+    "@bbc/psammead-image": 3.0.0
     "@bbc/psammead-image-placeholder": 3.4.10
     "@bbc/psammead-play-button": 3.0.32
     "@emotion/styled": ^11.3.0
@@ -2092,7 +2092,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@bbc/psammead-story-promo@8.0.34, @bbc/psammead-story-promo@workspace:packages/components/psammead-story-promo":
+"@bbc/psammead-story-promo@8.0.35, @bbc/psammead-story-promo@workspace:packages/components/psammead-story-promo":
   version: 0.0.0-use.local
   resolution: "@bbc/psammead-story-promo@workspace:packages/components/psammead-story-promo"
   dependencies: