Your website’s hero section is the digital equivalent of a storefront window. Visitors form an opinion about your brand within milliseconds of landing on your page, and the hero image is almost always the first thing they see. A compelling hero section can pull people deeper into your site, while a weak one sends them straight to the back button. If you’re investing in landing page design but overlooking your hero area, you’re leaving conversions on the table.
Whether you’re building a homepage, a service page, or a campaign-specific landing page, the hero banner sets the tone for everything that follows. In this guide, we’ll walk through proven strategies for hero image selection, text overlay design, CTA placement, and mobile optimization so your above-the-fold content actually does its job.
Why the Hero Section Matters More Than You Think
Research consistently shows that users spend the majority of their attention above the fold. While people do scroll, the hero section disproportionately influences whether they choose to keep going. It’s where your value proposition lives, where your brand personality shines through, and where the first call to action appears. A poorly designed hero section doesn’t just look bad—it actively undermines every other element on the page.
Think of it this way: your hero section answers three questions in under five seconds. Who are you? What do you do? Why should I care? If those answers aren’t crystal clear, visitors bounce. And bounced visitors don’t become leads, customers, or advocates.
Choosing the Right Hero Image
The image you select for your hero section isn’t just decoration—it’s communication. The right photo or graphic reinforces your message, evokes the right emotion, and gives visitors an immediate sense of what your brand is about. The wrong one creates confusion or, worse, feels generic.
Original Photography vs. Stock Images
Whenever possible, use original photography. Authentic images of your team, your workspace, or your products build trust in ways that stock photos simply cannot. There’s a reason brand photography consistently outperforms stock imagery in conversion tests—real photos feel real, and people respond to that authenticity.
That said, not every business has the budget for a professional photo shoot right away. If you’re using stock images, choose ones that feel natural and specific rather than staged and generic. Avoid the classic “business people shaking hands in front of a whiteboard” shots. Look for images with genuine emotion, interesting composition, and a visual style that matches your brand.
Technical Considerations for Hero Images
- Resolution and file size: Use images that are at least 1920px wide for full-width heroes, but compress them aggressively. A hero image over 500KB will noticeably slow your page load. Tools like TinyPNG or ShortPixel can cut file sizes by 60-80% without visible quality loss.
- Aspect ratio: Most desktop hero sections work well at 16:9 or wider. Consider how the image will crop on different screen sizes before committing to a specific photo.
- Focal point: Place the most important visual element where it won’t be covered by text overlays or cropped on mobile. Test your hero at multiple breakpoints to confirm the focal point remains visible.
- Format: WebP offers the best balance of quality and file size for most browsers. Serve WebP with a JPEG fallback for older browsers.
Designing Effective Text Overlays
Your hero headline is arguably the most important piece of copy on your entire website. It needs to be concise, benefit-driven, and instantly readable against whatever image sits behind it. That last point—readability—is where many hero sections fall apart.
Ensuring Readability
White text on a busy photograph is a recipe for frustration. Here are proven techniques for keeping your hero text legible:
- Color overlays: Add a semi-transparent dark or branded-color overlay between the image and the text. Even a 40-50% opacity overlay dramatically improves contrast.
- Text shadows: A subtle drop shadow or text stroke can lift headlines off busy backgrounds without requiring a full overlay.
- Strategic image selection: Choose images with natural negative space—areas of consistent color or low detail—where text can sit comfortably.
- Gradient overlays: A gradient that fades from opaque to transparent lets you protect the text area while still showing the full image.
Understanding color psychology in your branding can also guide your overlay and text color choices. The colors you use in your hero section set an emotional tone before visitors read a single word.
Writing Hero Headlines That Work
Keep your hero headline to 10 words or fewer. Lead with a benefit or an outcome, not a feature. “Grow Your Revenue With Data-Driven Marketing” outperforms “Full-Service Digital Marketing Agency” every time because it answers the visitor’s real question: what’s in it for me?
Pair your headline with a short subheadline (one to two sentences) that adds context. The subheadline is where you can include supporting details, social proof, or a brief description of what you offer. Together, the headline and subheadline should give a complete picture of your value proposition without requiring any scrolling.
CTA Placement and Design in the Hero Section
Your hero section should include at least one clear call to action. This is the moment of highest attention—don’t waste it with a passive “Learn More” button buried in the corner. Your call-to-action strategy should prioritize visibility, clarity, and urgency.
Best Practices for Hero CTAs
- Use action-oriented language: “Get Your Free Quote,” “Start Your Project,” or “Book a Consultation” all outperform vague alternatives like “Submit” or “Click Here.”
- Make the button visually dominant: Your CTA button should be the most visually prominent element after the headline. Use a contrasting color that stands out from both the background image and the overlay.
- Position it naturally: Place the CTA directly below the headline and subheadline, where the eye naturally travels. Don’t force visitors to search for it.
- Consider a secondary CTA: A primary button (“Get Started”) paired with a lower-commitment secondary link (“See Our Work”) gives visitors options without overwhelming them.
- Size matters: On desktop, your CTA button should be large enough to notice immediately but not so large that it feels aggressive. On mobile, make it thumb-friendly—at least 44×44 pixels.
Mobile Optimization for Hero Sections
More than half of all web traffic now comes from mobile devices, which means your hero section needs to work just as hard on a 375px-wide screen as it does on a 1920px monitor. Unfortunately, many hero sections are designed desktop-first and then awkwardly squeezed onto smaller screens.
Mobile-Specific Strategies
- Use different image crops: Serve a vertically-oriented or tighter crop of your hero image on mobile rather than simply scaling down the desktop version. CSS art direction with the
<picture>element makes this straightforward. - Reduce text length: If your desktop headline is eight words, your mobile headline might need to be five. Test how your copy wraps on smaller screens and adjust accordingly.
- Stack elements vertically: On mobile, the image, headline, subheadline, and CTA should stack in a clean vertical flow. Avoid side-by-side layouts that become cramped on small screens.
- Increase font sizes proportionally: Hero text should remain large and bold on mobile. A headline that’s 48px on desktop might be 28-32px on mobile—still commanding, still readable.
- Test load times: Mobile connections are often slower. Compress your mobile hero image even more aggressively and consider lazy loading below-the-fold images while prioritizing the hero.
Common Hero Section Mistakes to Avoid
Even experienced designers make these mistakes when building hero sections. Watch out for these pitfalls:
- Auto-playing video without purpose: Video heroes can be effective, but only if the video directly supports your message. A generic aerial drone shot of a city adds nothing and slows your page.
- Too many elements: A hero section with a headline, subheadline, three buttons, a badge, and an animated graphic is visual chaos. Simplify ruthlessly.
- Ignoring accessibility: Ensure your text-to-background contrast ratio meets WCAG AA standards (at least 4.5:1 for body text, 3:1 for large text). Add descriptive alt text to your hero image.
- Slider carousels: Multiple rotating hero slides almost always underperform a single, focused hero. Users rarely interact with slides beyond the first, and the rotation distracts from your primary message.
- Forgetting the value proposition: A beautiful hero image with a clever tagline but no clear indication of what you actually do is a wasted opportunity. Clarity beats creativity every time.
Putting It All Together: A Hero Section Checklist
Before you launch or redesign your hero section, run through this quick checklist:
- Does the image reinforce your brand message and feel authentic?
- Is the headline under 10 words and benefit-focused?
- Can you read all text easily against the background on every screen size?
- Is there a clear, visually prominent CTA above the fold?
- Does the hero load in under 3 seconds on a mobile connection?
- Have you tested the layout at desktop, tablet, and mobile breakpoints?
- Does the section meet accessibility contrast standards?
Frequently Asked Questions
What size should a website hero image be?
For full-width hero sections, start with an image that’s at least 1920×1080 pixels. Compress it to under 500KB using WebP format for the best balance of quality and performance. Serve smaller versions for tablet and mobile using responsive image techniques.
Should I use a video or an image for my hero section?
Use video only if it directly supports your message and you can keep the file size manageable. A short, looping background video showing your product in action can be powerful, but a generic stock video will hurt performance without adding value. For most businesses, a high-quality static image with strong copy is the better choice.
How do I make my hero section accessible?
Ensure text-to-background contrast ratios meet WCAG AA standards, add meaningful alt text to your hero image, and make sure your CTA button is keyboard-navigable. If you’re using a background video, provide a pause control and don’t rely on the video to convey essential information.
Can I use a slider carousel in my hero section?
We generally advise against it. Data consistently shows that users engage almost exclusively with the first slide. A single, well-crafted hero section with a focused message will outperform a carousel in both engagement and conversions. If you have multiple messages to share, consider placing them further down the page instead.
Ready to Build a Hero Section That Actually Converts?
Your hero section is your first—and sometimes only—chance to make an impression. Getting the image, copy, and CTA right takes a blend of design skill, marketing strategy, and technical know-how. If you’d rather have experts handle it, our team builds high-converting websites from the hero section down. Book a free consultation and let’s make your first impression count.