Hero Image Sizing Guide for Desktop & Mobile

What size should my hero be?

While there is no magic number to hero sizing there are some common guidelines that you should follow when identifying what size and ratio your hero images need to be.

Hero Image Ratios for Mobile, Tablet & Desktop

If your website is responsive, your hero image will resize to fit large or small screens. Depending on how your site was built, it may also resize the aspect ratio. 

Here are the most common aspect ratios for mobile, tablet, desktop and large scree/HD/retina displays. 

What size should your hero image be
 
Phone displays: 4:3
Smart phone displays: 3:2
Tablet & laptop: 16:9
Standard desktop: 2.75:1
Large screen, HD, retina displays: 4:1 
 
Using these image ratios for your hero images will help to keep a 'standard' appearance for the top section of your website and help to managing the sizing of the hero above the fold. 

How Many Pixels Wide Should a Hero Image be?

According to StatCounter, the most common browser resolution sizes in North America are*:

  1. 1920 x 1080 (20.15%)
  2. 1366 x 768 (16.52%)
  3. 1440 x 900 (8.31%)
  4. 1536 x 864 (7.59%)
  5. 1280 x 720 (4.72%)

Typically, the largest and most common screen size your readers will use is 1920 pixels in width. You generally don’t need more than 2000 pixel wide images unless you've noticed in your Google Analytics that your audience has a high volume of visitors on extra large devices. 

The minimum resolution on these most commons browser resolutions is 1280 pixels. You should make sure that your hero image as at least 1600 pixels so you're not falling below that number. 

*May 2020 - May 2021 data

Resizing Hero Images for Mobile

If your website is responsive your hero image dimensions will adjust to fit the device. 

If you want to maintain more control over the size and ratio of the images you can specify that your site show different images depending on if the visitor is on desktop or on a mobile device. 

Need more image sizing guidance? Check out our 2021 Image Sizing Guide!

Topics: HubSpot, Web Design, UX


CRO:NYX Team

Written by CRO:NYX Team

News and articles from CRO:NYX team members & alumni.