Images should be used to supplement text content on the website. This guide will help with sizing and inserting images.
Image Sizes
Use the image sizes and aspect ratios provided below. Do not upload images with smaller widths as that will lead to sub-optimal image quality.
Home Hero/Carousel Image
The home hero/carousel block item has separate image fields for each device type, as each device type has sizing specifications for optimal user experience. The Desktop Image field displays in desktop mode, and images should be 1920px wide by 500px tall. The Tablet Image field displays in tablet mode, and images should be 1000px wide by 325px tall. The Mobile Image field displays in mobile view, and images should be 640px wide by 592px tall.
We recommend you do not use more than six heros on your home page at any time to prevent slow loading times.
There are several options that can overlay the image. This content is horizontally centered on the image.
- A hero title
- Supporting text
- Linked button
Landing and Special Landing Banner Image
The carousel block item found on the Landing (including module landing) and Special Landing page designs has separate image fields for each device type, as each device type has sizing specifications for optimal user experience. The Desktop Image field displays in desktop mode, and images should be 1920px wide by 415px tall. The Tablet Image field displays in tablet mode, and images should be 1000px wide by 306px tall. The Mobile Image field displays in mobile view, and images should be 640px wide by 500px tall.
There are several options that can overlay the image. This content is horizontally centered on the image.
- A hero title
- Supporting text
- Linked button
Images in Content
Text will wrap around images that are smaller than the width of the content area. A good rule-of-thumb for floated images is that they should be no more than half the width of the main content area, unless they are spanning the entire width of the content area. While the actual size is flexible, the recommended size for these images is Xpx wide and Ypx tall.
Images that are oriented to the right are preferred. In the WYSIWYG editor, you can apply right alignment to images as you insert them into the content.
Module Images
News Thumbnail
A thumbnail image for news articles will display within each of the Related News controls found throughout the site. These images should be at least Xpx wide by Ypx tall.
Location Thumbnail
A thumbnail image for locations will display within each of the Location controls found throughout the site. These images should be at least Xpx wide by Ypx tall.
Before You Upload
Follow design and brand standards set forth for image creation. Contact TBD if you have any questions about creating or purchasing images for website use.
Images should be sized correctly before they are uploaded. The CMS is not an image editor.
Use alt tags appropriately to label images.
Images should always be right-aligned unless they occupy the full width of their content area. Images should only be left-aligned when this position is crucial to the understanding of content.