Hero Image Best Practices: How to Design a Hero Section That Converts

An effective hero image reinforces the headline's value proposition, keeps the primary call to action as the highest-contrast element on screen, loads as the page's Largest Contentful Paint element in under 2.5 seconds, and holds its focal point at every breakpoint from 375 px to 1920 px wide. Format, compression, and crop decisions carry as much weight as art direction.

Your hero image is the first thing visitors see, and it is often the reason they leave. A slow-loading stock photo paired with a vague headline pushes potential customers away before they read a word about your product.

Most hero sections fail on the fit between their parts rather than on the quality of any single part. This guide covers where that fit breaks down, then the specifications and practices that fix it. If you are rebuilding the whole page rather than just the hero, our B2B web design guide covers the structure around it.

What Is a Hero Image?

A hero image is the large visual at the top of a webpage that sets the tone and communicates your brand identity within seconds. Hero image best practices center on three things: a clear value proposition, balanced visual weight, and strong mobile responsiveness. When the hero works, visitors understand what you offer and where to click.

Hero images serve a different purpose on each page type:

• Homepage heroes: Establish brand tone and point visitors toward primary actions
• Landing page heroes: Reinforce campaign messaging and drive a single conversion goal
• Product page heroes: Show the product and communicate its core benefit

What Is a Hero Section of a Website?

The hero section is the full band at the top of a page that holds the headline, supporting subhead, primary call to action, and hero image or video. The hero image is one element inside it.

The distinction matters in practice because the parts compete. The headline, the visual, and the button all draw from the same pool of attention and the same vertical space, so a hero section of a website has to be optimized as a unit.

A hero image that wins on its own terms, by being large and striking, usually wins at the button's expense. Judge every hero image decision by what it does to the section, not by how the image looks in isolation.

Why Hero Images Fail to Convert

A hero can look polished and still fail to convert. These are the five failure modes we see most often.

The Headline and Image Don't Reinforce Each Other

Your headline carries the value proposition. The image supports that message.

When the two feel disconnected, visitors struggle to understand what you are offering. This happens when teams pick a striking image first and write a headline around it. Flip that order. Write the headline, then find or commission an image that reinforces the claim it makes.

Visual Weight Pulls Attention Away From the CTA

Visual weight refers to the element that draws the eye first, based on size, color, contrast, or position. If your hero image dominates the viewport while the CTA sits quietly in a corner, you are guiding attention in the wrong direction.

Good hero section design frames the action and keeps the button the highest-contrast element in the band. Squint at your page. If the button disappears before the image does, your visual hierarchy needs work.

Generic Stock Imagery Signals a Generic Product

Stock photos of smiling professionals in conference rooms do not communicate what makes your product distinct. Visitors filter out generic business imagery because they have seen it hundreds of times.

Custom visuals, product screenshots, and brand illustrations perform better because they feel specific. On a tight budget, stylized illustration usually beats stock photography. Our B2B SaaS UI/UX design services cover this work when the in-house option is not available.

The Image Is Too Heavy and Slows the Page

An unoptimized hero image directly hurts your Largest Contentful Paint (LCP), the Core Web Vitals metric measuring how long the largest visible element takes to load. According to the HTTP Archive Web Almanac, 73% of mobile LCP elements are images, and on most pages that image is the hero.

The cost of getting this wrong is measurable. In Google and SOASTA research, the probability of a mobile visitor bouncing rises 32% when load time goes from one second to three. Google also uses LCP as a ranking factor, so a heavy hero costs you both the visitor and the search visibility that brought them.

The Hero Breaks on Mobile

Desktop-first heroes crop awkwardly, hide text, or lose their focal point on smaller screens. Mobile is where most of the performance penalty lands too: the Web Almanac found 16% of mobile sites lazy-load their LCP image, which delays the exact paint the metric measures.

Test your hero across device sizes before launch. If the focal point shifts or the CTA becomes hard to tap, you have work to do.

9 Hero Image Best Practices

1. Write the headline first, then choose or commission an image that reinforces the claim it makes.
2. Keep the call to action the highest-contrast element in the section, so the eye lands on it within the first second.
3. Use product screenshots or custom illustration in place of stock photography, because a specific visual reads as a specific product.
4. Export the desktop hero as AVIF or WebP and hold the file under 200 KB at 1920 px wide.
5. Serve a separate mobile crop through srcset and sizes so a phone downloads a 750 px asset rather than a 1920 px one.
6. Set fetchpriority="high" on the hero image and never apply loading="lazy" to it, because it sits above the fold and lazy loading delays the Largest Contentful Paint.
7. Keep the headline and call to action as live HTML text so screen readers and crawlers can read them.
8. Write alt text that states the image's purpose on the page, for example "Analytics dashboard showing pipeline by lead source."
9. Test one variable at a time, whether headline, image, or button, and measure each variant against a single conversion goal.

