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

400px / 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 Checkers

Color contrast checker analyzer tool | Adobe Color

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
Avoid using text in the 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
Avoid using text in the 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
Avoid using text in the images

Suggested Naming Convention

Desktop

24-06_CDAF-banner-desktop

24-06_homepage-banner-desktop

Mobile

24-06_CDAF-banner-mobile

24-06_homepage-banner-mobile

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