Images Overview

2x (high resolution) images are optional, but are recommended for the best experience on devices with high resolution displays (mobile phones, tablets, etc.)

Banners have a static height at all browser widths. As the browser width changes, the image remains centered, while the left and right sides are revealed as the width increases, and cropped as the width decreases. For this reason, it's important to keep the subject of the image somewhat centered.

Home page and other non-product page banners are full browser width. Promotion banners have a max width of 1280px.

There are 4 image cuts (3 if the component will be used as a promotions banner) that have different aspect ratios. This allows us to deliver the appropriate file size depending on the user's device, and it also allows for art direction. The image dimensions needed are listed in the table below.

Image Creation Notes

• All images must have a 50% #000000 overlay applied. Doing this in Photoshop vs. through CSS helps to decrease file size
• 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.

H002 - Hero

Image Cuts and Dimensions (in PX)

Image Cut	1x Dimensions	2x Dimensions	Orchard Media Query
Mobile	375 x 400	750 x 800	max-width:375px
Mobile 2	768 x 400	1536 x 800	max-width:767px
Tablet	1280 x 400	2560 x 800	max-width:1280px
Desktop*	1600 (minimum) x 400	3200 (minimum) x 800	min-width:1281px
* This image cut is not needed for promotion banners.

file_downloadExample Images  file_downloadBanner Templates (PSD)

Suggested Character Counts

• Headline: 50
• Body: 150
• Button: 15-20

Orchard Details

• Content Type: Responsive Banner
• Banner Height: Normal
• Fallback Image Size: 1280 x 400 px

open_in_newOrchard Screenshot

H003 - Mini Hero

Image Cuts and Dimensions (in PX)

Image Cut	1x Dimensions	2x Dimensions	Orchard Media Query
Mobile	375 x 300	750 x 600	max-width:375px
Mobile 2	768 x 300	1536 x 600	max-width:767px
Tablet	1280 x 300	2560 x 600	max-width:1280px
Desktop	1600 (minimum) x 300	3200 (minimum) x 600	min-width:1281px

Suggested Character Counts

• Headline: 50
• Body: 120

Orchard Details

• Content Type: Responsive Banner
• Banner Height: Mini
• Fallback Image Size: 1280 x 300 px