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 87% of those sites have a good LCP, against 82% of all sites.
LCP pass rate
Sites with <picture> art direction responsive image markup have a good LCP most often: 87%, against 82% of all sites. Sites with srcset and sizes responsive markup have it least often, at 78%.
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): 630 ms median for <picture> art direction against 745 ms for srcset and sizes. Overall median field LCP is 1.5s for <picture> art direction (TTFB 630 ms, load delay 328 ms, load duration 140 ms, render delay 246 ms) versus 1.7s 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 87% good LCP (1.5s median LCP), compared with 78% on sites using <img srcset> (49.2%) and 82% 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 (78% good LCP) and 17.0% deploy <picture> elements (87% 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,177 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> (68% good LCP) and 7.5% use <picture> (71% good LCP).
Shopify 8,549 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> (95% good LCP) and 29.2% use <picture> (95% good LCP).
React & Next.js 9,502 sites React sites using <picture> (29.3%) pass LCP at 89%, 5 points above sites with fixed images.
Next.js <Image> generates responsive srcset candidate URLs. Across React sites, 84.9% use srcset on <img> (86% good LCP) and 29.3% use <picture> (89% good LCP).
By Arjen Karel · 210,902 crawled sites (126,761 with phone Chrome field data, 193,893 sites with responsive image markup, October 2026). How we measured.