WS-2615-extra: Better handles billboard image on high retina displays…

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');
 

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,