Definition: A hero image (also called a hero banner) is the large, prominently featured image or visual element displayed at the very top of a webpage — typically spanning the full width of the browser viewport — that serves as the page’s primary visual statement. It is usually positioned in the “above the fold” zone alongside the page’s headline, subheading, and primary call to action, and is the first visual element a visitor encounters when the page loads.
Why It Matters: The hero image is arguably the single most impactful visual decision on any webpage. It immediately communicates the brand’s quality, style, and context — a professional, on-brand hero image builds instant credibility; a generic stock photo or low-resolution image does the opposite. The hero section (image + headline + CTA) is where most visitors decide whether to continue engaging or leave, making it the highest-stakes area of the page for conversion-focused design. Hero images also significantly affect page performance — large, unoptimised images are one of the most common causes of slow Largest Contentful Paint (LCP) scores, a Core Web Vitals metric that directly affects both user experience and search rankings.
How It Works: Hero images are typically displayed as CSS background images or HTML img elements in the hero section of a page template. Best practices include: using high-resolution, original photography or custom illustration rather than stock images where possible (authenticity signals quality), ensuring the image works as a background for legible text overlay (sufficient contrast or a colour overlay/scrim applied), optimising the file size aggressively for web delivery (using WebP format, appropriate compression, and responsive srcset attributes to serve different sizes for different screen widths), and lazy-loading images below the fold while ensuring the hero image itself loads with priority. Most WordPress page builders provide dedicated hero section components with built-in image optimisation settings.
Related: Above the Fold, Landing Page, Page Speed, Largest Contentful Paint, Conversion-Centred Design