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, 96% of sites have a good LCP and 95% with WebP, against 93% for JPEG and 93% 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 96%, WebP at 95%, JPEG at 93%. 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 195 ms, WebP in 208 ms, PNG in 217 ms, JPEG in 235 ms. AVIF and WebP sites also start with a faster Time to First Byte: 394 ms on AVIF and 400 ms on WebP, against 408 ms on JPEG. That gap comes from edge CDNs, which both convert images to modern formats and cache the HTML response.
LCP image format per framework
Vue serves WebP on 91% of its sites, and 94% of Vue sites have a good LCP.
Vue 783 sitesWebP 91%94%
jQuery 2,664 sitesWebP 89%93%LCP image format or the framework
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 195 ms. WebP needs 297 KB/MP (208 ms load time), JPEG needs 437 KB/MP (235 ms load time), and lossless PNG needs 1,539 KB/MP (217 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, 93% good LCP) and 0.2% are PNG (16 KB median, 93% good LCP). Switching to WebP (48 KB median, 95% good LCP) or AVIF (15 KB median, 96% good LCP) cuts median load time from 235 ms to 208 ms and 195 ms.
By Arjen Karel · 8,246 crawled Shopify sites (5,825 with phone Chrome field data, 6,897 sites with an image LCP by image format, October 2026). How we measured.