In most cases, the default hero image size should be 1600 x 500 pixels with an aspect ratio of 16:9. butno single image resolution is suitable for all users on all network platforms, devices, and operating systems.
Here’s how to make sure your hero images look great to the most visitors who land on your site.
What is a heroic image?
A hero image, also known as a “hero section” or “hero title,” refers to an illustration or photo that is the first thing visitors see after landing on your page. The hero image is at the top of the page, next to the homepage title.
For example, Chewy has multiple fun hero images included in a carousel that automatically change every six seconds if the user doesn’t interact with the navigation arrows.
Generally speaking, the hero image usually appears above the fold and serves three goals:
- To attract the user’s attention
- Describe your website’s unique value proposition (UVP)
- Help users take action, such as purchasing or getting more information about a product
Additionally, hero images can be of various types depending on the main goal of the website:
- carousel photography: For both established and aspiring e-commerce stores and B2C businesses, carousels or product photography are one of the best ways to showcase various offers so that interested customers can know exactly what to expect if they decide to become a customer what happen
- product advantages: If you rely more on the benefits your product can provide than the product itself, it is recommended to include people, places, or events in your hero image that will trigger a positive emotional response in the users who end up browsing your site
- Hiss Scroll: Sizzle reels, also known as show reels, are short videos that showcase the usefulness and benefits of your product or service in a way that takes up very little space on your landing page
- News and promotion based banners: Add statistics, charts, and key features about your products, customers, and industry standards, and even use discounts and limited-time offers to turn your heroes into promotional banners
Tips on how to use hero images
When choosing a hero image, make sure you choose one that adds some kind of value to potential buyers. Whether it’s a static image or a stunning video, your hero image should reflect your company’s values and demonstrate your UVP. Ambiguous or confusing images won’t cut it, so it’s best to avoid stock photos unless they’ve been edited to showcase these unique selling points.
If you’re having a hard time choosing between two or more favorite hero images, it’s recommended that you take a step back and ask a neutral observer to rate them. You can do this through online surveys, help from friends, or using a professional A/B testing platform such as our Crazy Egg A/B testing tool.
Additionally, using eye-catching visuals to differentiate your business from your competitors should be your go-to strategy. Try to avoid general visual styles, such as the now-criticized corporate Memphis art style, and look for something more personal and unique for your brand– If you have the budget and extra time to implement your idea.
For example, you can always use existing web resources to identify a few complementary colors, include them in your design, and add layouts that suit your style. This will make your hero image feel more dynamic, rather than simply lying boringly on your page. If you want to take it a step further, you can also convert existing art styles into 3D models.
However, the hero image is not as important as the title of the article, the structure of the content, or the placement and size of the call-to-action (CTA) button. Finding the perfect hero image won’t be as impactful as you think, so optimizing your title is more important If you want to see results faster.
Hero image size for full screen viewing
For desktop users, the ideal hero image size is 1600 x 500 pixels with an aspect ratio of 16:9. However, this number may vary. For example, a typical hero image for a full-screen viewing experience would be at least 1200 pixels wide and 400 pixels tall.
If you’re willing to sacrifice some page load time to provide a better user experience (UX), we recommend increasing the hero image size to 1800 pixels while maintaining the same 16:9 aspect ratio. This way, you get clearer, better-looking images, but the file size will be larger.
Keep in mind that trying to resize an existing hero image without maintaining the original aspect ratio may result in an unprofessional image that looks squashed, elongated, or downright silly. In this case, use Crop instead of Resize in the image editor.
use Google page speed insights Check for any changes in site performance that may have occurred after uploading new hero images.
Hero image size for mobile devices
Today, more than 50% of global Internet traffic is conducted via mobile phones. If your site isn’t optimized for mobile devices, you could be missing out on half of your potential web traffic due to users who aren’t satisfied with how your site looks on mobile screens.
The optimal hero image size for mobile devices is 800 pixels wide and 1200 pixels high.
Additionally, your hero images must be responsive to look great on both vertical screens (such as smartphones) and horizontal screens (such as tablets used for animation and game development). In web design, a responsive web page is a page that adapts to the device it is accessed on, often changing its dimensions, graphic styles, and animations to meet that device’s standards and best visual practices.
If you are considering using video, you must be very careful. Video works great on desktop computers, but doesn’t perform well in terms of visual flexibility on mobile phones. In fact, they take much longer to load, which is not ideal for users with limited plans that are often found on mobile devices.
Shopify hero image sizes
For Shopify hero, slideshow, and blog post images, it is recommended to use images that are 1920 pixels wide by 1080 pixels high, with an aspect ratio of 16:9.
Puravida, a bracelet maker powered by Shopify, provides an example banner image to give you an idea of how to use white space on your website to naturally create demand for your product.
According to Shopify guidelines, the maximum image size allowed is 4472 x 4472 pixels, and the file size can be up to 20 MB. Unless you work in graphic design or sell professional photos, you don’t need to meet the maximum allowed image size. Even so, it’s better to create thumbnails and smaller sample images rather than uploading full images.
In addition, Shopify also provides the option to upload square images with an aspect ratio of 1:1, which are often used as avatars for various products you will sell in your store. The maximum allowed size for product images is 2048 x 2048 pixels, but we recommend using an image that is 800 pixels wide by 800 pixels high.
Finally, you can also upload collection images and logo images. The maximum allowed size is 1024 x 1024 pixels for collection images and 250 x 250 pixels for logo images, both types of images have an aspect ratio of 1:1.
Hero image sizes for Squarespace
For Squarespace, we recommend using hero images that are at least 2,500 pixels wide.
If you’re unsure of the height, Squarespace will automatically resize your hero image to try and fit the white space of your site into the template you selected. Using larger images ensures that your hero banners remain clear even after resizing and compression using Squarespace’s built-in image tools.
In Squarespace, you can do this by uploading a new hero image to replace the old hero image. background The area of the active template. Depending on which version of Squarespace you are using (either 7.0 or 7.1), the process will be slightly different.
In Squarespace version 7.1, go to Number of pagesthen click editchoose Edit sectionthen go to background. From here, click the “plus” icon to upload the hero image with the correct dimensions.
To do this in Squarespace version 7.0, just go to Number of pages, mediathen click Add picture. You can repeat this process as needed until you are satisfied with the results, or visit Squarespace Official Hero Profile Guide for a more detailed explanation.
Facebook hero image dimensions
Facebook’s hero image or cover photo is best displayed using the following dimensions:
- Desktop 820 x 312 pixels
- 640 x 360 pixels for mobile devices.
Keep in mind that Facebook may crop your cover photo if your dimensions are slightly off, so make sure you include all important messaging, including graphics, promotional copy, and statistics, in the center portion of the image.
Note: Some experts recommend using a cover photo that’s 820 pixels wide by 360 pixels tall to give the image some leeway in case of unforeseen cropping mishaps (Facebook does this automatically). Thankfully, Facebook doesn’t change the aspect ratio of images, which means your hero images won’t be stretched, squashed, or otherwise distorted after uploading.
LinkedIn hero image size
LinkedIn recommends uploading an image that is 1128 pixels wide and 191 pixels high as the cover image on your homepage. For logos, Business Network recommends using a 400 x 400 pixel image with an aspect ratio of 1:1.
LinkedIn Life is the professional business section of the network and suggests the following dimensions:
- For main image: 1128 width x 376 height (in pixels)
- For custom modules: 502 wide x 282 high (in pixels)
- Corporate photo: 900 wide x 600 high (in pixels)
We recommend uploading high-quality, clear images with minimal text to ensure the best viewing experience on all popular devices and their respective screen sizes.
