Responsive LCP image markup on React sites
srcset, <picture>, or a single fixed image URL: how many sites ship responsive hero candidates and how responsive markup changes Largest Contentful Paint (85% with <picture> and 89% with srcset vs 82% without).
Two in three React sites, 65.0%, have no responsive LCP image markup. Of the 35.0% that do, 77% use srcset, and 89% of those sites have a good LCP, against 84% of all React sites.
LCP pass rate
Sites with srcset responsive LCP image markup have a good LCP most often: 89%, against 84% of all React sites. Sites with <picture> responsive markup have it least often, at 85%.
Responsive LCP image markup usage
One in three React sites uses responsive LCP image markup, and three in four of those use srcset.
How srcset and <picture> affect the four LCP phases
Across the four LCP sub-parts in Chrome's field data, the largest gap between srcset and no sits in resource load delay: 370 ms median for srcset against 455 ms for no. Overall median field LCP is 1.3s for srcset (TTFB 474 ms, load delay 370 ms, load duration 119 ms, render delay 192 ms) versus 1.4s for no.
Responsive LCP image markup per platform
On Wix, 61% of sites use no responsive LCP image markup, and 94% of Wix sites have a good LCP, against 84% of all sites. On WordPress, 76% of sites use no, and 63% of WordPress sites have a good LCP.
Wix 5,791 sitesNo responsive markup 61%srcset attribute 29%94%
WordPress 2,219 sitesNo responsive markup 76%srcset attribute 21%63%Responsive LCP markup or the platform
Does the platform explain the responsive LCP image markup difference?
On Wix, 95% of sites with srcset responsive LCP image markup have a good LCP, against 94% of Wix sites with no. Within Wix, sites with srcset and no have a good LCP about equally often. On WordPress, 68% of sites with srcset responsive LCP image markup have a good LCP, against 61% of WordPress sites with no. Within WordPress, sites with srcset and no have a good LCP about equally often.
Why srcset and <picture> matter most on mobile viewports
Without srcset or <picture>, a mobile phone on a cellular connection downloads the same 1600px or 2000px hero banner prepared for a desktop monitor. Providing width descriptors in srcset with a matching sizes attribute lets Chrome's preload scanner pick the candidate that fits the device's screen width and pixel ratio before layout runs.
Understanding responsive LCP image markup
Provide responsive width candidates on your LCP <img> with srcset and a matching sizes attribute, or wrap it in <picture> when art direction crops differ between mobile and desktop. Across all audited sites, 65.0% of LCP elements ship without responsive markup (82% good LCP, 1.5s median LCP), while sites using srcset reach 89% good LCP (1.3s median) and sites using <picture> reach 85% good LCP (1.4s median). Always pair srcset with an explicit sizes attribute (for example sizes="100vw" on a full-bleed hero) so Chrome does not default to assuming 100vw when the image is narrower.
By Arjen Karel · 9,570 crawled React sites (5,488 with phone Chrome field data, 9,390 sites with responsive LCP image markup, October 2026). How we measured.