Website Hero Image: Best Practices and Examples (2026)

A website hero image is the large, prominent visual, or series of visuals, displayed at the top of a website’s homepage. Also called a hero banner or hero section, it’s one of the first things a visitor sees when they land on your site, which makes it one of the most valuable pieces of real estate in ecommerce.

Done well, a hero image communicates your brand instantly and gives visitors a reason to keep scrolling.

Ahead, get best practices for using website hero images effectively and tools to help you create ones that convert.

What is a website hero image?

A hero image is a large photo, video, or illustration placed at the very top of a web page, directly beneath the header and navigation bar. That position—above the fold, before a visitor has scrolled—makes it the first visual element most people encounter on your site. It’s the one doing the heaviest lifting for first impressions.

Hero images appear across different page types, but they earn their keep in specific contexts:

• On a homepage, the hero section sets the tone for your entire brand. 
• On a product page, it puts what you’re selling front and center, giving shoppers the visual context they need to commit. 
• On a campaign or landing page, it anchors a promotion, like a seasonal sale, with a single image that makes the offer feel worth clicking. 

For B2C and product-driven brands like apparel and homeware, hero images are close to essential, like how Gymshark draws attention to a special offer on matching sets:

For highly task-oriented websites like banking dashboards or software-as-a-service (SaaS) tools, an elaborate hero section may actually get in the way. 

Types of website hero images

Your hero image is a visual hook that should pull visitors in. From bold backgrounds to interactive carousels, each format shapes how visitors perceive your store and whether they keep scrolling.

The format you choose matters as much as the image itself, because what works for a single-product lifestyle brand will fall flat for a retailer with hundreds of SKUs and a different story to tell.

Here are some hero image examples and best practices for each option.

1. Full-screen background hero images

Full-screen background visuals occupy the entire viewport to create an immersive experience and set the stage for your brand’s narrative.

This format is most effective when your brand has a strong visual identity and a clear, singular story to tell at any given moment. Lifestyle-driven brands like fashion, beauty, travel, and homeware, tend to get the most out of it, because the format lets the world around the product do as much work as the product itself.

Glossier’s homepage is a textbook example. A close-up, editorial-quality shot of skin alongside the Futuredew oil serum fills the entire viewport, with a minimal headline and a single call to action (CTA): “Glow now.”

2. Slideshow or carousel images

Slideshows and carousels work for brands with multiple offerings or seasonal highlights. This format lets you tell multiple stories without demanding more real estate; each slide gets its moment without competing with the others on the same screen.

In the example below, e.l.f. Cosmetics runs a four-panel carousel that treats each slide as its own self-contained campaign. It also displays an accessibility widget directly alongside their hero, a small but deliberate signal it’s built inclusive design into its storefront experience.

Here are some best practices for hero image carousels to improve accessibility and/or overall experience:

• Limit to three to five slides to avoid information overload.
• Design with user-controlled navigation; the dot indicators in the example above let users move through slides at their own pace.
• Ensure each slide and message can stand alone without context from the others.
• Optimize image loading speed to prevent lag and reduce bounce rates caused by slow load times.
• Include pause or stop controls for users who prefer static content; auto-rotating carousels can be disorienting for some visitors, and giving users control helps.

3. Static image with text overlay

A static image with a text overlay balances visual appeal with clear messaging. This format works wonders for promotions, new arrivals, or brand introductions.

Little Words Project’s “Introducing BOLDER” hero is a clean example: a dark text panel on the left, product photography on the right, one sharp CTA. 

4. Video backgrounds

Video backgrounds add a layer of movement to engage visitors. These can be effective for lifestyle brands or services that benefit from storytelling.

Lois Jeans, for example, uses a slow, cinematic video on its homepage to introduce its spring/summer ’25 collection, Número Veintidós.

This approach works particularly well for fashion, fragrance, interiors, and hospitality—categories where the emotional context around a product is part of what consumers are buying. But it’s less suited to high-intent shopping environments where visitors arrive knowing what they want and need to find it fast.

Here are some best practices for video hero backgrounds:

