A hero image is the large lead picture at the top of a web page, app screen, online store page or advertising unit, usually set behind or beside a headline and a call-to-action button. The format exists because visitors judge relevance within moments, and one dominant visual conveys a brand, product or offer faster than text. It also carries a technical cost. On most pages the largest element in the first screen is an image, so the lead picture frequently decides the Largest Contentful Paint (LCP) time, the loading measure reported under Google's Core Web Vitals programme.

Anatomy and placement

Microsoft's Atlas design system defines the hero as a container, intended to be full width and often placed at the top of a page, holding a headline, a button and an optional image or video, placed beside the text or as a full-bleed background.

On websites, designers and developers build it. In paid media, a brand team or agency supplies the file while the platform decides how it is cropped and where it runs: Amazon Brand Stores take it as a page-header upload, Reddit opens a product carousel with it, and Amazon's homepage sells the space as a placement.

Native advertising has a protocol-level counterpart. The Interactive Advertising Bureau (IAB) Tech Lab's OpenRTB Native Ads Specification 1.2, finalised in 2017, defines image asset type 3, called Main, as the large image preview for an ad, in 1:1, 4:3 or 1.91:1 ratios, with a large variant needing a maximum height of at least 627 pixels.

Automation increasingly supplies the picture: Microsoft Advertising's native asset generation beta, announced on September 23, 2024, collects images from the landing page, and Performance Max offers comparable image extraction as an opt-in or opt-out setting.

How the browser loads it

LCP records when the largest image, video poster or block of text in the viewport is painted. According to web.dev, qualifying elements include img elements, images inside scalable vector graphics, video posters, background images set in style sheets and block-level text. Under Core Web Vitals, 2.5 seconds or less counts as good and above 4 seconds as poor, measured at the 75th percentile of page loads. web.dev suggests a rough budget across four sub-parts: about 40% for time to first byte (TTFB), under 10% for the delay before the image request starts, about 40% for the download and under 10% for the wait before painting.

Three settings decide whether the lead picture stays within that budget. Discoverability comes first: the browser's preload scanner finds only images present in the HTML source, so pictures injected by JavaScript, held in a data-src attribute or referenced from a style sheet start late unless preloaded. Priority comes second. The fetchpriority="high" attribute raises the request's rank, and web.dev advises limiting it to one or two images; in a Google Flights test published by web.dev, adding it to the hero image cut LCP from 2.6 seconds to 1.9 seconds. Lazy loading, which defers an image until it nears the viewport, comes third. web.dev states that the LCP image should never be lazy-loaded.

Sources disagree on when fetch priority arrived: Chrome's release notes place it in Chrome 101, whereas web.dev's support table lists Chrome 102, Firefox 132 and Safari 17.2.

Adoption trails the guidance. The HTTP Archive's Web Almanac 2025, using July 2025 crawl data, found an image as the LCP element on 85.3% of desktop pages and 76% of mobile pages. About 16% to 17% of pages lazy-load that image, and roughly 17% of mobile pages set high fetch priority on it.

Specifications on advertising platforms

Amazon Ads' Stores creative guidelines call the header picture a hero image. As of October 2026 the hero image must be at least 3,000 by 600 pixels and no larger than 5 MB, and it appears at the top of every Store page, above the navigation bar. Amazon warns that in some cases up to 30% of the width, 15% from each side, is cropped, and discourages embedded text because search engines and screen readers cannot read it.

Google's setup is looser. According to Google Ads Help, Performance Max requires landscape 1.91:1 and square 1:1 images, recommending 1200 by 628 and 1200 by 1200 pixels, and accepts an optional 4:5 portrait at 960 by 1200, up to 5 MB each. The page names no hero slot. As PPC Land's creative explainer notes, Google's campaign types take headlines, images, logos and videos as separate assets and combine them automatically. Demand Gen uses the same three ratios.

Reddit announced Collection Ads on March 24, 2026 at Shoptalk, placing a lifestyle hero image above product tiles whose price and availability update from the advertiser's catalogue. Reddit said early advertisers following its best practices saw an 8% lift in return on ad spend (ROAS) over standard dynamic product ads, a company figure without independent verification. PPC Land's shoppable ads explainer lists the format as a hero image paired with shoppable product tiles.

Origin and evolution

No standards body defines the term. It came from web design practice; Bootstrap 2.x shipped a hero-unit component that Bootstrap 3.0 renamed jumbotron, according to the project's migration guide.

Kara Pernice of Nielsen Norman Group (NN/g) wrote on September 14, 2013 that people often scroll past large rotating images, and on September 28, 2014 her colleague Kathryn Whitenton argued that oversized imagery can push key tasks down the page.

Measurement came later. web.dev published its LCP guide on August 8, 2019, and Chrome 77 added the metric that year. On May 5, 2020 Google's Chromium team named LCP one of the Core Web Vitals; the mobile page experience rollout began on June 15, 2021 and the desktop rollout on February 22, 2022. Google removed the Page Experience report from Search Console on November 18, 2024 but kept LCP in the Core Web Vitals report, and Safari 26.2, released in December 2025, completed LCP support across the major browsers.

Why it matters to marketers

Noel Ceta of Apollo Digital and Local SEO reported on November 7, 2025 that an agency had lazy-loaded a client's hero image: its PageSpeed score rose from 65 to 92, yet field LCP worsened from 1.8 to 4.2 seconds and traffic fell 20%. The figures are the agency's own. Martin Splitt, a Google developer relations engineer, said on the Search Off the Record podcast in August 2025 that lazy loading images which should appear immediately is the most significant implementation error, while calling Core Web Vitals a "tiny, minute factor" for ranking in most cases.

