# Hero Images Website
_2026-09-15_
Most advice about **hero images on websites** starts with the wrong question. It asks which photograph, illustration, aspect ratio, or colour palette will make the opening section look better. A senior CRO team should ask something more uncomfortable first: **does this page need a hero image at all?**
A large visual consumes attention, screen space, accessibility effort, and performance budget. On many pages, it clarifies the offer and gives the primary CTA a credible focal point. On others, it delays the answer the visitor came to find. The right hero is not the prettiest asset. It's the visual that earns its place by improving comprehension or action.
## Should Your Website Even Have a Hero Image
The default reflex to add a giant banner is usually a design decision disguised as a business decision. Teams often place an image above the fold because the template expects one, then spend weeks debating the crop while ignoring whether the image helps visitors complete the page's primary task.
Treat the hero as a **hypothesis with a cost**. It spends pixels, attention, transfer size, and part of the page's Largest Contentful Paint budget. If the alternative is a clear headline, concise supporting copy, proof, and a visible CTA, the image must contribute something those elements can't provide alone.
### Where a hero earns its place
A hero image usually has a legitimate commercial role when the visitor benefits from seeing the product, context, or outcome immediately.
- **Premium product launches:** A considered product image can establish material quality, form, finish, or desirability before the visitor reaches the detail sections.
- **Category landing pages:** A contextual image can help shoppers understand the category and distinguish it from adjacent offers.
- **Brand credibility pages:** A real founder, team, customer environment, or recognisable product can make an unfamiliar proposition feel specific rather than interchangeable.
- **Visual products:** Fashion, interiors, travel, food, and physical goods often need imagery because the visual experience is part of the offer.
A product-led SaaS page may also benefit from showing the interface, particularly when the screen demonstrates the workflow promised by the headline. The image earns its space by reducing ambiguity.
### Where the image gets in the way
Long-tail transactional pages rarely need a cinematic opening. Visitors arriving with a specific product, service, or problem in mind may want price, availability, specifications, or a form. A decorative banner pushes that information lower and adds another element that can fail on mobile.
Dense SaaS dashboards present the same problem. If the visitor already understands the category and needs to complete a task, an image competes with the interface. Pages that already convert through text should be treated as evidence, not as unfinished designs waiting for decoration.
UK accessibility evidence reinforces the risk of treating imagery as harmless polish. Scope's analysis found detectable accessibility errors on **97.4% of UK homepages in 2021**, compared with **98.1% in February 2020**. Missing image alt text appeared on **61% of homepages**, while low contrast affected **86%**, according to the [UK Digital Accessibility Index research](https://www.audioeye.com/gb/digital-accessibility-index/2026/). Hero banners occupy exactly the visual territory where these failures can obstruct comprehension.
> **CRO rule:** Before redesigning a hero, test the page with the hero removed, reduced to a product thumbnail, or replaced by a plain value proposition.
That's permission to remove the image, shrink it, or replace it. If the page becomes faster, clearer, and easier to act on, the absence of a hero is the winning design.
## What a Hero Image Actually Does on a Website
Think of a hero image as a **shopfront window**, not a poster attached to the building. A shopfront shows enough of the offer to attract the right passer-by, establish expectations, and make the next step obvious. It doesn't exist to fill the largest window with something attractive but unrelated.
A website hero image sits beside the headline, value proposition, and primary CTA. Its commercial job falls into three categories.
1. **It sets emotional tone and credibility.** A carefully photographed product, a real working environment, or a credible founder can tell visitors what kind of organisation they're dealing with. The visual makes the opening feel specific.
2. **It communicates the product or offer.** A product shot can show what you sell. A screen capture can show how software works. A contextual scene can make an outcome easier to understand than copy alone.
3. **It guides the user towards action.** Composition can place visual weight near the CTA, leave a calm area behind the text, or use a subject's gaze to direct attention towards the next step.
### Choose the image type by the job
A **photo-led hero** works when atmosphere, people, place, or lifestyle forms part of the purchase decision. A travel brand may need a destination. A premium furnishings brand may need the room in which the product belongs. The photo should answer a question about the offer, not merely suggest a mood.
An **illustration-led hero** suits abstract products, technical services, and brands that need to explain a system without presenting a literal object. It can show relationships, workflows, or a distinctive visual world, but it must remain subordinate to the message.
A **product-shot hero** is the strongest default for products that need immediate identification. A clean product view, a relevant use case, or a software interface can provide evidence before the visitor reads feature copy.
The expensive real estate above the fold changes the standard. A hero image can't spend that space because the page feels empty without it. It has to justify its visual weight against the alternative of a headline, subhead, proof point, and CTA.
For a concise explanation of how these components fit into the broader page, review [the parts of a site that matter](https://www.925studios.co/blog/parts-of-a-website). It's useful context when a hero is being judged in isolation instead of as one unit within the page's information hierarchy.
A short visual demonstration can help when the product needs motion or sequence to make sense.
The test is simple: remove the headline and ask what the image communicates. Then remove the image and ask what the page loses. If the answer is “almost nothing”, the hero is decorative, and decorative assets face the highest burden of proof.
## Designing a Hero Image That Earns Attention
Good composition makes the image support the message instead of fighting it. Start with a before-and-after review rather than a mood board.
In the weak version, the subject sits directly behind the headline. The face, product, or interface is clipped by the text, and the CTA lands on a bright patch of detail. In the stronger version, the subject moves into a clear focal zone, the copy sits against calm negative space, and the CTA has a distinct visual edge. Nothing changed about the brand promise. The layout stopped making the visitor decode competing signals.
### Lock the visual hierarchy first
A hero needs **one dominant element and one primary action**. The dominant element might be the product, a person, or a contextual scene. It shouldn't be the background texture, animation, or decorative shape.
A subject facing or looking towards the CTA can create directional support, but don't force this convention when it makes the composition artificial. Visual weight works just as well through contrast, scale, whitespace, and placement. The visitor should understand the headline first, the supporting detail second, and the action immediately afterwards.
Keep the headline visible without scrolling. Add a subhead only when it resolves a meaningful objection or clarifies the promise. Two prominent CTAs split attention unless they represent different paths, such as buying and viewing a product demo. Even then, give one action clear priority.
A common failure is oversized type placed over a high-detail photo. Large text doesn't create readability by itself. Add a controlled overlay, reposition the copy, or choose an image with a naturally quiet area. Don't ask visitors to work around the design.
### Compare the choices before building
| Design Choice | What It Gains | What It Costs |
|---|---|---|
| Product close-up | Fast identification and concrete evidence | Can feel sterile if context matters |
| Lifestyle photography | Emotion, aspiration, and situational meaning | May obscure what the company actually sells |
| Product interface | Demonstrates software and workflow | Small text can become unreadable on mobile |
| Illustration | Flexible brand expression and conceptual explanation | May communicate less than a real product view |
| One primary CTA | Clear next action and simpler hierarchy | Requires a deliberate secondary path elsewhere |
| Copy over image | Compact composition and strong visual integration | Contrast, cropping, and accessibility become harder |
| Copy beside image | Better control of readability and responsive behaviour | Uses more layout width and can feel less immersive |
A stock meeting scene, smiling professional, or generic photo may look polished while signalling nothing distinctive. A real product, actual customer context, or specific outcome usually gives the page more credibility because it carries information.
Before development, lock the focal subject, safe copy zone, mobile crop, primary CTA, and fallback state. If those decisions aren't clear, the asset isn't ready for implementation. The [call to action guidance](https://www.otterab.com/blog/what-is-a-call-to-action) can help teams judge whether the button and surrounding message are doing one job rather than competing for clicks.
## Performance and Core Web Vitals for Hero Images
The first performance question is whether the hero image deserves to exist on the page. If it adds no product evidence, context, or decision-making value, removing it improves load time more reliably than compressing it. If the image does earn its space, treat it as a performance-critical interface element, not decoration.
Hero images often become the **Largest Contentful Paint element** because they occupy much of the opening viewport. An unoptimised asset can push LCP beyond Google's “good” band, which is **under 2.5 seconds**, as described in this [UK Core Web Vitals checklist](https://www.seostrategy.co.uk/core-web-vitals/). The artwork and implementation must pass together. Serve the dimensions the layout needs, and do not send desktop imagery to a narrow mobile slot.
### Format and payload decisions
Use AVIF where the delivery stack and browser support justify it, WebP as a dependable modern option, and JPEG when compatibility or an existing pipeline requires it. File size depends on the subject, export settings, and delivery system, so measure the actual asset instead of promising a fixed saving.
| Format | Quality | Approx. File Size | Browser Support |
|---|---|---|---|
| AVIF | Strong compression with careful encoding | Measure per asset | Modern browsers, with fallback needed in some environments |
| WebP | Good quality-to-size balance | Measure per asset | Broad modern browser support |
| JPEG | Familiar and widely supported | Often heavier for comparable visual quality | Very broad support |
Preload an LCP-critical hero and aim for **under 150 KB** where the image can meet that target without visible quality loss. This target is a constraint, not permission to ship a large source file. Resize the asset to its rendered slot, provide responsive sources, and inspect the result on real devices.
Use an image element with `srcset` and `sizes`, plus a preload for the selected hero asset. Set the preload to `as="image"` and `fetchpriority="high"`. Lazy-load images below the fold, using `fetchpriority="low"` where appropriate. Do not lazy-load a hero that supplies LCP.
A real `` gives the browser a clearer discovery and prioritisation path than a CSS background. Use it when the image carries content or meaning. Reserve backgrounds for decoration, keep the headline and CTA in HTML, and ensure the page remains usable before the background arrives.
For a broader explanation of how the visual asset connects to the metric, see this [Largest Contentful Paint resource](https://www.otterab.com/blog/largest-contentful-paint).
QA must cover failed paths, incorrect responsive sources, CMS transformations, CDN behaviour, and lazy-loading conflicts. The guide to [images not loading on websites](https://wptriage.app/blog/pictures-not-loading-on-web-pages) is useful when a hero works locally but disappears in production. The operating rule is simple: make the chosen hero discoverable early, small enough to transfer quickly, and no larger than its rendered slot requires.
## Accessibility and SEO for Hero Imagery
Hero accessibility isn't polish. It determines whether people using assistive technology can understand the page's opening message and whether people can read the CTA against the visual.
Start by deciding whether the image carries meaning. If it does, write alt text that describes its **purpose in context**, not an inventory of visual details. “Dashboard showing project status and overdue tasks” helps a visitor understand the product. “Blue computer screen with charts” mostly describes appearance.
If the image is decorative and the surrounding HTML heading already communicates the point, use an empty alt attribute. The image should not become a second, noisy announcement. Important information must remain in text, not trapped inside the graphic.
### Contrast and content equivalents
Text over imagery needs a reliable calm area or a controlled overlay. The minimum contrast targets are **4.5:1 for body text** and **3:1 for large display text**, with WCAG 2.2 accessibility guidance as the baseline. Check the mobile crop separately because a background that supports readable text on desktop may place the copy over a bright subject on a narrow screen.
GOV.UK advises teams to use meaningful, unique filenames, avoid images containing text, and never make an image the sole carrier of important information. Its [guidance on using images in content](https://www.gov.uk/guidance/content-design/images) also specifies a minimum working size of **960×640 px at 72 DPI** for uploadable content images. That doesn't mean every hero should be delivered at that size or larger. It means content teams need a properly dimensioned source, responsive delivery, and an HTML text equivalent.
### Search and assistive technology
Descriptive filenames, meaningful alt text, compression, and an appropriate format can help search engines interpret image content and support image-search discovery. The filename should describe the subject or function, not the export name from a design tool. For a product hero, connect the image to the actual product and page context.
If the hero shows a product, make sure the surrounding structured data describes the product itself. Don't expect an image alt attribute to replace product name, offer, availability, or other page content. The image supports the entity. It doesn't define the whole entity.
A single CTA should be a real keyboard-focusable link or button with visible text. Screen readers need the action announced as an action, not buried in an image description. Use an accessible name where needed, but don't turn a decorative image into the control.
UK public-sector accountability is becoming more formal. The Government Digital Service reported in December 2024 that **85% of monitored websites and mobile apps had published an accessibility statement**, and government guidance explicitly tells teams to describe images, graphs, and charts, as reported in [UK accessibility monitoring coverage](https://prioritypixels.co.uk/insights/what-the-webaim-million-2025-report-tells-us-about-website-accessibility/). That makes the hero a documented usability surface, not a decorative exception.
## A/B Testing Your Hero Image for Conversions
A credible hero test begins with a mechanism, not a gallery of alternative images. “Test a new hero” is too vague to produce a useful decision. Define what the audience is struggling to understand and how the visual should resolve that problem.
Use this hypothesis format:
> **Because [audience signal], changing [hero element] from [control] to [variant] will [move metric] by [expected magnitude], because [mechanism].**
Here's a properly scoped example for a SaaS pricing page:
> Because visitors can't see what the platform includes before choosing a plan, changing the control's stock lifestyle photo to a product-only interface view will increase the primary plan-selection conversion by the expected test threshold, because the interface provides concrete evidence of the paid offer.
The wording deliberately avoids pretending that the outcome is known. Your expected magnitude belongs in the test brief, based on your existing baseline and decision economics. Don't invent a lift target after the test starts.
### Track the whole trade-off
The primary metric should reflect the page's commercial goal, such as completed checkout, qualified form submission, or plan selection. Hero CTA click-through is a useful leading indicator, but it isn't the final decision if clicks don't produce valuable downstream actions.
Track supporting signals:
- **Hero CTA click-through:** Did the visual and message increase initial engagement?
- **Primary conversion rate:** Did more visitors complete the intended action?
- **Scroll depth past the opening section:** Did the hero encourage exploration or block the next content?
- **LCP:** Did the variant slow the opening experience?
- **Revenue or lead quality:** Did the change improve business value rather than only interaction?
A variant that produces more clicks while slowing LCP or attracting poor-fit visitors is not a winner. If the image hurts LCP without lifting the primary outcome, stop the test rather than rationalising the design.
Don't change the headline, CTA label, image, layout, and proof point in the same experiment. You won't know which mechanism caused the result. If you need a full redesign, run it as a clearly defined composite test, then follow with isolated tests that identify the useful component.
Hold out a clean control, keep traffic allocation stable, and decide the minimum detectable effect before launch. Sample requirements depend on baseline conversion, traffic, variance, and the effect worth acting on. Teams should use a realistic threshold rather than chase a tiny difference that won't justify implementation.
For experiment prioritisation, [deciding what to A/B test](https://www.otterab.com/blog/deciding-what-to-a-b-test) provides a useful way to rank ideas by potential impact, confidence, and effort. A hero image earns priority when it blocks a known task, creates a clear comprehension problem, or carries a measurable performance cost.
## A Practical Framework for Choosing Your Next Hero
Run every hero through five questions. The answers should determine whether you keep it, redesign it, reduce it, or remove it.
### Start with the visitor's task
**Does the hero block the primary task?** If visitors need to compare, buy, search, or submit information, move that action into immediate view. On a high-intent transactional page, remove the hero or reduce it to a compact product view when the visual delays the task.
**Does it match intent?** A campaign landing page should reflect the promise in the advert, email, or search result. A generic brand image creates a message gap. A product page should show the product or a meaningful use context, not an unrelated atmosphere.
**Does it load within the performance requirement?** For UK-facing pages, keep the LCP target in Google's good band, **under 2.5 seconds**, and treat the hero as a priority asset rather than a late background effect. If the image can't meet the requirement without harming quality, test a smaller image, a static product view, or no image.
**Does it pass accessibility review?** Check meaningful alt text, empty alt for decoration, text contrast, keyboard focus, mobile cropping, and screen-reader order. UK guidance makes image description and text equivalents part of standard digital practice, while the widespread publication of accessibility statements shows how formal that accountability has become.
**Does it support the conversion goal?** Attach a specific hypothesis to the asset. If you can't explain what the image should change, don't build a complicated visual system around it.
### Use a 30, 60, and 90 day rollout
In the first **30 days**, audit current heroes across templates. Record the image's purpose, rendered dimensions, LCP behaviour, alt text, contrast, CTA visibility, and page-level conversion goal. Include mobile screenshots and screen-reader checks.
By **60 days**, instrument the key events and launch the smallest meaningful experiment. Start with removal versus the current hero on a high-intent page if the asset appears decorative or obstructive. On a product-led page, test a product view against a lifestyle image while keeping the headline, CTA, and surrounding layout stable.
By **90 days**, implement the winning direction, document the mechanism, and queue the next test. That may be a mobile crop, a reduced payload, a CTA placement change, or a no-image control. Otter A/B can support tests that compare hero imagery, headlines, CTAs, and layouts while tracking conversion outcomes and performance guardrails. Use it as one option in a broader experimentation stack, not as a substitute for a clear hypothesis.
The strongest hero decision may be to keep the image. The most valuable one may be to delete it. Let the page's task, evidence, accessibility, and performance decide.
---
Otter A/B helps teams test hero images, headlines, CTAs, and layouts without turning every design debate into an opinion contest. Visit [Otter A/B](https://www.otterab.com) to set up a focused experiment, measure the conversion goal and supporting signals, and find out whether your hero earns its place.
---
Canonical page: https://www.otterab.com/blog/hero-images-website