Image Cuts and Dimensions (in PX)

There are three image cuts, and each cut should have a 1x and 2x version. A 2x version is simply double the size of the 1x version. This means 6 total images are needed. Their dimensions are listed below.

Image Cut	1x Dimensions	2x Dimensions	Orchard Media Query
Mobile	768 x 435	1536 x 870	max-width:767px
Tablet	1280 x 390	2560 x 780	max-width:1279px
Desktop	1280 x 590	2560 x 1180	min-width:1280px

Image Creation Notes

• Images do not need a 50% #000000 overlay applied
• Images must be optimized for web to get the lowest file size possible without compromising quality too much
• It's important to note that the banner images don't scale as the browser width changes. For example, as the browser width decreases, the image height remains static, while the left and right sides of the image are cropped off. For this reason, it's important to keep the subject of the image centered when creating the image cuts.

file_downloadExample Images

Suggested Character Counts

• Headline: 70
• Body: 240
• Button: 15-20

Orchard Details

• Content Type: Responsive Banner
• Banner Height: Homepage
• Fallback Image Size: 1280 x 590 px

open_in_newOrchard Screenshot