Responsive image markup on React sites

Sites with <picture> art direction responsive image markup have a good LCP most often: 90%, against 85% of all React sites. Sites with fixed-source <img> responsive markup have it least often, at 84%.

Fixed-source <img> is the most used: 91.3% of React sites. <picture> art direction is 29.3% of React sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between <picture> art direction and fixed-source <img> sits in time to first byte (TTFB): 452 ms median for <picture> art direction against 525 ms for fixed-source <img>. Overall median field LCP is 1.3s for <picture> art direction (TTFB 452 ms, load delay 487 ms, load duration 163 ms, render delay 158 ms) versus 1.4s for fixed-source <img>.

On Wix, 91% of sites use fixed-source <img> responsive image markup, and 94% of Wix sites have a good LCP, against 85% of all sites. On WordPress, 94% of sites use fixed-source <img>, and 61% of WordPress sites have a good LCP.

PlatformResponsive image markup on its sitesGood LCP

React sites with responsive image markup 9,502 sitesFixed-source <img> (no srcset) 91%<img srcset="..."> 85%<picture> with <source> 29%85%

Wix 5,802 sitesFixed-source <img> (no srcset) 91%<img srcset="..."> 91%<picture> with <source> 38%94%

WordPress 2,334 sitesFixed-source <img> (no srcset) 94%<img srcset="..."> 85%61%

Fixed-source <img> (no srcset) <img srcset="..."> <picture> with <source>

Does the platform explain the responsive image markup difference?

On Wix, 92% of sites with <picture> art direction responsive image markup have a good LCP, against 94% of Wix sites with fixed-source <img>. Within Wix, sites with <picture> art direction have a good LCP less often. On WordPress, 63% of sites with <picture> art direction responsive image markup have a good LCP, against 60% of WordPress sites with fixed-source <img>. Within WordPress, sites with <picture> art direction and fixed-source <img> have a good LCP about equally often.

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 (29.3% of sites) achieve 90% good LCP (1.3s median LCP), compared with 86% on sites using <img srcset> (84.9%) and 84% across sites with fixed-source images (91.3%).