Shopify image formats across the page and the Core Web Vitals

Sites with AVIF images page image format mix have a good LCP most often: 97%, against 97% of all Shopify sites. Sites with GIF images image formats have it least often, at 95%.

WebP images is the most used: 99.3% of Shopify sites. AVIF images is 90.6% of Shopify sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between AVIF images and GIF images sits in resource load delay: 632 ms median for AVIF images against 715 ms for GIF images. Overall median field LCP is 1.3s for AVIF images (TTFB 304 ms, load delay 632 ms, load duration 153 ms, render delay 307 ms) versus 1.4s for GIF images.

jQuery sets the page image format mix to AVIF images on 93% of its sites, and 95% of jQuery sites have a good LCP, against 97% of all sites. Vue sets the page image format mix to WebP images on 100% of its sites, and 97% of Vue sites have a good LCP.

FrameworkPage image format mix on its sitesGood LCP

Shopify sites with page image format mix 8,240 sitesWebP images 99%AVIF images 91%SVG vector graphics 60%JPEG images 51%PNG images 48%Other image formats 39%GIF images / beacons 26%97%

Vue 933 sitesWebP images 100%AVIF images 92%SVG vector graphics 70%JPEG images 57%PNG images 56%Other image formats 44%GIF images / beacons 29%97%

jQuery 3,149 sitesWebP images 99%AVIF images 93%SVG vector graphics 67%PNG images 58%JPEG images 55%Other image formats 46%GIF images / beacons 37%95%

WebP images AVIF images SVG vector graphics JPEG images PNG images Other image formats GIF images / beacons

Does the framework explain the page image format mix difference?

On jQuery, 95% of sites with AVIF images page image format mix have a good LCP, against 95% of jQuery sites with WebP images. Within jQuery, sites with AVIF images and WebP images have a good LCP about equally often. On Vue, 97% of sites with AVIF images page image format mix have a good LCP, against 97% of Vue sites with WebP images. Within Vue, sites with AVIF images and WebP images have a good LCP about equally often.

How AVIF and WebP across the page cut transfer weight and free bandwidth for LCP

Even when the LCP element itself is optimized, legacy PNG and JPEG assets elsewhere in the viewport compete for bandwidth on the same connection. Across 7,466 sites (90.6%) serving AVIF images, 97% pass field LCP (1.3s median). WebP is present on 99.3% of sites (97% good LCP), whereas legacy PNG (48.3%, 96% good LCP) and JPEG (51.1%, 96% good LCP) remain on four out of five pages.