Image guidelines for adaptive and fixed-height hero banners on interior pages

Header images are great for drawing visitors into a page and leaving an impression. You want to use images that fit your brand, but it's also important to make a selection that fits your site's design, as well. Depending on the style of your site's header banner, some prep work may be necessary to ensure that your content looks good on all devices.

Fixed height banners

If your site features a hero banner with a fixed height (or max-height), then your images will crop to fit the height set by the design.

Adaptive height banners

If your site features a hero banner with an adaptive height (or full height), then your images will scale with the screen without cropping.

Guidelines before uploading

• For best results, select an image with a central focal point (such as faces or points of interest). Fixed-height banners will clip the edges on an image and keep the center in focus on any screen size.

• Be sure to resize your image to match the target dimensions provided by the developer in the Site Notes within the Production branch of your site in Composer.

  • Be careful not to stretch the image when resizing. In some cases, you may need to crop your image so that it matches the aspect ratio of the recommended dimensions.

    For more information about aspect ratios, please check out this article.

• It's recommended to avoid using text on the image itself. If your banner supports captions, we recommend using those as a way to display text.

• If your banner uses the Resource module, compressing the image before uploading is not necessary (as they will be compressed automatically).