What is a banner image?

The banner image, which is also referred to as a hero image, is the very first thing that catches the eye of a user when they land on a web page. It accomplishes three key tasks:

• Capture the attention of users

• Communicate an essential idea or message that sums up what the page is all about

• Keep users from bouncing off the page

Image Details

Image Size for Desktop

1110px / 300px

The height of the image can vary based on requirements of the page. However, we would like to keep it consistent.

Image Size for Mobile

390px / 250px

Background Color

The background color behind the text should be accessible with one of these colors below:

• White text (#FFFFFF)

• Dark Blue text (#18455B)

Available Accessibility Checker

WebAIM: Contrast Checker

Layouts

Desktop Layout 1 - Left aligned header and description

• Right align the graphical elements

• Single-colored or simple gradient background on the left of the image. This will ensure the text placed on the banner is readable and accessible.

• Limit graphics to approximately 470px from the right edge

• Do not use important text in images

Desktop Layout 2 - Center aligned header and description

• Place graphical elements on the left and right edges

• Single-colored or simple gradient background in the center. This will ensure the text placed on the banner is readable and accessible.

• Limit graphics to approximately 250px from the left and right edges

• Do not use important text in images

Mobile Layout - Header and description below the image

• The text will appear below the banner image (built in WordPress)

• Graphical elements can cover the whole image

• Do not use important text in images

Suggested Naming Convention

Desktop

24-06_CDAF-banner-1110x300

24-06_hp-banner-1110x300

Mobile

24-06_CDAF-banner-390x250

24-06_homepage-banner-390x250

Best Practices

File Size

Best if less than 100kb.

Resolution

Some devices display more than 72 dpi. Set images between 144 dpi to180 dpi and export for web to ensure a good quality image on all devices.

Resize

Ensure your chosen hero image is sized appropriately so it displays properly on desktop, tablet and mobile devices. Crop images before uploading (whenever needed).

Accessibility

• Do not use important text in images.

• Add text in WordPress

• Decorative text can be included in images. However, responsive websites often crop images, which might cutoff some text.

File Format

Choose the appropriate file format (JPEG, PNG, or GIF).

• JPEG/JPG
  Ideal for photographs and real-life images due to its ability to compress file sizes significantly while maintaining reasonable quality.

• PNG
  Best suited for images requiring a transparent background. PNG files retain higher quality but often at larger file sizes compared to JPEG images.

• GIF
  Primarily used for animated images.

Optimize quality

It’s important to look for the right file type to save images. Whether it’s a JPG or a PNG, this will help optimize the quality of a hero image.

Exporting as a JPEG in Photoshop

File > Export > Save For Web (Legacy). This brings up the dialogue box image compression.

JPEG will get a much lower file size than a PNG or GIF.

Select JPEG High in the Preset dropdown.

Check the Optimized checkbox.

Set Quality to 80.

Check the Convert to sRGB checkbox.

Save!

Exporting as a PNG in Photoshop for a transparent image

File > Export > Save For Web (Legacy). This brings up the dialogue box image compression.

Select PNG 24 in the Preset dropdown.

Check the Transparency checkbox.

Check the Convert to sRGB checkbox.

Save!