Write the Headline Before You Pick the Image

The headline defines your value proposition. Start there, then select or create an image that reinforces it. This keeps the visual in service of the message and avoids the trap of falling for an image that does not support what you are trying to say.

Design for Clarity Over Cleverness

Abstract or heavily artistic imagery asks the visitor to interpret before they understand. Their attention is measured in seconds.

Three quick checks:

• Can a first-time visitor identify what you offer?
• Does the image support the headline?
• Is there enough contrast for text legibility?

Clear beats creative when conversion is the goal.

Balance Visual Weight With the CTA

Structure the hero so the eye flows from headline to image to CTA. Use whitespace, contrast, and positioning to make the button impossible to miss. The image frames the action; the button closes it.

Use Original Imagery Instead of Stock

For B2B SaaS, showing the actual product interface builds credibility and sets accurate expectations. Product screenshots tell visitors exactly what they will get.

If your product UI is not polished yet, custom illustration handles abstract concepts well. Either option beats generic stock photography because it feels specific to your offering.

Optimize for Speed and Core Web Vitals

Compress your images and use modern formats. Google reports that WebP images run 25% to 34% smaller than comparable JPEGs at equivalent quality, and AVIF typically compresses tighter still.

Since the hero is usually the LCP element, optimization here has outsized impact on the whole page. Webflow development services handle much of this automatically when the images are configured correctly, which is one reason we build on the platform.

Design for Accessibility

Accessibility improves usability for everyone.

• Alt text: Describe the image's purpose, not just its contents
• Text contrast: WCAG 2.2 AA requires 4.5:1 for body text and 3:1 for large text, meaning 18pt and above or 14pt bold
• Avoid embedded text: Keep headlines as live HTML for screen readers and SEO

When you bake text into an image, screen readers cannot read it and search engines cannot index it.

On contrast, reach for a gradient scrim rather than a flat overlay. A flat overlay dulls the entire image to protect the one corner where the text sits, which costs you the image to save the copy. A gradient darkens only where it is needed.

Build the Hero Mobile First

Design for mobile constraints first, then scale up for desktop. This keeps the focal point, text size, and CTA effective on small screens.

Desktop-first heroes create problems that surface late and cost real money to unwind, because fixing them usually means recropping or recommissioning the asset rather than adjusting CSS.

What Size Should a Hero Image Be?

Desktop and Full-Screen Hero Sizes

A 16:9 aspect ratio works for most full-width heroes. Width is the number that matters: 1920 px covers nearly every desktop viewport, and 2560 px covers retina density where the design calls for it.

The right website hero image size is the smallest one that still looks sharp at your widest breakpoint. Browsers crop height to the viewport anyway, so extra vertical pixels buy you file size and nothing else.

Mobile Hero Image Sizes

Serve mobile a separate 750 x 1000 px portrait asset rather than letting CSS crop the desktop file. A phone that downloads a 1920 px image to display it at 390 px wastes roughly 80% of the bytes it paid for, and that waste lands directly in mobile LCP.

Test the focal point across breakpoints. What sits centered on desktop can crop badly on a phone.

Resolution Switching vs Art Direction

Two different problems need two different tools, and teams routinely reach for the wrong one.

Resolution switching applies when the mobile image is the same composition at a smaller size. Use srcset and sizes and let the browser pick:

Art direction applies when the mobile crop is a genuinely different composition, for example a wide desktop shot that becomes a tight portrait crop on a phone. srcset cannot do this, because it assumes every candidate shows the same thing. Use <picture> with a media condition:

One Webflow-specific catch. Images placed as image elements through the Designer get responsive variants generated automatically. Background images set in CSS do not. If your hero is a CSS background, you are serving one file to every device, which is the most common reason a Webflow hero passes on desktop and fails on mobile. Either move the hero to an image element, or handle the breakpoints yourself with custom code.

Compression, Formats, and Load Priority

WebP and AVIF are the default formats for web images today. Compression can be aggressive, though watch gradients and flat color fields, where artifacts show first.

Hero images load above the fold, so lazy loading never applies. Two attributes actually move the needle:

• fetchpriority="high" on the hero <img> tells the browser to fetch it ahead of other images rather than treating it as one request among many.
• <link rel="preload" as="image"> in the head matters for CSS background heroes, which the browser cannot discover until it has parsed the stylesheet. Without the preload, the hero starts downloading late no matter how small the file is.

The target is an LCP under 2.5 seconds at the 75th percentile, which is Google's threshold for a "good" score.

Which Type of Hero Image Should You Use?

Choose the format by what the reader needs to see, whether that is the product, the outcome, or the brand.

Static Image With Text Overlay