• Keep the video short and looped; 10 to 30 seconds is enough to establish the atmosphere without demanding attention.
• Mute audio by default; Autoplay with sound is one of the fastest ways to lose a visitor.
• Include a pause control for users who find motion distracting or have vestibular sensitivities.
• Respect the prefers-reduced-motion browser setting; users who have enabled this accessibility preference should be served a static image instead of the video automatically.
• Always have a static image fallback for slow connections and mobile users where video may not load reliably.
• Keep the file size lean because video that takes more than a few seconds to load takes away from the experience.

5. Animated hero images

Animated hero images sit between static photography and full video: more dynamic than a still image, lighter to load than a video file, and increasingly viable as web animation technology matures. 

According to a survey of over 350 marketing professionals by Breadnbeyond, 42.5% reported a surge in engagement metrics after incorporating animation into their marketing, while 34.5% saw an improvement in average time spent on their website.

Spicy Margarita, a B2B SEO agency, leads with two words—“Fiery. Daring.”—set in oversized type against a black background, with small animated illustrated elements drifting in the periphery. 

This format works particularly well for service businesses and creative agencies where the offering is intangible and the visual job is to communicate tone and credibility rather than showcase a physical product.

Here are some best practices for animated hero backgrounds:

• Treat typography as a design element; scale, weight, and spacing all contribute to the impression.
• Use illustration to add personality and warmth, but keep it restrained; decorative elements should support the message.
• Ensure sufficient contrast between text and background for readability across all devices.
• If including animated elements, respect the prefers-reduced-motion browser setting and provide a static fallback.
• Keep the value proposition clear, because without a product image to anchor the visitor, your copy needs to work harder—and faster.

Website hero image best practices

A perfect hero image draws visitors in, communicates your brand’s identity, and ultimately nudges your customers toward following your CTA. But it takes more than just a pretty picture to make a difference. Details such as loading speed, image quality, text readability, and call to action all contribute to how effective a hero image’s first impression can be.

Make your hero image stand out with these best practices.

1. Optimize for loading speed

Keep your hero images lightweight by compressing them with free online tools, and choose your file format based on what your image needs to do.

• AVIF: Best for maximum compression with the highest visual quality.The newest format of the four, AVIF delivers significantly smaller file sizes than both WebP and JPEG at equivalent quality. Browser support is strong in modern browsers, but not yet universal, so always ensure a WebP or JPEG fallback is in place.
• WebP: Best for most hero images. According to Google, WebP lossless images are 26% smaller than PNGs, and lossy WebP images are 25% to 34% smaller than comparable JPEGs at equivalent quality. 
• JPEG: Best for photographs and complex images with lots of color gradients where you don’t need transparency; widely supported and compresses well, but larger file sizes than WebP at same quality.
• PNG: Best for images that require a transparent background like product cutouts or illustrated elements layered over a background color. Larger file sizes make it less ideal for full-screen hero backgrounds.

Tip: If you’re a Shopify merchant, your theme automatically handles image optimization through Shopify’s CDN. Shopify detects which formats your customer’s browser supports and serves the best option available, whether that’s AVIF, WebP, or JPEG. For theme developers, learn how to write responsive image code using the image_url Liquid filter.

2. Use high-quality images

Low-quality, pixelated images signal unprofessionalism, which can erode trust before a visitor has read a single word. Invest in high-resolution images aligned with your brand’s personality and the emotional register of what you’re selling.

David’s Bridal gets this right. Their hero uses two richly detailed editorial photographs side by side. The photography is selling the feeling of a wedding day, not just the dress. For a brand where the purchase is one of the most emotional of a customer’s life, that’s exactly the right call.

According to Salsify’s 2025 Consumer Research Report, 77% of shoppers say product images and videos are extremely or very important when deciding to complete a purchase, and 42% have abandoned a sale specifically because of no or low-quality product imagery.

If budget allows, invest in custom photography or original illustrations over stock imagery. Brand-specific visuals—images that could only belong to your store—create a stronger connection with your audience and are harder for competitors to replicate.

“[Product photography] is one type of photography that you need, but you also need photography of people so people can really relate and see, ‘It’s going to look like this on me.’ I’m trying as well to have different types of skin colors and bodies to show the jewelry on different types of people,” says Camille Ouellette, owner of Camillette. 