A web.dev case study written by the Nuvemshop team and published on June 24, 2026 described removing lazy loading from first images, adding high fetch priority and expanding edge caching. Stores with a good LCP rose from 57% to 96% between January 2025 and January 2026, and mobile organic conversion rose 8.9%, in a self-reported before-and-after comparison, not a controlled test.

In paid media the picture also shapes buying. Amazon introduced fractional share of voice for homepage hero placements on November 12, 2025, letting advertisers buy 5%, 10%, 25%, 50% or 100% of visibility where a full day of exclusivity had generally been required. Reddit's own 2026 creative study, covering nearly 150,000 in-feed ads, found 4:5 images converting better than 1:1 or 16:9 and text overlays lowering average image conversion by 13%, urgency messaging excepted.

Limitations and disputes

Attention is the oldest objection. Pernice cited NN/g eyetracking in which animated ads were looked at 27% of the time and suggested considering a static lead image before a carousel; Whitenton's 2014 critique rested on observation rather than measurement.

Speed arguments are contested as well. Lab scores can reward changes that hurt real users. Cloudflare's BEACON dataset, released on September 28, 2026, draws on billions of measurements from 10,000 of the largest sites on its network. Its authors wrote that downloading an image, font or video typically contributes least to loading time; at the poor threshold, render delay stood at 2,002 milliseconds and time to first byte at 1,891 milliseconds, against 119 for load duration.

Text inside pictures is the other fault line. Success criterion 1.4.5 of the Web Content Accessibility Guidelines (WCAG) 2.2, at Level AA, asks for real text instead of images of text where technology allows, with logotypes exempt.

Not the same as

Header or banner image. Often interchangeable. Amazon's Stores specification places the hero image and a separate 400 by 400 pixel brand logo inside the Store header.

Featured image or og:image. The Open Graph protocol defines og:image as an image URL representing an object within the social graph. It drives link previews and need not appear on the page.

Main image. On Amazon product listings it is a packshot: pure white background, at least 1,000 pixels on the longest side and the product filling roughly 85% to 100% of the frame, according to a post by an Amazon-labelled account in the Seller Central forums.

Hero placement. The bought slot, not the file. PPC Land's home screen advertising explainer notes that Amazon's Fire TV Feature Rotator lead position works as a hero area that can carry interactive video.

Recent developments

Amazon launched Brand Gallery on May 28, 2026, a Sponsored Brands format for reserve share of voice placements in 19 markets, combining a media block of lifestyle imagery, brand messaging, a call to action and a carousel of three to five Brand Store categories. Google's image model Nano Banana Pro, announced on November 20, 2025, reached Asset Studio for Performance Max and Demand Gen, supporting up to five products in one generated scene.

Timeline

  • September 14, 2013: Nielsen Norman Group publishes its carousel usability article
  • September 28, 2014: Nielsen Norman Group publishes "Image-Focused Design: Is Bigger Better?"
  • March 2017: IAB Tech Lab publishes OpenRTB Native Ads Specification 1.2, defining Main as image asset type 3
  • August 8, 2019: web.dev first publishes its Largest Contentful Paint guide
  • 2019: Chrome 77 adds LCP
  • May 5, 2020: Google's Chromium team names LCP a Core Web Vital
  • June 15, 2021: mobile page experience rollout begins
  • February 22, 2022: desktop page experience rollout begins
  • May 3, 2022: Chrome release notes describe Fetch Priority as part of Chrome 101
  • September 23, 2024: Microsoft announces its native asset generation open beta
  • October 2024: MDN marks fetchpriority as Baseline newly available
  • November 18, 2024: Google removes the Page Experience report from Search Console
  • July 2025: HTTP Archive crawl underlying the Web Almanac 2025 performance chapter
  • August 21, 2025: Search Off the Record episode 98 discusses lazy loading
  • November 7, 2025: agency case links lazy loading of a hero image to a 20% traffic fall
  • November 12, 2025: Amazon introduces fractional share of voice for homepage hero placements
  • November 20, 2025: Google announces Nano Banana Pro
  • December 2025: Safari 26.2 adds LCP support
  • March 24, 2026: Reddit announces Collection Ads
  • May 23, 2026: Reddit publishes its 2026 creative study
  • May 28, 2026: Amazon launches Brand Gallery
  • June 24, 2026: web.dev publishes the Nuvemshop LCP case study
  • September 28, 2026: Cloudflare publishes the BEACON dataset

Summary

Who. Web designers and developers build lead pictures on sites. Brand teams and agencies supply them to platforms such as Amazon, Reddit, Google and Microsoft, which set the specifications. Standards and measurement come from IAB Tech Lab, Google's Chrome team, web.dev, the HTTP Archive and the World Wide Web Consortium (W3C).

What. The large lead picture at the top of a page, store page or ad unit, usually paired with a headline and a button, and on most pages the element that determines LCP.

When. The term entered design-system vocabulary in Bootstrap 2.x and 3.0. Measurement formalised between August 2019 and May 2020, with search page experience rollouts from June 2021 and platform-specific formats such as Collection Ads and Brand Gallery in 2026.

Where. At the top of websites, Amazon Brand Stores and homepage placements, Reddit's product carousels, native ad units and connected TV home screens.

Why. One dominant visual sets first impressions and, through LCP, loading speed. The same file can raise recognition or slow a page, which is why specifications, loading attributes and cropping rules attract disputes.