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.
How Many Pixels Wide Should a Hero Image be?
According to StatCounter, the most common browser resolution sizes in North America are*:
- 1920 x 1080 (20.15%)
- 1366 x 768 (16.52%)
- 1440 x 900 (8.31%)
- 1536 x 864 (7.59%)
- 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!
