Shopify LCP image format and the Core Web Vitals
JPEG, WebP, PNG, AVIF, SVG, or GIF on the LCP image: how much each format weighs (15 KB on AVIF vs 71 KB on JPEG) and how that changes LCP.
On Shopify, 4.0% of LCP images are still served as JPEG. WebP accounts for 90.1%, PNG for 0.2%, and AVIF for 5.0%. When the LCP image is AVIF, 97% of sites have a good LCP and 96% with WebP, against 95% for JPEG and 94% for PNG. Switching from JPEG to WebP or AVIF cuts median hero image transfer weight from 71 KB to 48 KB (WebP) and 15 KB (AVIF).
LCP pass rate
By LCP image format, Shopify sites have a good LCP at AVIF at 97%, WebP at 96%, JPEG at 95%. Within Shopify, WebP and AVIF beat JPEG and PNG because smaller next-gen files finish downloading faster and reduce image load duration.
LCP image format usage
Images (<img> tags plus CSS background-image rules) are the LCP element on 86.6% of audited Shopify sites. Across the 6,897 Shopify sites with an image LCP element, JPEG serves 4.0%, WebP serves 90.1%, PNG serves 0.2%, AVIF serves 5.0%, SVG serves 0.7%, and GIF serves .
LCP image weight and pixel efficiency by format
AVIF serves the largest median rendered hero image (0.08 MP) at the smallest file size: 15 KB median (23 KB at p75), or 200 KB per megapixel. Median file size is 48 KB for WebP (297 KB/MP), 71 KB for JPEG (437 KB/MP), and 16 KB for PNG (1,539 KB/MP). Nearly half of all PNG (9.1%) and JPEG (11.6%) LCP images weigh over 200 KB, against 4.3% of WebP and 0.3% of AVIF.
Resource load time and the four LCP phases by image format
Smaller image files reduce resource load duration: AVIF downloads in a median 209 ms, WebP in 211 ms, PNG in 194 ms, JPEG in 222 ms.
LCP image format per framework
Vue serves WebP on 91% of its sites, and 95% of Vue sites have a good LCP.
Vue 783 sitesWebP 91%95%
jQuery 2,664 sitesWebP 89%94%LCP image format or the framework
Does the framework explain the AVIF and WebP pass rate?
On jQuery, 94% of sites with a WebP LCP image and 95% with AVIF have a good LCP, compared with 91% for JPEG.
Why image format changes resource load time, not load delay
An LCP image spends time in four stages: Time to First Byte, resource load delay, resource load time, and element render delay. The image format only touches resource load time, the window between the first and last byte of the image file. At the median resolution in this dataset, AVIF packs a megapixel into 200 KB/MP and finishes downloading in 209 ms. WebP needs 297 KB/MP (211 ms load time), JPEG needs 437 KB/MP (222 ms load time), and lossless PNG needs 1,539 KB/MP (194 ms load time). Because PNG is lossless, photographic hero banners saved as PNG blow up to 176 KB at the 75th percentile.
Understanding LCP image format
Serve photographic LCP images as AVIF or WebP, and keep PNG for logos or flat graphics that need lossless pixels. You do not have to convert files by hand. An image CDN or a <picture> element with <source type="image/avif"> and <source type="image/webp"> lets each browser pick the smallest format it supports. Across this dataset, 4.0% of LCP images are still JPEG (71 KB median, 95% good LCP) and 0.2% are PNG (16 KB median, 94% good LCP). Switching to WebP (48 KB median, 96% good LCP) or AVIF (15 KB median, 97% good LCP) cuts median load time from 222 ms to 211 ms and 209 ms.
By Arjen Karel · 8,246 crawled Shopify sites (8,062 with all devices Chrome field data, 6,897 sites with an image LCP by image format, October 2026). How we measured.