Best hero image sizes for a website

Hero Image Sizing Guide for Desktop & Mobile

Written by: CRO:NYX Team

Published: 20 May, 2023

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 desktop browser resolution sizes in North America are*:

  1. 1920 x 1080: 19.85%
  2. 1366 x 768: 14.33%
  3. 1536 x 864: 9.44%
  4. 1280 x 720: 6.52%
  5. 1440 x 900: 5.92%
  6. 1600 x 900: 2.27%

This does not include mobile browsers, which are obviously going to be smaller. 

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. Depending on your site and your audience, you may be surprised to learn that the majority of people are looking at your site on very small screens. 

For desktop users, the minimum resolution on the most common browser resolutions is 1280 pixels. You should make sure that your hero image is at least 1600 pixels your hero images look great for most desktop users. 

*April 2022- May 2023 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 2023 Image Sizing Guide!

HubSpot Website Grader

Web Design
Best hero image sizes for a website

Written by: CRO:NYX Team

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

Let's Get to Work!

We’d love to chat about how we can help you with your next project.

Get started

Let's Get to Work!

We’d love to chat about how we can help you with your next project.

Get started