3. Ensure text is readable

A busy background can bury your headline before a visitor has a chance to read it, so use contrast, shadows, or semi-transparent overlays to keep text legible at every screen size.

Allbirds solves the readability problem with scale. “50% OFF” is set so large it reads instantly; the lamb bounding through the middle of the type is the punchline. And the gradient sky gives the smaller copy a clean enough surface to sit on.

According to WebAIM’s 2025 analysis of one million home pages, low contrast text was the single most common website accessibility failure, found on 79.1% of home pages, with an average of 29.6 distinct instances per page. Readable hero text, for a significant portion of your visitors, is the difference between engaging with your page and leaving it.

Before publishing, run your text and background color combination through a contrast checker to make sure it’s readable for visitors with low vision or color blindness. WebAIM’s Contrast Checker and Coolors are both free and measure against Web Content Accessibility Guidelines (WCAG) standards: the minimum is a 4.5:1 contrast ratio for body text, and 3:1 for large display type.

4. Include a strong CTA

Your call to action, or CTA, should be concise and compelling, urging visitors to engage by giving them clear direction. Vague or clever CTAs make visitors work harder than they should, whereas “Shop Now,” “Explore,” or “Get Started” work because they’re unambiguous about what happens next.

For example, Mejuri’s homepage has a full-screen editorial close-up, a six-word headline— “Jewelry You Can Live In”—and a single underlined “Shop Now” beneath it.

For a brand built on understated luxury, a cluttered hero would undercut the entire aesthetic, while a complicated CTA would break the mood.

The button should contrast with both the hero image and any overlay; and it shouldn’t compete with the headline, but it can’t disappear into the background either.

Keep it short—five words or fewer; the hero isn’t the place for nuance. Also, CTA buttons should be focusable and operable by keyboard alone because not every visitor uses a mouse. A button that can’t be reached via the Tab key is invisible to a significant portion of your audience, including users with motor impairments and screen reader users. 

5. Consider hero image size and dimensions

An impactful hero image looks great on any screen size, but that requires thoughtful responsive web design. That means the essential elements, like the main image, text, and CTA, are centered and visible. Mobile devices now account for nearly 60% of global website traffic, so your hero image isn’t primarily a desktop experience any more.

For the best resolution across large displays, Crazy Egg recommends scaling up to 1800 pixels wide on desktop while maintaining the 16:9 ratio; though this comes at the cost of a larger file size.

The 16:9 ratio is standard for desktop hero images and the most versatile. It can be cropped to other common ratios like 1:1 for mobile without losing the essential composition. For mobile-first designs, a taller 2:3 portrait ratio fills the screen more naturally and keeps text and CTAs in the visible area without requiring the visitor to scroll.

File size has a direct impact on conversion. Google’s Core Web Vitals standard requires the Largest Contentful Paint, typically your website hero image, to load within 2.5 seconds.

6. Build for a mobile-first customer experience

VML’s 2025 Future Shopper Report found that 42% of all online sales now occur on mobile. Yet two in five shoppers still say the mobile experience falls short of their expectations. That gap is a direct conversion problem.

Kylie Cosmetics shows what closing that gap looks like in practice. On desktop, the hero runs as a split layout: full-bleed model photography on the right, headline and CTA on the left. 

On mobile, the same image stacks full-width above the fold, with the headline, description, and CTA recomposed below on a pale panel.

Your mobile-first checklist for hero images:

• Are you using separate mobile-optimized image assets? Upload a dedicated vertical crop for mobile rather than relying on automatic scaling. Aim for 800 by 1200 pixels and center your focal point.
• Are your CTA buttons large enough to tap? Google recommends a minimum touch target size of 48 by 48 pixels.
• Have you tested on real devices? Browser responsive emulation is a useful starting point but doesn’t replicate real-world rendering. Test on at least one iOS and one Android device before publishing.
• Is critical content away from the edges? Keep text and CTAs within a central safe zone.

7. Make hero images accessible

The World Health Organization (WHO) estimates that more than 1.3 billion people globally live with a disability. Accessibility is now a mounting legal liability for ecommerce store owners. Ecommerce websites were the primary target in 2024, representing 77% of all web accessibility lawsuits. 