Best for simple, fast-loading pages with a straightforward message. Works when you have strong photography or a clear product shot. Watch text legibility over the image.

Full-Screen Background Image

Creates a high-impact first impression. Best for brand-forward pages where atmosphere carries weight. Needs more careful optimization and responsive testing than smaller hero formats, and it is the case where <link rel="preload"> matters most.

Background Video Hero

Effective for showing a product in action or conveying motion. Video adds significant page weight, so use it sparingly. Always load a fallback poster image first, keep it muted, and never autoplay with sound.

Animated or Motion Hero

Covers subtle CSS animation, parallax, and micro-interactions. Adds polish without the weight of video. Works well for SaaS brands that want a contemporary feel.

Product Screenshot Hero

The most direct option for B2B SaaS. Shows exactly what the user gets, which builds credibility and sets accurate expectations. Pair it with a value proposition headline.

How Do You Test a Hero Image?

Three tests tell you whether a hero is working: recall, attention, and load time.

Run a Five-Second Test

Show your hero to someone unfamiliar with your product for five seconds, then ask what they remember. If they cannot recall your value proposition, the hero is not working.

Review Heatmaps and Scroll Depth

Heatmap and scroll depth analysis reveals where visitors look and click. If attention clusters on the image and skips the CTA, your visual weight is off. If visitors scroll straight past, the hero is not holding them.

Measure LCP in PageSpeed Insights

Use Google PageSpeed Insights or Lighthouse to check whether the hero is your LCP element and how long it takes to paint. Under 2.5 seconds at the 75th percentile is the passing mark. Test on mobile first, since that is where the budget is tightest.

A/B Test One Variable at a Time

Test one element at a time: headline, image, or CTA. Small changes, such as swapping a stock photo for a product screenshot, often beat a full redesign, and isolating variables is the only way to know which change did the work.

Running a clean test needs enough traffic to reach significance and a single conversion goal to measure against. Our conversion rate optimization services cover the setup when the in-house bandwidth is not there.

Build a Hero Section That Converts With Curio Digital

At Curio Digital, we design conversion-focused hero sections for B2B SaaS companies as part of our UI/UX design and Webflow development work. We have built over 100 Webflow sites, and the hero is usually the fastest place to find a measurable gain on a page that is already getting traffic.

Frequently Asked Questions About Hero Images and Hero Sections

What is a hero image?

A hero image is the large visual at the top of a webpage, above or beside the headline and primary call to action. Its job is to reinforce the value proposition the headline states, within the two or three seconds a first-time visitor spends deciding whether to stay.

On most pages, it is also the Largest Contentful Paint (LCP)element, which makes it a performance asset as well as a design one.

What is a hero section of a website?

The hero section is the full band at the top of a page that contains the headline, supporting subhead, primary call to action, and hero image or video. The hero image is one element inside it. Designers optimize the section as a unit, because the headline, the visual, and the button compete for the same attention and the same vertical space.

What size should a hero image be?

Use 1920 px wide for full-viewport desktop heroes, or 2560 px if you are serving 2x retina density, at a 16:9 ratio. Standard in-container banners work at 1600 x 900 px. Hold the desktop file under 200 KB in AVIF or WebP. Width matters more than the exact ratio, because the browser crops height to the viewport anyway.

What is the best hero image size for mobile?

Serve mobile a separate 750 x 1000 px portrait asset rather than letting CSS crop the desktop file. A phone that downloads a 1920 px image to display it at 390 px wastes roughly 80% of the bytes it paid for, and that shows up directly in mobile LCP. Deliver the switch with srcset and sizes, or with the picture element when the mobile crop is a genuinely different composition.

Should a hero image be WebP, AVIF, or JPEG?

Use AVIF where your pipeline supports it, WebP as the default, and JPEG only as a fallback. Google reports WebP files run 25% to 34% smaller than comparable JPEGs at equivalent quality, and AVIF typically compresses tighter still. For illustration-based heroes, SVG usually beats all three, because it scales to any breakpoint from a file measured in kilobytes. Reserve PNG for flat graphics with hard edges.

How does a hero image affect Core Web Vitals?

The hero image is usually the Largest Contentful Paint element, so its file size and load priority set your LCP score directly. Google's "good" threshold is under 2.5 seconds at the 75th percentile. Compress the file, serve a modern format, set fetchpriority to high, and never apply lazy loading to a hero, since deferring an above-the-fold image delays the exact paint LCP measures.

What alt text should a hero image have?

Describe the image's purpose on the page rather than cataloging what is visually in it. "Analytics dashboard showing pipeline by lead source" tells a screen reader user and a crawler something useful; "screenshot of software" tells them nothing. If the hero is purely decorative and the headline already carries the meaning, use an empty alt attribute so assistive technology skips it.