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 (91% with <picture> and 87% with srcset vs 85% without).
Four in five sites, 79.2%, have no responsive LCP image markup. Of the 20.8% that do, 34% use <picture>, and 91% of those sites have a good LCP, against 86% of all sites.
LCP pass rate
Sites with <picture> responsive LCP image markup have a good LCP most often: 91%, against 86% of all sites. Sites with srcset responsive markup have it least often, at 87%.
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): 528 ms median for <picture> against 586 ms for no. Overall median field LCP is 1.3s for <picture> (TTFB 528 ms, load delay 265 ms, load duration 114 ms, render delay 207 ms) versus 1.4s for no.
Responsive LCP image markup per platform
On WordPress, 79% of sites use no responsive LCP image markup, and 76% of WordPress sites have a good LCP, against 86% of all sites. On Shopify, 56% of sites use srcset, and 97% of Shopify sites have a good LCP.
Shopify 8,177 sitessrcset attribute 56%No responsive markup 31%<picture> element 14%97%
Squarespace 2,000 sitesNo responsive markup 53%srcset attribute 46%94%
Drupal 3,093 sitesNo responsive markup 78%<picture> element 19%93%
Joomla 2,439 sitesNo responsive markup 89%93%
Wix 5,792 sitesNo responsive markup 61%srcset attribute 29%92%
Adobe Commerce 1,057 sitesNo responsive markup 74%<picture> element 25%83%
WordPress 62,223 sitesNo responsive markup 79%srcset attribute 18%76%Responsive LCP markup or the platform
Does the platform explain the responsive LCP image markup difference?
On Shopify, 97% of sites with srcset responsive LCP image markup have a good LCP, against 96% of Shopify sites without responsive LCP image markup. Within Shopify, sites with and without responsive LCP image markup 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, 79.2% of LCP elements ship without responsive markup (85% good LCP, 1.4s median LCP), while sites using srcset reach 87% good LCP (1.4s median) and sites using <picture> reach 91% good LCP (1.3s 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 · 210,902 crawled sites (69,745 with desktop Chrome field data, 196,430 sites with responsive LCP image markup, October 2026). How we measured.