Use correct image size for Flexible containers in half-width slot

[domlander]

What does this change?

Uses the small image size instead of medium in the half-width layout of the Flexible General & Flexible Special containers.

Why?

We have been serving unnecessarily large images in the Flexible containers half-width layout slot. The width available at the breakpoints is as follows:

• Desktop: 220px
• Tablet: 160px
• Mobile: 122.5px

The small image size matches up to the space available, whereas the medium image size is too large:

case 'small':
	return [
		{ breakpoint: breakpoints.mobile, width: 120, aspectRatio },
		{ breakpoint: breakpoints.tablet, width: 160, aspectRatio },
		{ breakpoint: breakpoints.desktop, width: 220, aspectRatio },
	];

case 'medium':
	return [
		{ breakpoint: breakpoints.mobile, width: 465, aspectRatio },
		{ breakpoint: breakpoints.tablet, width: 330, aspectRatio },
		{ breakpoint: breakpoints.desktop, width: 460, aspectRatio },
	];

Screenshots

The below screenshots show the width available for images in the Flexible General half-width layout slot at the different breakpoints.

mobile
tablet
desktop

Flexible General half-width layout slot example

[github-actions]

Deploy build 19854 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 19854 of dotcom:rendering-all to CODE
• Deploy parts of build 19854 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 44078 of Mobile::mobile-apps-rendering to CODE

All deployment options

• Deploy build 44078 of Mobile::mobile-apps-rendering to CODE
• Deploy parts of build 44078 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

[prout-bot]

Seen on PROD (merged by @domlander 8 minutes and 22 seconds ago) Please check your changes!