Page-wide responsive image markup (srcset, <picture>) and the Core Web Vitals
Fixed-source <img> (92.6%), srcset and sizes (49.2%), and <picture> elements (17.0%): how responsive image markup across the page moves Largest Contentful Paint.
17.0% of sites use <picture> art direction responsive image markup, and 90% of those sites have a good LCP, against 86% of all sites.
LCP pass rate
Sites with <picture> art direction responsive image markup have a good LCP most often: 90%, against 86% of all sites. Sites with srcset and sizes responsive markup have it least often, at 83%.
Responsive image markup usage
Fixed-source <img> is the most used: 92.6% of sites. <picture> art direction is 17.0% of sites.
Where responsive image markup saves time: the four LCP phases
Across the four LCP sub-parts in Chrome's field data, the largest gap between <picture> art direction and srcset and sizes sits in time to first byte (TTFB): 559 ms median for <picture> art direction against 658 ms for srcset and sizes. Overall median field LCP is 1.4s for <picture> art direction (TTFB 559 ms, load delay 270 ms, load duration 111 ms, render delay 203 ms) versus 1.5s for srcset and sizes.
Understanding responsive image markup
How srcset and <picture> select candidate URLs during preload scanning
Chromium's preload scanner evaluates <source media="..." type="..."> and <img srcset="..." sizes="..."> before the main parser builds the DOM. Sites that serve responsive <picture> elements (17.0% of sites) achieve 90% good LCP (1.4s median LCP), compared with 83% on sites using <img srcset> (49.2%) and 86% across sites with fixed-source images (92.6%).
Use <img srcset sizes> for multi-width content images and <picture> when serving mobile-specific crops or modern formats with fallbacks. Nearly every site (92.6%) has at least one fixed-source <img> for UI icons or logos, while 49.2% use <img srcset> on content images (83% good LCP) and 17.0% deploy <picture> elements (90% good LCP). Always pair srcset with an accurate sizes attribute so mobile browsers do not download desktop-width candidates.
How responsive image markup plays out per platform
What the field data shows when you isolate a single CMS or framework.
WordPress 65,604 sites WordPress generates srcset on 81% of sites, while 7.5% use <picture>.
WordPress core adds srcset and sizes to attachment images with wp_calculate_image_srcset(). Across WordPress, 80.9% of sites use srcset on <img> (75% good LCP) and 7.5% use <picture> (77% good LCP).
Shopify 8,609 stores Shopify's image_tag filter outputs srcset on 96.0% of stores and <picture> appears on 29.2%.
Shopify's Liquid image_tag filter generates srcset attributes from its widths parameter or default widths. Across Shopify, 96.0% of storefronts use srcset on <img> (97% good LCP) and 29.2% use <picture> (97% good LCP).
React & Next.js 9,590 sites React sites using <picture> (29.2%) pass LCP at 86%, 8 points above sites with fixed images.
Next.js <Image> generates responsive srcset candidate URLs. Across React sites, 85.0% use srcset on <img> (80% good LCP) and 29.2% use <picture> (86% good LCP).
By Arjen Karel · 212,308 crawled sites (70,213 with desktop Chrome field data, 195,226 sites with responsive image markup, October 2026). How we measured.