diff --git a/CHANGELOG.md b/CHANGELOG.md
index f08d146c..f4782203 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Chips can be made plain with `tna-chip--plain`
 - Visual regression tests can now be run in the Storyobok UI
 - Allow right/left margins to be added to columns
+- Hero components can have different image sources with `<source>` elements
 
 ### Changed
 
@@ -38,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Better alignment of site name next to logo in header
 - Fixed right/left padding of logo and hamburger on small devices
 - Change Supria Sans weight from `400` to `500` (medium, as provided by TypeKit)
+- Card image type is now variable when using sources
 
 ### Security
 
diff --git a/src/nationalarchives/components/card/card.stories.js b/src/nationalarchives/components/card/card.stories.js
index 3547ecb2..5257df05 100644
--- a/src/nationalarchives/components/card/card.stories.js
+++ b/src/nationalarchives/components/card/card.stories.js
@@ -11,6 +11,7 @@ const argTypes = {
   imageAlt: { control: "text" },
   imageWidth: { control: { type: "number", min: 1 } },
   imageHeight: { control: { type: "number", min: 1 } },
+  imageType: { control: "text" },
   imageSources: { control: "object" },
   label: { control: "text" },
   meta: { control: "object" },
@@ -47,6 +48,7 @@ const Template = ({
   imageAlt,
   imageWidth,
   imageHeight,
+  imageType,
   imageSources,
   label,
   meta,
@@ -70,6 +72,7 @@ const Template = ({
       imageAlt,
       imageWidth,
       imageHeight,
+      imageType,
       imageSources,
       label,
       meta,
@@ -270,7 +273,7 @@ Sources.args = {
   imageHeight: 404,
   imageSources: [
     {
-      imageSrc: "https://www.gstatic.com/webp/gallery/2.webp",
+      src: "https://www.gstatic.com/webp/gallery/2.webp",
       type: "image/webp",
     },
   ],
diff --git a/src/nationalarchives/components/card/macro-options.json b/src/nationalarchives/components/card/macro-options.json
index a52d27e7..f8d04cbe 100644
--- a/src/nationalarchives/components/card/macro-options.json
+++ b/src/nationalarchives/components/card/macro-options.json
@@ -54,6 +54,12 @@
     "required": false,
     "description": "The height of the image in pixels."
   },
+  {
+    "name": "imageType",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "imageSources",
     "type": "array",
diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk
index 1f4bdde7..5f1d4945 100644
--- a/src/nationalarchives/components/card/template.njk
+++ b/src/nationalarchives/components/card/template.njk
@@ -38,10 +38,10 @@
     {%- endif -%}
       <picture class="tna-card__image">
         {%- if params.imageSources -%}
-        {%- for source in params.imageSources -%}
+        {%- for source in params.imageSources %}
         <source srcset="{{ source.src }}" type="{{ source.type }}" width="{{ source.width if source.width else params.imageWidth }}" height="{{ source.height if source.height else params.imageHeight }}">
-        {%- endfor -%}
-        <source srcset="{{ params.imageSrc }}" type="image/jpeg" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
+        {%- endfor %}
+        <source srcset="{{ params.imageSrc }}" type="{{ params.imageType if params.imageType else 'image/jpeg' }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
         {%- endif -%}
         <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
       </picture>
diff --git a/src/nationalarchives/components/hero/fixtures.json b/src/nationalarchives/components/hero/fixtures.json
index e4cf768e..004a4bb0 100644
--- a/src/nationalarchives/components/hero/fixtures.json
+++ b/src/nationalarchives/components/hero/fixtures.json
@@ -10,7 +10,7 @@
         "imageWidth": 499,
         "imageHeight": 333
       },
-      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
+      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
       "hidden": false
     },
     {
@@ -23,7 +23,7 @@
         "imageWidth": 499,
         "imageHeight": 333
       },
-      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>",
+      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>",
       "hidden": false
     },
     {
@@ -36,7 +36,7 @@
         "imageWidth": 499,
         "imageHeight": 333
       },
-      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>",
+      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>",
       "hidden": false
     },
     {
@@ -49,7 +49,7 @@
         "imageHeight": 333,
         "imageCaption": "An interesting photo by a famous photographer ©2023"
       },
-      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
+      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
       "hidden": false
     },
     {
@@ -61,7 +61,88 @@
         "imageHeight": 333,
         "imageCaption": "An interesting photo by a famous photographer ©2023"
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"></figure></div>",
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>",
+      "hidden": false
+    },
+    {
+      "name": "image only with no caption",
+      "options": {
+        "imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+        "imageAlt": "The National Archives office",
+        "imageWidth": 499,
+        "imageHeight": 333
+      },
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>",
+      "hidden": false
+    },
+    {
+      "name": "image with different type",
+      "options": {
+        "imageSrc": "https://upload.wikimedia.org/wikipedia/en/thumb/c/c8/Gov.uk_logo.svg/250px-Gov.uk_logo.svg.png",
+        "imageAlt": "The National Archives office",
+        "imageWidth": 499,
+        "imageHeight": 333,
+        "imageType": "image/png",
+        "imageCaption": "An interesting photo by a famous photographer ©2023"
+      },
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://upload.wikimedia.org/wikipedia/en/thumb/c/c8/Gov.uk_logo.svg/250px-Gov.uk_logo.svg.png\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>",
+      "hidden": false
+    },
+    {
+      "name": "with alternative image sources",
+      "options": {
+        "imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+        "imageAlt": "The National Archives office",
+        "imageWidth": 499,
+        "imageHeight": 333,
+        "imageCaption": "An interesting photo by a famous photographer ©2023",
+        "imageSources": [
+          {
+            "src": "https://www.gstatic.com/webp/gallery/2.webp",
+            "type": "image/webp"
+          }
+        ]
+      },
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\"><source srcset=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" type=\"image/jpeg\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>",
+      "hidden": false
+    },
+    {
+      "name": "with alternative image sources with media queries",
+      "options": {
+        "imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+        "imageAlt": "The National Archives office",
+        "imageWidth": 499,
+        "imageHeight": 333,
+        "imageCaption": "An interesting photo by a famous photographer ©2023",
+        "imageSources": [
+          {
+            "src": "https://www.gstatic.com/webp/gallery/2.webp",
+            "type": "image/webp",
+            "media": "(max-width: 48em)"
+          }
+        ]
+      },
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\" media=\"(max-width: 48em)\"><source srcset=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" type=\"image/jpeg\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>",
+      "hidden": false
+    },
+    {
+      "name": "with alternative image sources with different width/heights",
+      "options": {
+        "imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+        "imageAlt": "The National Archives office",
+        "imageWidth": 499,
+        "imageHeight": 333,
+        "imageCaption": "An interesting photo by a famous photographer ©2023",
+        "imageSources": [
+          {
+            "src": "https://www.gstatic.com/webp/gallery/2.webp",
+            "type": "image/webp",
+            "width": 550,
+            "height": 404
+          }
+        ]
+      },
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"550\" height=\"404\"><source srcset=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" type=\"image/jpeg\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>",
       "hidden": false
     },
     {
@@ -75,7 +156,7 @@
         "imageCaption": "An interesting photo by a famous photographer ©2023",
         "classes": "hero__test-class"
       },
-      "html": "<header class=\"tna-hero hero__test-class\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
+      "html": "<header class=\"tna-hero hero__test-class\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
       "hidden": false
     },
     {
@@ -91,7 +172,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<header class=\"tna-hero \" data-testattribute=\"foobar\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
+      "html": "<header class=\"tna-hero \" data-testattribute=\"foobar\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
       "hidden": false
     }
   ]
diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss
index adb1b1cf..beb2381a 100644
--- a/src/nationalarchives/components/hero/hero.scss
+++ b/src/nationalarchives/components/hero/hero.scss
@@ -83,7 +83,7 @@
 
     @include colour.invert;
 
-    // @include typography.relative-font-size(16);
+    @include typography.relative-font-size(16);
   }
 
   &__image {
@@ -94,7 +94,12 @@
     inset: 0;
     z-index: 1;
 
-    object-fit: cover;
+    img {
+      width: 100%;
+      height: 100%;
+
+      object-fit: cover;
+    }
   }
 
   &__details[open] &__details-summary {
@@ -234,6 +239,10 @@
       position: static;
 
       order: 1;
+
+      img {
+        height: auto;
+      }
     }
 
     &__inner {
diff --git a/src/nationalarchives/components/hero/hero.stories.js b/src/nationalarchives/components/hero/hero.stories.js
index d165c587..b69c918f 100644
--- a/src/nationalarchives/components/hero/hero.stories.js
+++ b/src/nationalarchives/components/hero/hero.stories.js
@@ -8,14 +8,13 @@ const argTypes = {
   heading: { control: "text" },
   body: { control: "text" },
   text: { control: "text" },
-
   imageSrc: { control: { type: "file", accept: ".jpg" } },
   imageAlt: { control: "text" },
   imageWidth: { control: { type: "number", min: 1 } },
   imageHeight: { control: { type: "number", min: 1 } },
-
+  imageType: { control: "text" },
+  imageSources: { control: "object" },
   imageCaption: { control: "text" },
-
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -39,6 +38,8 @@ const Template = ({
   imageAlt,
   imageWidth,
   imageHeight,
+  imageType,
+  imageSources,
   imageCaption,
   classes,
   attributes,
@@ -52,6 +53,8 @@ const Template = ({
       imageAlt,
       imageWidth,
       imageHeight,
+      imageType,
+      imageSources,
       imageCaption,
       classes,
       attributes,
@@ -120,6 +123,27 @@ CaptionWithNoHeading.args = {
   classes: "tna-hero--demo",
 };
 
+export const Sources = Template.bind({});
+Sources.args = {
+  heading: "Title",
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 499,
+  imageHeight: 333,
+  imageSources: [
+    {
+      src: "https://www.gstatic.com/webp/gallery/2.webp",
+      type: "image/webp",
+      media: "(max-width: 48em)",
+      width: 550,
+      height: 404,
+    },
+  ],
+  classes: "tna-hero--demo",
+};
+
 export const Mobile = Template.bind({});
 Mobile.parameters = {
   viewport: {
diff --git a/src/nationalarchives/components/hero/macro-options.json b/src/nationalarchives/components/hero/macro-options.json
index 5820bf9c..206053c0 100644
--- a/src/nationalarchives/components/hero/macro-options.json
+++ b/src/nationalarchives/components/hero/macro-options.json
@@ -41,6 +41,50 @@
     "required": true,
     "description": ""
   },
+  {
+    "name": "imageType",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "imageSources",
+    "type": "array",
+    "required": true,
+    "description": "Alternative sources of the image which can include WebP files.",
+    "params": [
+      {
+        "name": "src",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "type",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "media",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "width",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "height",
+        "type": "number",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
   {
     "name": "imageCaption",
     "type": "string",
diff --git a/src/nationalarchives/components/hero/template.njk b/src/nationalarchives/components/hero/template.njk
index 58b7e69b..c1bbc7f3 100644
--- a/src/nationalarchives/components/hero/template.njk
+++ b/src/nationalarchives/components/hero/template.njk
@@ -13,7 +13,15 @@
       </details>
     </figcaption>
     {%- endif -%}
-    <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" class="tna-hero__image" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
+    <picture class="tna-hero__image">
+      {%- if params.imageSources -%}
+      {%- for source in params.imageSources %}
+      <source srcset="{{ source.src }}" type="{{ source.type }}" width="{{ source.width if source.width else params.imageWidth }}" height="{{ source.height if source.height else params.imageHeight }}"{% if source.media %} media="{{ source.media }}"{% endif %}>
+      {%- endfor %}
+      <source srcset="{{ params.imageSrc }}" type="{{ params.imageType if params.imageType else 'image/jpeg' }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
+      {%- endif -%}
+      <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
+    </picture>
     {%- if params.heading -%}
     <div class="tna-container tna-hero__inner">
       <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content">