Using Images

Images should be used to supplement text content on the website. This guide will help with sizing and inserting images.

Homepage

Homepage hero (homepage banner)

Hero/banner images are dominant and demand attention. They usually appear before the content they are intended to represent.

You must upload 3 different sizes of each image. While the images will automatically scale to display at the correct size, do not upload an image in a smaller size as that will lead to sub-optimal image quality.

• Desktop: 1920x700 pixels
• Tablet: 1000x520 pixels
• Mobile: 600x592 pixels

A slide title, content, video button (if applicable), and link button display on each of the images.

We recommend you do not use more than four heroes/banners on your homepage at any time to prevent slow loading times.

---

Secondary pages

Secondary page hero image

Banner images are dominant and demand attention. They appear above the content they are intended to represent.

You must upload 3 different sizes of each image. While the images will automatically scale to display at the correct size, do not upload an image in a smaller size as that will lead to sub-optimal image quality.

Landing page hero images

A headline, text, and button will display on each banner image.

• Desktop: 1920x550 pixels
• Tablet: 1000x409 pixels
• Mobile: 600x592 pixels

Campaign landing hero images

A headline will display on each banner image.

• Desktop: 1920x700 pixels
• Tablet: 1000x520 pixels
• Mobile: 600x592 pixels

Text image feature images

Each of the landing and inner templates have the option to display callouts/calls to action (CTAs). Both CTA types should use images that are are at least 496x290 pixels. While the images will automatically scale to display at the correct size, do not upload an image in a smaller size as that will lead to sub-optimal image quality. 496x496 pixels is the recommended image size.

A callout title, description, and link will appear along with the image.

Text video feature images

Each of the landing and inner templates have the option to display callouts/calls to action (CTAs). Both CTA types should use images that are are at least 290x496 pixels. While the images will automatically scale to display at the correct size, do not upload an image in a smaller size as that will lead to sub-optimal image quality. 496x292 pixels is the recommended image size.

A callout title, description, and link will appear along with the image.

Learn more about CTA image features.

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. We would recommend that images be no more than 450x300 pixels, although the height can be variable if the image is not square.

Images that are oriented to the right are preferred. In the WYSIWYG editor, you can apply the right class to images once you have inserted them into the content.

Content images with caption

When the image with caption code snippet is placed a placeholder image of 300x200 pixels is added. The image to replace it should be no less that 300x200 pixels so that it will display with optimal image quality.

Image photo gallery

Learn about photo gallery features.

---

Before you upload

Follow design and brand standards set forth for image creation.

Upload images to the appropriate location in the media library.

The editor can be used for finding and inserting images into content. If you are unsure where an image should be uploaded, contact the Web Services Department for assistance.

• Images and files can NOT contain underscores (_) within their file names.
• 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 floated right unless they occupy the full width of their content area. Images may be floated left only when this position is crucial to the understanding of content.

Learn more about image and video best practices.