Image Specifications

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

H001 – Homepage Hero

Image Cuts and Dimensions (in PX)
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
  • More details on this component are available on its specification page

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

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
  • More details on this component are available on its specification page


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

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
  • More details on this component are available on its specification page


H007 – Compelling Story

Image Cuts and Dimensions (in PX)
Image Cut 1x Dimensions 2x Dimensions Orchard Media Query
Mobile 375 x 475 750 x 950 max-width:375px
Mobile 2 768 x 475 1536 x 950 max-width:767px
Tablet 1024 x 475 2048 x 950 max-width:1024px
Desktop 1600 x 575 3200 x 1150 min-width:1025px


C005 Feature w/ Optional Carousel

Image Cuts and Dimensions (in PX)
Image Cut 1x Dimensions 2x Dimensions Orchard Media Query
Mobile & Tablet 350 x 225 700 x 450 max-width:1280px
Desktop 480 x 350 960 x 700 min-width:1281px


C009 - Latest News and Orchard News Pages

Image Cuts and Dimensions (in PX)
Image Cut 1x Dimensions 2x Dimensions
Fallback Image
This image is used in the Latest News component.		 380 x 225 760 x 450
Image1, Image2, etc.
These images are used on the news pages.		 757 x 448 1,514 x 896


C010 & C011 – Big Feature

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 390 x 500 780 x 1000 max-width:1024px
Desktop 600 x 675 1200 x 1350 min-width:1025px


C045 & C046 – Big Feature Top-Aligned

Image Cuts and Dimensions (in PX)
Image Cut 1x Dimensions 2x Dimensions Orchard Media Query
Mobile 768 x 210 1536 x 420 max-width:767px
Tablet & Desktop 550 x 310 1100 x 620 min-width:768px


C012 - 50/50 x2

Image Cuts and Dimensions (in PX)
Image Cut 1x Dimensions 2x Dimensions Orchard Media Query
Mobile 370 x 303 740 x 606 max-width:375px
Tablet & Desktop 580 x 475 1160 x 950 min-width:376px


C014 - 70/30 x 3

Image Cuts and Dimensions (in PX)
Image Cut 1x Dimensions
Mobile, Tablet & Desktop 360 x 235

Note: The images in this component can't have text overlaid on them with CSS, so if any text is needed, it needs to be part of the actual image.



C016 & C028 Horizontal Tabs and 30/70 Text/Image

Image Cuts and Dimensions (in PX)
Image Cut 1x Dimensions 2x Dimensions Orchard Media Query
Mobile & Tablet 340 x 359 680 x 718 max-width:1024px
Desktop 450 x 475 900 x 950 min-width:1025px


C018 - Full Width Image

Any size(s) can be used. Sizes from other components with full width images are recommended, like H002 - Hero and H007 - Compelling Story.

If using art direction/having images with different aspect ratios isn't necessary, one large image can be scaled down as the browser width shrinks.


P003 - Promo Box No Image Right

Image Cuts and Dimensions (in PX)
Image Cut 1x Dimensions
Mobile, Tablet & Desktop 118 x 150

VN001 Navigation Tiles

Image Cuts and Dimensions (in PX)
Image Cut 1x Dimensions
Mobile, Tablet & Desktop 380 x 225