What Is a Hero Image?
A hero image is the large, prominent visual at the top of a web page — typically full-width, placed above the fold, and paired with a headline and call to action. The name comes from advertising's "hero shot": the single image that carries the message. On the web it anchors the first screenful of homepages, landing pages, product pages, and campaign pages, and it can be a photograph, illustration, video loop, or rendered graphic.
Because it occupies the most-viewed real estate on the page, the hero image does double duty: it sets the emotional register of the brand and provides the visual context for the value proposition beside it.
What Makes a Hero Image Effective
- It shows something, not anything. The strongest heroes depict the product, the outcome, or the customer — something a visitor can connect to the headline. Generic stock imagery (handshakes, skylines) adds bytes without meaning.
- It serves the message, not the reverse. The headline and CTA must stay legible on every screen — which usually means composing images with quiet zones for text, and testing contrast in both themes.
- It's composed for cropping. A hero renders at wildly different aspect ratios across devices. Keep the subject in the safe zone, and supply focal-point data so automated crops don't behead it.
- It earns its cost. Every hero should answer: does this image increase understanding or desire? If a page communicates faster without it, cut it — and prove the choice with A/B testing against conversion rate.
Hero Images and Page Performance
The hero image is very often a page's Largest Contentful Paint element — the single item Google's Core Web Vitals wait for. That makes it the most performance-sensitive asset on the page:
- Never lazy-load the hero. Lazy-loading is for below-the-fold media; deferring the hero delays LCP directly.
- Serve modern formats and responsive sizes — WebP variants scaled per breakpoint, so a phone never downloads the desktop crop.
- Reserve the space. Explicit dimensions prevent the layout shifting as the image arrives.
- Compress like it matters, because it does: hero images are routinely the heaviest asset on the page and a direct drag on SEO when neglected.
How Core dna Works With Hero Images
In Core dna, heroes are structured components: image, headline, support copy, and CTA are separate editable fields in the Core dna content management platform, so marketers can swap campaign heroes, localize them per market, or vary them per audience without touching layout code — and the brand's approved imagery stays organized in the platform's asset library rather than scattered across desktops.
Performance is handled by the platform rather than by discipline: Core dna generates optimized WebP renditions at the dimensions each layout needs and delivers them through its CDN, keeping the page's most important image its fastest-loading one.