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 88% of those sites have a good LCP, against 86% of all sites.
LCP pass rate
Sites with an <img> tag as the LCP element have a good LCP most often: 88%, against 86% of all sites. Sites with a CSS background-image as the LCP element have it least often, at 83%.
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): 550 ms median for an <img> tag against 650 ms for a CSS background-image. Overall median field LCP is 1.4s for an <img> tag (TTFB 550 ms, load delay 263 ms, load duration 112 ms, render delay 202 ms) versus 1.5s 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 88% good LCP (1.4s median). A text LCP element needs no image download at all and paints as soon as render-blocking CSS and web fonts resolve (86% good LCP, 1.3s 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 83% (1.5s 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 88% good LCP (1.4s median) and text LCP elements (26.2% of sites) reach 86% good LCP (1.3s median), whereas CSS background-image heroes (29.0% of sites) fall to 83% good LCP (1.5s median) and <video> elements (2.4%) sit at 88%.
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 (77% good LCP on <img> vs 73%).
Across WordPress sites, 35.2% paint LCP from an HTML <img> element (77% good LCP, 1.7s median) and 42.5% paint LCP from a CSS background-image (73% good LCP, 1.8s median, 4 points apart).
React & Next.js 9,390 sites React & Next.js sites with an <img> LCP element pass LCP 19 percentage points more often than sites with CSS background-image LCP.
Across React sites, 60.6% paint LCP from an <img> tag (84% good LCP, 1.4s median), 22.7% paint from text blocks (79% good LCP), and 14.6% paint from CSS background-image styles (65% good LCP, 1.9s median).
By Arjen Karel · 210,902 crawled sites (69,745 with desktop Chrome field data, 196,428 sites with as the LCP element, October 2026). How we measured.