Responsive image markup on React sites

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

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): 502 ms median for <picture> art direction against 722 ms for fixed-source <img>. Overall median field LCP is 1.4s for <picture> art direction (TTFB 502 ms, load delay 465 ms, load duration 161 ms, render delay 161 ms) versus 1.6s for fixed-source <img>.

On Wix, 91% of sites use fixed-source <img> responsive image markup, and 92% of Wix sites have a good LCP, against 79% of all sites. On WordPress, 94% of sites use fixed-source <img>, and 66% 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%79%

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

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

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

Does the platform explain the responsive image markup difference?

On Wix, 90% of sites with <picture> art direction responsive image markup have a good LCP, against 92% of Wix sites with fixed-source <img>. Within Wix, sites with <picture> art direction and fixed-source <img> have a good LCP about equally often. On WordPress, 72% of sites with <picture> art direction responsive image markup have a good LCP, against 66% 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 86% good LCP (1.4s median LCP), compared with 79% on sites using <img srcset> (84.9%) and 78% across sites with fixed-source images (91.3%).