LCP element types (img, CSS background, text, video) and the Core Web Vitals
An <img> tag (42.4%), a CSS background-image (29.0%), a text block (26.2%), or a <video> poster (2.4%): which element triggers Largest Contentful Paint across the web and how each element type performs.
42.4% of sites use an <img> tag as the LCP element, and 85% of those sites have a good LCP, against 82% of all sites.
LCP pass rate
Sites with an <img> tag as the LCP element have a good LCP most often: 85%, against 82% of all sites. Sites with a CSS background-image as the LCP element have it least often, at 78%.
As the LCP element usage
An <img> tag is the most used: 42.4% of sites.
Where each LCP element type spends time: the four LCP phases
Across the four LCP sub-parts in Chrome's field data, the largest gap between an <img> tag and a CSS background-image sits in time to first byte (TTFB): 606 ms median for an <img> tag against 766 ms for a CSS background-image. Overall median field LCP is 1.5s for an <img> tag (TTFB 606 ms, load delay 281 ms, load duration 142 ms, render delay 240 ms) versus 1.7s for a CSS background-image.
Understanding LCP element types
Why <img> and text blocks beat CSS background-image heroes
An <img> element in the HTML markup is visible to Chrome's preload scanner immediately and supports fetchpriority="high", srcset, and modern formats, reaching 85% good LCP (1.5s median). A text LCP element needs no image download at all and paints as soon as render-blocking CSS and web fonts resolve (83% good LCP, 1.5s median). A CSS background-image hides the image URL from the preload scanner until stylesheets are parsed and matched against the DOM, dropping good LCP to 78% (1.7s median).
Use a standard HTML <img> element (with object-fit: cover if it sits behind a headline) or a fast text heading for your hero section, and avoid CSS background-image for above-the-fold banners. Across all audited sites, <img> elements (42.4% of sites) reach 85% good LCP (1.5s median) and text LCP elements (26.2% of sites) reach 83% good LCP (1.5s median), whereas CSS background-image heroes (29.0% of sites) fall to 78% good LCP (1.7s median) and <video> elements (2.4%) sit at 81%.
How as the LCP element plays out per platform
What the field data shows when you isolate a single CMS or framework.
WordPress 62,223 sites 42.5% of WordPress sites paint LCP from a CSS background-image (73% good LCP on <img> vs 67%).
Across WordPress sites, 35.2% paint LCP from an HTML <img> element (73% good LCP, 1.8s median) and 42.5% paint LCP from a CSS background-image (67% good LCP, 2.0s median, 6 points apart).
React & Next.js 9,390 sites React & Next.js sites with an <img> LCP element pass LCP 23 percentage points more often than sites with CSS background-image LCP.
Across React sites, 60.6% paint LCP from an <img> tag (89% good LCP, 1.3s median), 22.7% paint from text blocks (87% good LCP), and 14.6% paint from CSS background-image styles (66% good LCP, 2.0s median).
By Arjen Karel · 210,902 crawled sites (196,263 with all devices Chrome field data, 196,428 sites with as the LCP element, October 2026). How we measured.