Responsive LCP images (srcset and picture) and the Core Web Vitals
srcset, <picture>, or a single fixed image URL: how many sites ship responsive hero candidates and how responsive markup changes Largest Contentful Paint (89% with <picture> and 85% with srcset vs 82% without).
Four in five sites, 79.2%, have no responsive LCP image markup. Of the 20.8% that do, 34% use <picture>, and 89% of those sites have a good LCP, against 82% of all sites.
LCP pass rate
Sites with <picture> responsive LCP image markup have a good LCP most often: 89%, against 82% of all sites. Sites with srcset responsive markup have it least often, at 85%.
Responsive LCP image markup usage
One in five sites uses responsive LCP image markup, and two in three of those use srcset. <picture> is 34% of the sites with responsive markup, 7.0% of all sites.
How srcset and <picture> affect the four LCP phases
Across the four LCP sub-parts in Chrome's field data, the largest gap between <picture> and no sits in time to first byte (TTFB): 602 ms median for <picture> against 661 ms for no. Overall median field LCP is 1.4s for <picture> (TTFB 602 ms, load delay 293 ms, load duration 133 ms, render delay 243 ms) versus 1.5s for no.
Understanding responsive LCP image markup
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.
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, 79.2% of LCP elements ship without responsive markup (82% good LCP, 1.5s median LCP), while sites using srcset reach 85% good LCP (1.5s median) and sites using <picture> reach 89% 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.
How responsive LCP image markup plays out per platform
What the field data shows when you isolate a single CMS or framework.
WordPress 62,223 sites 79.1% of WordPress hero elements have no responsive srcset or <picture> (75% good LCP with srcset vs 69% without, 6 points apart).
WordPress core generates srcset attributes on standard <img> blocks with wp_calculate_image_srcset(). Across WordPress, 18.2% of LCP elements carry srcset (75% good LCP, 1.8s median) and 79.1% have no responsive markup (69% good LCP, 2.0s median).
Shopify 8,177 stores 69% of Shopify stores serve responsive hero markup with srcset or <picture>.
Shopify's Liquid image_tag filter generates width-descriptor srcset attributes from the widths parameter or default widths. Across Shopify, 55.5% of stores use srcset on the LCP image (96% good LCP) and 13.9% use <picture> (97% good LCP).
React & Next.js 9,390 sites React & Next.js sites with responsive srcset pass LCP at 90% vs 83% without responsive markup.
Next.js <Image> generates a responsive srcset when the sizes prop is set. Across React sites, 26.8% use srcset on the LCP image (90% good LCP, 1.3s median) and 65.0% have no responsive candidates (83% good LCP, 7 points apart).
By Arjen Karel · 210,902 crawled sites (196,263 with all devices Chrome field data, 196,430 sites with responsive LCP image markup, October 2026). How we measured.