diff --git a/app/assets/images/flexible-pages/example_desktop_1x_landscape.jpg b/app/assets/images/flexible-pages/example_desktop_1x_landscape.jpg
new file mode 100644
index 0000000000..256bed3f59
Binary files /dev/null and b/app/assets/images/flexible-pages/example_desktop_1x_landscape.jpg differ
diff --git a/app/assets/images/flexible-pages/example_desktop_2x_landscape.jpg b/app/assets/images/flexible-pages/example_desktop_2x_landscape.jpg
new file mode 100644
index 0000000000..9bfb8c151a
Binary files /dev/null and b/app/assets/images/flexible-pages/example_desktop_2x_landscape.jpg differ
diff --git a/app/assets/stylesheets/components/_impact-header.scss b/app/assets/stylesheets/components/_impact-header.scss
index dfe9ac3608..a1a0e95399 100644
--- a/app/assets/stylesheets/components/_impact-header.scss
+++ b/app/assets/stylesheets/components/_impact-header.scss
@@ -5,25 +5,6 @@ $gap: 30px;
   margin-bottom: 30px;
 }
 
-.app-c-impact-header__caption-wrapper {
-  max-width: 1020px;
-  margin: 0 auto;
-
-  @include govuk-media-query($from: desktop) {
-    display: flex;
-    gap: $gap;
-
-    &::before {
-      content: "";
-      display: block;
-      height: 1px;
-      width: 50%;
-      flex-shrink: 1;
-      max-width: 495px;
-    }
-  }
-}
-
 .app-c-impact-header__caption {
   padding: 15px;
 
@@ -33,8 +14,7 @@ $gap: 30px;
 
   @include govuk-media-query($from: desktop) {
     box-sizing: border-box;
-    width: 50%;
-    padding-left: 0;
+    padding: 30px 0;
   }
 }
 
@@ -47,17 +27,12 @@ $gap: 30px;
   @include govuk-media-query($from: desktop) {
     flex-direction: row;
     gap: $gap;
-    min-height: $box-size;
   }
 }
 
 .app-c-impact-header__detail {
   padding: 15px;
-  flex-shrink: 1;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+  align-self: flex-start;
 
   @include govuk-media-query($from: tablet) {
     padding: 30px;
@@ -66,25 +41,25 @@ $gap: 30px;
   @include govuk-media-query($from: desktop) {
     box-sizing: border-box;
     width: 50%;
-    padding: 30px 0 30px 30px;
+    padding: 60px 0 30px 30px;
   }
 }
 
 .app-c-impact-header__image-wrapper {
   flex-shrink: 1;
   flex-grow: 0;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  aspect-ratio: 16 / 9;
   box-sizing: border-box;
 
   @include govuk-media-query($from: desktop) {
     width: 50%;
-    aspect-ratio: auto;
     max-width: $box-size;
-    align-self: flex-end;
+    align-self: flex-start;
+  }
+}
+
+.app-c-impact-header__image-thing {
+  @include govuk-media-query($from: desktop) {
+    overflow: hidden;
   }
 }
 
@@ -94,7 +69,6 @@ $gap: 30px;
   margin: 0 auto;
 
   @include govuk-media-query($from: desktop) {
-    max-height: $box-size;
     max-width: none;
   }
 }
diff --git a/app/views/components/_impact_header.html.erb b/app/views/components/_impact_header.html.erb
index 0a2a3e8065..7d87b17547 100644
--- a/app/views/components/_impact_header.html.erb
+++ b/app/views/components/_impact_header.html.erb
@@ -36,6 +36,21 @@
     } %>
   <% end %>
 
+  <% caption = capture do %>
+    <% if show_caption %>
+      <div class="app-c-impact-header__caption">
+        <%= render "govuk_publishing_components/components/details", {
+          title: "Image details",
+          theme: ("black" unless inverse),
+          inverse: inverse,
+          margin_bottom: 0,
+        } do %>
+          <%= image[:caption] %>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+
   <%= tag.div(**component_helper.all_attributes) do %>
     <% if image %>
       <div class="app-c-impact-header__container">
@@ -43,25 +58,18 @@
           <%= text %>
         </div>
 
-        <%= render "flexible_page/flexible_sections/shared/picture",
-          image: image,
-          style: "app-c-impact-header",
-          alt_text: "" %>
-      </div>
-      <% if show_caption %>
-        <div class="app-c-impact-header__caption-wrapper">
-          <div class="app-c-impact-header__caption">
-            <%= render "govuk_publishing_components/components/details", {
-              title: "Image details",
-              theme: ("black" unless inverse),
-              inverse: inverse,
-              margin_bottom: 0,
-            } do %>
-              <%= image[:caption] %>
+        <div class="app-c-impact-header__image-wrapper">
+          <div class="app-c-impact-header__image-thing">
+            <%= picture_tag(class: "") do %>
+              <%= tag.source srcset: srcset_string(:desktop, image), media: "(min-width: 769px)" %>
+              <%= tag.source srcset: srcset_string(:tablet, image), media: "(min-width: 641px) and (max-width: 768px)" %>
+              <%= tag.source srcset: srcset_string(:mobile, image), media: "(max-width: 640px)" %>
+              <%= image_tag(image[:sources][:desktop], class: "app-c-impact-header__image", alt: "") %>
             <% end %>
           </div>
+        <%= caption %>
         </div>
-      <% end %>
+      </div>
     <% else %>
       <div class="app-c-impact-header__grid">
         <div class="govuk-grid-row">
diff --git a/app/views/components/docs/impact_header.yml b/app/views/components/docs/impact_header.yml
index c0ed11e833..fd3d837796 100644
--- a/app/views/components/docs/impact_header.yml
+++ b/app/views/components/docs/impact_header.yml
@@ -32,6 +32,20 @@ examples:
           tablet_2x: "/assets/frontend/flexible-pages/example_tablet_2x.jpg"
     context:
       full_width: true
+  with_smaller_image:
+    data:
+      heading: This is the title of the impact header
+      description: This is the description of the impact header, containing words that form a paragraph of text.
+      image:
+        sources:
+          desktop: "/assets/frontend/flexible-pages/example_desktop_1x_landscape.jpg"
+          desktop_2x: "/assets/frontend/flexible-pages/example_desktop_2x_landscape.jpg"
+          mobile: "/assets/frontend/flexible-pages/example_mobile_1x.jpg"
+          mobile_2x: "/assets/frontend/flexible-pages/example_mobile_2x.jpg"
+          tablet: "/assets/frontend/flexible-pages/example_tablet_1x.jpg"
+          tablet_2x: "/assets/frontend/flexible-pages/example_tablet_2x.jpg"
+    context:
+      full_width: true
   with_image_caption:
     data:
       heading: With image caption