diff --git a/.storybook/themeCFPB.js b/.storybook/themeCFPB.js
index 9b52357bf1..36c014910a 100644
--- a/.storybook/themeCFPB.js
+++ b/.storybook/themeCFPB.js
@@ -1,5 +1,5 @@
 import { create } from 'storybook/theming/create';
-import CfpbLogo from '../src/assets/images/cfpb-logo.png';
+import CfpbLogo from '../src/assets/images/cfpb-header/logo-237w.png?url';
 
 const colors = {
   black: '#101820',
diff --git a/src/assets/images/cfpb-header/logo-161w.png b/src/assets/images/cfpb-header/logo-161w.png
new file mode 100644
index 0000000000..67b9c9f15c
Binary files /dev/null and b/src/assets/images/cfpb-header/logo-161w.png differ
diff --git a/src/assets/images/cfpb-header/logo-237w.png b/src/assets/images/cfpb-header/logo-237w.png
new file mode 100644
index 0000000000..c76398d8f4
Binary files /dev/null and b/src/assets/images/cfpb-header/logo-237w.png differ
diff --git a/src/assets/images/cfpb-header/logo-322w.png b/src/assets/images/cfpb-header/logo-322w.png
new file mode 100644
index 0000000000..9bdc00e3de
Binary files /dev/null and b/src/assets/images/cfpb-header/logo-322w.png differ
diff --git a/src/assets/images/cfpb-logo.png b/src/assets/images/cfpb-header/logo-474w.png
similarity index 100%
rename from src/assets/images/cfpb-logo.png
rename to src/assets/images/cfpb-header/logo-474w.png
diff --git a/src/assets/images/cfpb-header/logo-483w.png b/src/assets/images/cfpb-header/logo-483w.png
new file mode 100644
index 0000000000..13f74f9b99
Binary files /dev/null and b/src/assets/images/cfpb-header/logo-483w.png differ
diff --git a/src/assets/images/cfpb-header/logo-644w.png b/src/assets/images/cfpb-header/logo-644w.png
new file mode 100644
index 0000000000..46374e6cc8
Binary files /dev/null and b/src/assets/images/cfpb-header/logo-644w.png differ
diff --git a/src/components/Header/responsive-menu.scss b/src/components/Header/responsive-menu.scss
index f6a18e2f70..2677e063ec 100644
--- a/src/components/Header/responsive-menu.scss
+++ b/src/components/Header/responsive-menu.scss
@@ -31,29 +31,27 @@ $max-width: $breakpoint - 0.0625em;
         align-items: center;
       }
 
+      // Slot widths match logo `sizes` on consumerfinance.gov: 161px ≤900px, 237px above.
       .o-header__logo {
-        min-width: 237px;
+        min-width: 161px;
+
+        @media (min-width: $breakpoint) {
+          min-width: 237px;
+        }
 
         @media (max-width: $max-width) {
           border-left: 1px solid var(--gray-40);
           padding-left: 15px;
-          .o-header__logo-img {
-            height: 40px;
-          }
         }
       }
 
       .o-header__logo-img {
-        height: 34px;
+        display: block;
+        height: auto;
+        width: auto;
+        max-width: 100%;
         margin-top: 10px;
         margin-bottom: 10px;
-        vertical-align: middle;
-      }
-
-      @media (min-width: $breakpoint) {
-        .o-header__logo-img {
-          height: 50px;
-        }
       }
 
       .menu-toggle {
diff --git a/src/components/Header/responsive-menu.test.tsx b/src/components/Header/responsive-menu.test.tsx
index a00cf58326..bb4713c94d 100644
--- a/src/components/Header/responsive-menu.test.tsx
+++ b/src/components/Header/responsive-menu.test.tsx
@@ -35,7 +35,9 @@ describe('ResponsiveMenu', () => {
     expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
 
     expect(screen.getByTestId('CfpbLogoLink')).toBeInTheDocument();
-    expect(screen.getByAltText('CFPB Logo')).toBeInTheDocument();
+    expect(
+      screen.getByAltText('Consumer Financial Protection Bureau'),
+    ).toBeInTheDocument();
   });
 
   it('renders with custom links', () => {
diff --git a/src/components/Header/responsive-menu.tsx b/src/components/Header/responsive-menu.tsx
index fb47d12ac8..d85bd38279 100644
--- a/src/components/Header/responsive-menu.tsx
+++ b/src/components/Header/responsive-menu.tsx
@@ -1,12 +1,27 @@
 import React, { JSX, useCallback, useState } from 'react';
 import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import CFPBLogo from '../../assets/images/cfpb-logo.png';
+import logo161w from '../../assets/images/cfpb-header/logo-161w.png?url';
+import logo237w from '../../assets/images/cfpb-header/logo-237w.png?url';
+import logo322w from '../../assets/images/cfpb-header/logo-322w.png?url';
+import logo474w from '../../assets/images/cfpb-header/logo-474w.png?url';
+import logo483w from '../../assets/images/cfpb-header/logo-483w.png?url';
+import logo644w from '../../assets/images/cfpb-header/logo-644w.png?url';
 import { Button } from '../Buttons/button';
 import { Icon } from '../Icon/icon';
 import Link from '../Link/link';
 import type { JSXElement } from '../../types/jsx-element';
 import './responsive-menu.scss';
 
+/** Matches consumerfinance.gov header logo `srcset` (see static/img on the live site). */
+const CFPB_HEADER_LOGO_SRCSET = [
+  `${logo161w} 161w`,
+  `${logo322w} 322w`,
+  `${logo483w} 483w`,
+  `${logo644w} 644w`,
+  `${logo237w} 237w`,
+  `${logo474w} 474w`,
+].join(', ');
+
 interface CfpbLogoProperties {
   href?: string;
 }
@@ -22,7 +37,15 @@ export function CfpbLogo({
       aria-label='Home'
       className='o-header__logo'
     >
-      <img className='o-header__logo-img' src={CFPBLogo} alt='CFPB Logo' />
+      <img
+        alt='Consumer Financial Protection Bureau'
+        className='o-header__logo-img'
+        height={50}
+        sizes='(max-width: 900px) 161px, 237px'
+        src={logo237w}
+        srcSet={CFPB_HEADER_LOGO_SRCSET}
+        width={237}
+      />
     </Link>
   );
 }