WordPress responsive image markup (srcset, picture) and the Core Web Vitals

Sites with <picture> art direction responsive image markup have a good LCP most often: 77%, against 76% of all WordPress sites. Sites with srcset and sizes responsive markup have it least often, at 75%.

Fixed-source <img> is the most used: 92.3% of WordPress sites. <picture> art direction is 7.4% of WordPress sites.

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): 979 ms median for <picture> art direction against 1034 ms for srcset and sizes. Overall median field LCP is 1.7s for <picture> art direction (TTFB 979 ms, load delay 289 ms, load duration 121 ms, render delay 228 ms) versus 1.8s for srcset and sizes.

On jQuery, 93% of sites use fixed-source <img> responsive image markup, and 75% of jQuery sites have a good LCP, against 76% of all sites. On Vue, 92% of sites use fixed-source <img>, and 75% of Vue sites have a good LCP.

FrameworkResponsive image markup on its sitesGood LCP

WordPress sites with responsive image markup 62,969 sitesFixed-source <img> (no srcset) 92%<img srcset="..."> 81%76%

Alpine 379 sitesFixed-source <img> (no srcset) 96%<img srcset="..."> 61%<picture> with <source> 23%82%

jQuery 60,046 sitesFixed-source <img> (no srcset) 93%<img srcset="..."> 81%75%

Vue 4,829 sitesFixed-source <img> (no srcset) 92%<img srcset="..."> 91%<picture> with <source> 11%75%

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

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

Does the framework explain the responsive image markup difference?

On jQuery, 77% of sites with <picture> art direction responsive image markup have a good LCP, against 75% of jQuery sites with fixed-source <img>. Within jQuery, sites with <picture> art direction and fixed-source <img> have a good LCP about equally often. On Vue, 79% of sites with <picture> art direction responsive image markup have a good LCP, against 75% of Vue sites with fixed-source <img>. Within Vue, 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 (7.4% of sites) achieve 77% good LCP (1.7s median LCP), compared with 75% on sites using <img srcset> (80.9%) and 76% across sites with fixed-source images (92.3%).