From 36d67de0ab04168185c35af492361b63537b0bc1 Mon Sep 17 00:00:00 2001
From: Isabella-Mitchell <i.mitchell.0707@gmail.com>
Date: Wed, 22 Jul 2026 15:59:33 +0100
Subject: [PATCH] WS-2615-extra: Better handles billboard image on high retina
 displays [copilot]

---
 src/app/components/Billboard/index.test.tsx | 16 ++++++++++++++++
 src/app/components/Billboard/index.tsx      |  7 ++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/app/components/Billboard/index.test.tsx b/src/app/components/Billboard/index.test.tsx
index b9cedfaa889..715538c483b 100644
--- a/src/app/components/Billboard/index.test.tsx
+++ b/src/app/components/Billboard/index.test.tsx
@@ -293,6 +293,22 @@ describe('Billboard', () => {
       maskedImageSpy.mockRestore();
     });
 
+    it('includes a retina (2x) resolution in the srcset so high-DPI screens are not upscaled', () => {
+      render(
+        <Billboard
+          heading={title}
+          description={description}
+          link={link}
+          image={imageUrl}
+          altText={imageAlt}
+          prominence={VISUAL_PROMINENCE.HIGH}
+        />,
+      );
+
+      const image = screen.getByAltText(imageAlt);
+      expect(image.getAttribute('srcset')).toContain('1320w');
+    });
+
     it('renders the curation grid when promo items are present', () => {
       const maskedImageSpy = jest.spyOn(MaskedImage, 'default');
 
diff --git a/src/app/components/Billboard/index.tsx b/src/app/components/Billboard/index.tsx
index fce6712bab7..f1e5ef935af 100644
--- a/src/app/components/Billboard/index.tsx
+++ b/src/app/components/Billboard/index.tsx
@@ -36,6 +36,10 @@ interface BillboardProps {
 }
 
 const IMAGE_WIDTH = 660;
+// 2x the fixed 660px display width (desktop ≥1280px), so high-DPI/retina
+// screens get a sharp source instead of upscaling the 660w image.
+const IMAGE_WIDTH_RETINA = IMAGE_WIDTH * 2;
+const IMAGE_RESOLUTIONS = [240, 320, 480, 624, 800, IMAGE_WIDTH_RETINA];
 const DEFAULT_IMAGE_RES = 480;
 
 export default ({
@@ -87,7 +91,8 @@ export default ({
       createSrcsets({
         originCode,
         locator,
-        originalImageWidth: IMAGE_WIDTH,
+        imageResolutions: IMAGE_RESOLUTIONS,
+        originalImageWidth: IMAGE_WIDTH_RETINA,
       });
     const srcWebp = buildIChefURL({
       originCode,