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: 71%, against 70% of all WordPress sites. Sites with srcset and sizes responsive markup have it least often, at 69%.

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): 1128 ms median for <picture> art direction against 1156 ms for srcset and sizes. Overall median field LCP is 1.9s for <picture> art direction (TTFB 1128 ms, load delay 360 ms, load duration 151 ms, render delay 246 ms) versus 2.0s for srcset and sizes.

On jQuery, 93% of sites use fixed-source <img> responsive image markup, and 69% of jQuery sites have a good LCP, against 70% of all sites. On Vue, 92% of sites use fixed-source <img>, and 68% 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%70%

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

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

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

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

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

Does the framework explain the responsive image markup difference?

On jQuery, 70% of sites with <picture> art direction responsive image markup have a good LCP, against 69% 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, 70% of sites with <picture> art direction responsive image markup have a good LCP, against 68% 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 71% good LCP (1.9s median LCP), compared with 69% on sites using <img srcset> (80.9%) and 70% across sites with fixed-source images (92.3%).