Download a free workbook to help you design your site with confidence.
The email you entered is invalid.
Thank you for subscribing.
By entering your email, you indicate that you have read and understood our Privacy Policy and agree to receive marketing from Squarespace.
Website visitors develop their first impression within seconds. If something doesn’t grab their attention immediately, you risk losing their focus for good. Whether a user stays on one webpage or ventures further on is determined in part by your website's design. A key part of that is your website’s hero image.
A website hero image, sometimes referred to as a banner hero image, is a header image that’s meant to capture attention and get visitors to stay on a website. Website hero images usually communicate something about your business or brand and direct visitors toward some kind of action, such as clicking into product pages.
The web design elements on your website are a critical brand narrative element, and the image or video you select for a homepage’s background is the first step.
- There are a few traditional and non-traditional types of hero images you can use for your website including text, animation, or video.
- Image or video file size and dimensions matter for a smooth user experience.
- Adding a strong call to action (CTA) optimizes for both the visual of the hero image and the action you want a user to take.
What is a website hero image?
A website hero image is the large photo, illustration, or video that appears at the top of a webpage, near the navigation bar. These images usually appear on the homepage of a website and act as a focal point. They’re often overlaid with a CTA or headline copy.
Sometimes hero images even take up the entirety of a homepage. But size and type depend on what you want the hero to inspire. You may also have hero images on product, store, about, or contact pages on your site.
A good rule of thumb is to use a hero image when you want to draw attention to one specific message, give a page more importance, or if the image contributes to the purpose of the page. For example, a hero image elevates the importance of a store or product page, while an image of your team can tell your business story on an about page.
5 types of website hero images
There are multiple ways to use a hero image and different types to explore and use. Below are five common types of website hero images, including traditional options, such as a full-screen background image, and non-traditional ones, like animations or a carousel.
1. Static image with text overlay
A static image is one of most common hero types to engage visitors. This image doesn’t need to take up the entirety of the page, but usually takes up a significant amount of the “above the fold” space—i.e., the first part of the page someone sees.
The text overlaid on this typically includes a headline summarizing your business and/or a CTA pointing visitors to an important page. The goal is to draw attention with an image that fits your brand and introduces your mission or what you’re all about.
The Crosby website template is an example of a full background static image with minimal text overlay. It’s clean, concise and, with the right photo, can leave a lasting impression.
2. Full-screen background image
A full-screen background image for your website hero is an evocative and effective way to draw visitors in. For example, many fashion businesses choose a full-screen hero image because it showcases their product(s) in an editorial and interesting way. It also creates deeper engagement between you and the user.
Like the static image, full-screen hero images are usually overlaid with a headline and CTA. For this website hero image to be effective, images need to be high-resolution to drive impact, but not slow down responsiveness on the webpage.
The Belisa template is an example of a full-background image with text that pairs clear navigation with a stunning photograph.
3. Background video hero
Using a video for a website hero image or banner is one non-traditional way to create a more immersive experience with your potential customer. A video allows you to feature more products or tell more of your brand story in an interesting way.
However, a high-quality video requires more planning to produce and get right. For the best user experience, consider keeping the video relatively short or easy to loop; something that won’t stall or bog down the website’s performance.
Squarespace’s Strade template features a video on loop with text off to the side so that it doesn’t interfere with the focal point of the hero image.
4. Carousel of images
The majority of these website hero image types use only one image or one video. If you’d like to have multiple images that showcase products, promotions, or content, consider using a carousel for your website hero.
These images are usually similar in size to a traditional header image, just with more images to showcase more information or products. The carousel can scroll automatically or have a manual scroll.
Keep the number of images you use in a carousel somewhere between three and five. If more is warranted, use your judgement, but it’s best to keep these fast and easy to get through, so visitors don’t feel overwhelmed.
The Jotter Press template is an ideal example: two narrow arrows on the bottom allow users to shuffle through the images.
5. Animated hero
To stand out or experiment with another less traditional design, try animated website hero images. This visual can flex your creative edge, show off your brand personality, and keep visitors engaged with your page.
Animated website hero images can be incredibly useful for graphic designers or artists, for example. In addition to your portfolio, an animated hero can demonstrate your skills to potential clients.
Similar to videos and carousels, keep user experience in mind. Make sure animations don’t slow down your page, feel overwhelming, or limit the accessibility of key information on your site.
The Otroquest template showcases a subtle, clean animation that slides the hero onto the page when it loads. You can play with different animation styles or animation just one part of a header
Website hero image best practices
A website hero invites visitors to continue their journey, discovering your products, offerings, or mission. There are a few best practices to consider to maximize impact and show off your creativity.
1. Focus on your brand’s story
Your website hero image is an early impression for your website visitors. Use the opportunity to visually show what your brand is about. For example, you may sell print-on-demand t-shirts. Depending on what the actual designs are on the t-shirts, you can showcase your brand’s narrative by selecting images of a model wearing the product in a carousel, or incorporating colorways and design elements in the hero image.
Either way, your hero image—no matter the style—can give visitors a concise snapshot of what your website and brand is about.
2. File format, size, and dimensions matter
A critical best practice in any type of design is using the right file format, size, and dimensions. Not all website hero images are created equal for a user’s experience. To optimize your hero image, choose a high-resolution, quality image that will look good on desktop or mobile screens.
These are good starting points to optimize your hero image:
Mobile: 800 pixels in width by 1200 pixels in length
Desktop: 1600 pixels wide by 500 pixels long or 1920 pixels wide by 1080 pixels long
Aspect ratio: 16:9
File size: 10 to 20 MB
File type: JPEG or PNG for images, MP4 or MOV for video
That said, screen sizes and devices vary. Ideally, you’ll have a website platform that’s responsive, meaning it’ll adapt your website to different screen sizes. When in doubt, test the image quality and load time of your site on a few browsers and screens.
3. Prioritize accessibility
To keep the user’s experience front and center, consider what you need to make your hero image accessible. If it’s a video with dialogue, do you need captions? Does your static image require alt text? Are there other elements that you could add, like a pause button for video or animations?
Many website building platforms can help you optimize and prioritize accessibility for visitors with different needs.
Read our guide to website accessibility
4. Add a clear CTA
Keep your CTA clear, concise, and easy to locate. Your hero image is doing most of the lifting for brand storytelling and enticing your user to explore your website. If you want that user to do a specific thing—such as check out a new line of handmade candles or book an appointment with you—use your CTA to guide them there.
See CTA examples and best practices
5. Test website hero images
Not all hero images are going to make an impact on your audience. Part of the fun of marketing your business and setting up your website is testing out which image lands the most impact.
Review your website data to ensure your hero is still effective. If you notice an increase in quick exits from a page with a hero image or find visitors aren’t clicking your CTA, that may be a sign it’s time for a change. Run a test with a new image to see if that changes visitor behaviors.