LCP image format (AVIF vs WebP vs JPEG vs PNG) and the Core Web Vitals
JPEG, WebP, PNG, AVIF, SVG, or GIF on the LCP image: how much each format weighs (33 KB on AVIF vs 155 KB on JPEG) and how that changes LCP.
Half of all LCP images (49.4%) are still served as JPEG. WebP accounts for 26.8%, PNG for 14.8%, and AVIF for 6.2%. When the LCP image is AVIF, 89% of sites have a good LCP and 88% with WebP, against 86% for JPEG and 84% for PNG. Switching from JPEG to WebP or AVIF cuts median hero image transfer weight from 155 KB to 58 KB (WebP) and 33 KB (AVIF).
LCP pass rate
By LCP image format, sites have a good LCP at GIF at 91%, AVIF at 89%, WebP at 88%, JPEG at 86%, PNG at 84%, SVG at 83%. AVIF and WebP beat JPEG and PNG for two reasons. First, smaller files finish downloading faster. Second, platforms like Wix and Shopify convert hero images to AVIF or WebP at the CDN edge.
LCP image format usage
Images (<img> tags plus CSS background-image rules) are the LCP element on 71.4% of all audited sites. Across the 124,474 sites with an image LCP element, JPEG serves 49.4%, WebP serves 26.8%, PNG serves 14.8%, AVIF serves 6.2%, SVG serves 2.2%, and GIF serves 0.6%.
LCP image weight and pixel efficiency by format
AVIF serves the largest median rendered hero image (0.18 MP) at the smallest file size: 33 KB median (60 KB at p75), or 176 KB per megapixel. Median file size is 58 KB for WebP (329 KB/MP), 155 KB for JPEG (732 KB/MP), and 171 KB for PNG (1,495 KB/MP). Nearly half of all PNG (47.2%) and JPEG (42.4%) LCP images weigh over 200 KB, against 14.9% of WebP and 2.4% 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 125 ms, WebP in 119 ms, PNG in 108 ms, JPEG in 117 ms. AVIF and WebP sites also start with a faster Time to First Byte: 443 ms on AVIF and 512 ms on WebP, against 660 ms on JPEG. That gap comes from edge CDNs, which both convert images to modern formats and cache the HTML response.
Understanding LCP image format
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 176 KB/MP and finishes downloading in 125 ms. WebP needs 329 KB/MP (119 ms load time), JPEG needs 732 KB/MP (117 ms load time), and lossless PNG needs 1,495 KB/MP (108 ms load time). Because PNG is lossless, photographic hero banners saved as PNG blow up to 635 KB at the 75th percentile.
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, 49.4% of LCP images are still JPEG (155 KB median, 86% good LCP) and 14.8% are PNG (171 KB median, 84% good LCP). Switching to WebP (58 KB median, 88% good LCP) or AVIF (33 KB median, 89% good LCP) cuts median load time from 117 ms to 119 ms and 125 ms.
How LCP image format plays out per platform
What the field data shows when you isolate a single CMS or framework.
95% of Shopify store hero images use WebP or AVIF.
Shopify's CDN serves image/webp and image/avif from uploaded source images. Across Shopify hero images, 90.2% use WebP (96% good LCP, 1.3s median) and 5.0% use AVIF.
60.4% of React sites serve an AVIF hero image (1.2s median LCP).
Next.js Image Optimization supports image/avif and image/webp output formats. Across React sites, 60.4% serve AVIF hero images (92% good LCP, 1.2s median), 13.3% serve WebP, and 25% serve JPEG or PNG.
By Arjen Karel · 210,902 crawled sites (69,745 with desktop Chrome field data, 124,474 sites with an image LCP by image format, October 2026). How we measured.