Image Styles

Create the following Image Styles:

Name	Machine name	Dimensions	Effect
16:9 285x160	16_9_285x160	285 x 160	Scale and Crop
16:9 450x253	16_9_450x253	450 x 253	Scale and Crop
16:9 570x320	16_9_570x320	570 x 320	Scale and Crop
16:9 900x506	16_9_900x506	900 x 506	Scale and Crop
16:9 1200x675	16_9_1200x675	1200 x 675	Scale and Crop
16:9 2200x1238	16_9_2200x1238	2200 x 1238	Scale and Crop

Create the following Responsive Image Styles:

Name	Machine name	Breakpoint Group	Fallback Image
Movie Card	movie_card	Responsive Image	16:9 450x253
Hero	hero	Responsive Image	16:9 1200x675

Apply the following configuration under 1X Viewport Sizing

Movie Card

Type	Select multiple image styles and use the sizes attribute.

Sizes

(min-width: 768px) 50vw, (min-width: 1040px) 33vw, (min-width: 1200px) 25vw, 100vw

Image Styles

16:9 1200x675 16:9 2200x1238 16:9 285x160 16:9 450x253 16:9 570x320 16:9 900x506

Fallback Image Style

16:9 450x253

The beauty of these image styles is that they are aspect ratio-based rather than specific image dimensions. When possible, this is recommended as this makes the image styles more reusable and therefore reduces the number of image styles to be created and maintained.