For context on the costs: Fashion Nova settled a web accessibility class action for $5.15 million in 2025—the largest web accessibility settlement on record. US store owners operating in or serving EU customers also need to be aware of the June 2025 enforcement of the European Accessibility Act.

The most commonly cited violations included missing alternative text for images, poor color contrast, and forms that couldn’t be completed using a keyboard.

Here’s what to check:

• Have you written meaningful alt text? Alt text should convey purpose and context. If the image is purely decorative, use an empty alt attribute (alt="") so screen readers skip it entirely rather than reading out a file name.
• Does your text meet contrast requirements? WCAG AA requires a minimum 4.5:1 contrast ratio for body text and 3:1 for large display types. Run it through WebAIM’s contrast checker before publishing.
• Have you added motion controls? For animated hero images, carousels, and video backgrounds, users with vestibular conditions can experience disorientation from persistent motion. Include a visible pause or stop control and respect the
  prefers-reduced-motion browser setting so users who’ve opted out of motion automatically see a static fallback.
• Is your CTA keyboard-navigable? Every interactive element in your hero must be reachable and operable via keyboard alone. Tab through the section before publishing.
• Are your images labeled at the code level? Descriptive file names, alt text, and proper heading structure around your hero all contribute to how assistive technology reads and search engines index your page.

Tip: On Shopify, you can add alt text to product images directly from your admin, and to all other theme images, including your hero, from the theme editor. If you’re developing or customizing a Shopify theme, integrate the Shopify Lighthouse CI GitHub action into your CI process to automatically flag accessibility regressions before they ship.

How to create a website hero image for your online store

Creating a well-designed and attention-grabbing hero image helps draw new website visitors in and encourages them to explore more of your products.

Follow this step-by-step guide to create a website hero image for your online store.

1. Use high-quality imagery

Draw in new customers with stunning photos of your products or brick-and-mortar store. Use your own product photography or hire a photographer to take high-quality product photos, if it’s within your budget.

If not, stock photography is a legitimate starting point. A well-chosen stock image can establish mood and brand credibility, while a generic one signals just that. 

Chewy’s hero is a useful benchmark—a warm lifestyle shot of a cat and dog in a sunlit home, immediately appealing for any pet owner. 

When choosing stock photography for your hero:

• Match the mood. Search for images that evoke the feeling you want customers to associate with your store.
• Avoid the obvious. The more a photo looks like it could belong to any brand, the less it does for yours.
• Check for exclusivity or licensing tiers. On most stock platforms, the same image is available to thousands of other businesses. Where possible, use platforms that offer extended or exclusive licensing, or filter toward less-downloaded images.
• Treat it as temporary. Stock works as a placeholder or a low-budget launch. Custom photography, even a single well-lit shoot, will almost always convert better, and the images are yours alone.

2. Create a graphic using an online design tool

Spice up your product photos or create a hero image with graphical elements instead. Find an online design tool like Canva, Visme, or Adobe Cloud, and put together an eye-catching graphic.

• Canva is the most accessible starting point for most store owners. Free tier includes more than two million templates, a full drag-and-drop editor, and standard PNG and JPG exports. For a single-person store, the free tier is a reasonable starting point; upgrade if you need consistent branding across multiple assets.
• Adobe Express also has a genuinely usable free tier. Templates, basic photo editing tools, and standard exports with no watermark. The Premium plan adds over 200 million Adobe Stock assets, more than 30,000 fonts, and additional AI design tools.
• Visme offers a free plan for exploring the platform. Published projects carry a Visme watermark on the free tier. Their Starter plan starts at $12.25 per month (billed annually) and removes the watermark while giving you full template and asset access.
• Figma is worth mentioning for owners who work with developers or a design team. Free Starter plan includes unlimited personal drafts and up to three collaborative files; technically sufficient for hero image design. That said, Figma is a UX and product design tool at heart; its learning curve is steeper than Canva or Adobe Express for non-designers, and its templates are less marketing-oriented.

3. Add a highly relevant CTA

