YALB-1297: Media: Verify images are using optimized styles

[joetower]

YALB-1297: Media: Verify images are using optimized styles

Description of work

• CTA Banners = 🟣 - minor change added to PR
• Grand Hero = ✔️ (no changes needed)
• Image / Content Image = ✔️ (no changes needed)
• Content Spotlight = 🟣 - minor change added to PR
• Custom Cards & Media Grid / 3:2 card secondary = 🟣 - minor change added to PR
• Views - Posts - List/Grid 3:2 card list = 🟣 - minor change added to PR
• Card List Featured | Responsive image style = 🔴 - minor change added to PR - However, this style is not currently in use.

Functional testing steps:

• Review the test page here: https://pr-351-yalesites-platform.pantheonsite.io/page-all-media-images
• Using the web inspector, inspect each image on the page. Test each at various breakpoints.

Desktop

yalb-1297-reponsive-images.mp4

Mobile

yalb-1297-reponsive-images-mobile.mp4

• Verify appropriately sized images are served for each component. Some images may be served slightly larger (<= 200px) than the exact pixel value, but that is because the image style is used for varying-width components. For example, the Content Spotlight can have a medium or large image size, or the focus can change. An image size was chosen based on the larger of the two required image sizes.

[github-actions]

Created multidev environment pr-351 for yalesites-platform.

[dblanken-yale]

This is neat to see; I've not dealt with images in Drupal much. It all looks to load the different versions fine.