WordPress responsive LCP images (srcset, 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 (80% with <picture> and 77% with srcset vs 75% without).
Four in five WordPress sites, 79.1%, have no responsive LCP image markup. Of the 20.9% that do, 13% use <picture>, and 80% of those sites have a good LCP, against 76% of all WordPress sites.
LCP pass rate
Sites with <picture> responsive LCP image markup have a good LCP most often: 80%, against 76% of all WordPress sites. Sites with srcset responsive markup have it least often, at 77%.
Responsive LCP image markup usage
One in five WordPress sites uses responsive LCP image markup, and 87% of those use srcset. <picture> is 13% of the sites with responsive markup, 2.7% of all WordPress 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): 933 ms median for <picture> against 1010 ms for no. Overall median field LCP is 1.7s for <picture> (TTFB 933 ms, load delay 272 ms, load duration 117 ms, render delay 228 ms) versus 1.8s for no.
Responsive LCP image markup per framework
On jQuery, 80% of sites use no responsive LCP image markup, and 75% of jQuery sites have a good LCP, against 76% of all sites. On Vue, 82% of sites use no, and 75% of Vue sites have a good LCP.
Alpine 349 sitesNo responsive markup 70%srcset attribute 16%<picture> element 14%82%
jQuery 57,286 sitesNo responsive markup 80%srcset attribute 18%75%
Vue 4,721 sitesNo responsive markup 82%srcset attribute 15%75%
React 2,117 sitesNo responsive markup 76%srcset attribute 21%66%Responsive LCP markup or the framework
Does the framework explain the responsive LCP image markup difference?
On jQuery, 79% of sites with <picture> responsive LCP image markup have a good LCP, against 75% of jQuery sites with no. Within jQuery, sites with <picture> and no have a good LCP about equally often. On Vue, 74% of sites with no responsive LCP image markup have a good LCP, against 76% of Vue sites with srcset. Within Vue, sites with no and srcset 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
Render hero banners through wp_get_attachment_image() with an accurate sizes attribute instead of hardcoding a raw file URL or a CSS background-image. WordPress core has generated srcset automatically since version 4.4, yet 79.1% of WordPress LCP elements have no responsive markup because CSS background images and custom page-builder blocks bypass core image helpers. WordPress sites using <picture> (80% good LCP) or srcset (77% good LCP) beat fixed hero images (75% good LCP).
By Arjen Karel · 63,295 crawled WordPress sites (17,005 with desktop Chrome field data, 60,125 sites with responsive LCP image markup, October 2026). How we measured.