Shopify responsive image markup and the Core Web Vitals

Sites with srcset and sizes responsive image markup have a good LCP most often: 95%, against 95% of all Shopify sites. Sites with fixed-source <img> responsive markup have it least often, at 94%.

Srcset and sizes is the most used: 96.0% of Shopify sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between srcset and sizes and fixed-source <img> sits in resource load delay: 590 ms median for srcset and sizes against 627 ms for fixed-source <img>. Overall median field LCP is 1.4s for srcset and sizes (TTFB 401 ms, load delay 590 ms, load duration 206 ms, render delay 311 ms) versus 1.4s for fixed-source <img>.

Vue sets the responsive image markup to srcset and sizes on 97% of its sites, and 94% of Vue sites have a good LCP, against 95% of all sites.

FrameworkResponsive image markup on its sitesGood LCP

Shopify sites with responsive image markup 8,223 sites<img srcset="..."> 96%Fixed-source <img> (no srcset) 75%<picture> with <source> 29%95%

Vue 933 sites<img srcset="..."> 97%Fixed-source <img> (no srcset) 85%<picture> with <source> 31%94%

jQuery 3,144 sites<img srcset="..."> 92%Fixed-source <img> (no srcset) 85%<picture> with <source> 32%93%

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

Does the framework explain the responsive image markup difference?

On jQuery, 93% of sites with srcset and sizes responsive image markup have a good LCP, against 92% of jQuery sites with fixed-source <img>. Within jQuery, sites with srcset and sizes and fixed-source <img> have a good LCP about equally often. On Vue, 95% of sites with srcset and sizes responsive image markup have a good LCP, against 94% of Vue sites with fixed-source <img>. Within Vue, sites with srcset and sizes 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.1% of sites) achieve 95% good LCP (1.4s median LCP), compared with 95% on sites using <img srcset> (96.0%) and 94% across sites with fixed-source images (74.9%).