Homepage Banner / Hero Image(s)

Owned by Amrita.Biswas
Last updated: Jan 08, 2025
4 min read

 

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

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

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!

Layouts

Layout-1 (Desktop).png

  • 1110px / 300px (the height of the image can vary)

  • 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

Layout-1 (Mobile).png

 

  • 390px / 250px (the height of the image can vary)

  • Text will be built in WordPress and will appear below the banner image

  • Avoid using text in the images

Image A (Left)

  • 730px / 350px (the height of the image can vary)

  • 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 375px from the right edge

  • Avoid using text in the images

Image B (Right)

  • 350px / 350px (the height of the image can vary)

  • Avoid using text in the images

  • Same image will be used for desktop and mobile

 

Image A (Mobile)

  • 390px / 250px (the height of the image can vary)

  • Avoid using text in the images

  • 540px / 400px (the height of the image can vary)

  • Avoid using text in the images

  • Same image will be used for desktop and mobile

  • 350px / 350px (the height of the image can vary)

  • Avoid using text in the images

  • Same image will be used for desktop and mobile

 

Image A (Left)

  • 730px / 400px (the height of the image can vary)

  • 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 375px from the right edge

  • Avoid using text in the images

Image B and Image C

  • 350px / 200px (the height of the image can vary)

  • Same image will be used for desktop and mobile

 

Image A (Mobile)

  • 390px / 250px (the height of the image can vary)

  • Avoid using text in the images