Your CTA button should feel like a natural part of the design—visually distinct enough to draw the eye, but not jarring against the image behind it. 

UK-based brand Jolene gets this right: a clean outline button sits centered over the photo, on-brand with the neutral palette.

Refrain from embedding your CTA text directly into the image file. When your button copy is baked into the image as a flat graphic, it creates three compounding problems:

• Screen readers can’t read it, the text is invisible to assistive technology unless your alt text replicates it, which is a workaround, not a fix. 
• The CTA won’t reflow or resize on mobile, so a button that looks balanced on desktop can sit awkwardly cropped or too small to tap on a phone screen.
• Every time you need to update the offer, like for a seasonal promotion, you’re back to recreating and re-exporting the image.

Tip: Shopify’s sections and blocks system lets you add headings, body text, and CTA buttons directly on top of your hero section as separate, editable elements. On mobile, Shopify themes are designed to automatically reflow this text below the image rather than keeping it as an overlay, specifically so it remains readable at smaller screen sizes.

4. Use video as part of your hero image

Another great way to grab attention is by creating a looping, soundless video or GIF for your hero image. For example, the Nomz website has several video clips as its hero image. 

The videos reel in website visitors, getting them to stay on the page longer as they watch the full scene unfold.

5. Test different hero images

To help your hero image convert, you need to know what works. To refine and evolve your visual strategy to maximize conversions, it’s important to run tests.

Run A/B tests

When running tests on your hero image, track the following ecommerce metrics:

• Click-through rate (CTR). The percentage of visitors who click your hero CTA; the most direct signal your image and copy are working together.
• Scroll depth. How far down the page visitors scroll before stopping; a low scroll depth after the hero suggests it’s failing to create enough interest to keep people moving.
• Bounce rate. The percentage of visitors who land on your page and leave without taking any action; a high bounce rate on your homepage often points to a hero that isn’t landing with the right audience.
• Time on page. How long visitors spend on the page overall; longer sessions generally indicate stronger engagement with your content.
• Page load time. How quickly your hero image renders for the user; slow-loading heroes increase bounce rate before visitors have even seen your content, and directly affect your Google Core Web Vitals score. 

Tip: Shopify store owners can check their store’s performance score directly in the web performance report under Analytics in your admin. CTR, bounce rate, and time on page are all trackable natively in Shopify Analytics—you don’t need third-party tools to get started.

Survey audience feedback

Where A/B tests give you numbers, customer feedback gives you the story behind those stats. Ask your audience directly—what drew them in? What didn’t work? Maybe they’re craving more lifestyle shots or want closer views of the product details.

Use quick surveys or a simple feedback prompt post-visit to capture these insights. Pair this qualitative input with your quantitative A/B test results, and you’ve got a recipe for a hero image that connects, engages, and keeps people coming back for more.

Tip: Customer questions, assumptions, or even misunderstandings help inform the visuals, design, and copywriting. Consider proactively addressing relevant topics in your website copy or on an FAQ page. 

6. Regularly update your hero image

Although you may love the hero image you have, update it occasionally to introduce returning customers to even more products and offerings.

Treat it as a live asset; refreshing it around seasonal moments, product launches, and promotional periods. It keeps your store feeling current and ensures your highest-traffic real estate is always doing useful work. 

At minimum, revisit it once a quarter, and any time you’re running a sale or launching something new.

Optimize your store with a stunning website hero image

A stunning, optimized hero image grabs attention, conveys your brand message, and invites people to explore further.

Here are some key tips for developing your website hero image:

• Choose an image that resonates. Pick a high-quality, custom image or on-brand graphic that reflects your brand’s personality and speaks directly to your target audience.
• Match your brand’s colors. Reinforce brand recognition by aligning the hero image with your color palette for a cohesive, professional look.
• Optimize UI/UX for all devices. Use responsive web design to ensure the image looks sharp across devices, with text and CTAs that remain clear and clickable on mobile and desktop.
• Keep load speed fast. Compress images without losing quality, and use formats like WebP to keep your site loading quickly and SEO friendly.
• Test and refine regularly. Run A/B tests with different hero images to see which drives the most engagement, and fine-tune based on visitor behavior.