The image format you choose has a direct, measurable impact on your Core Web Vitals LCP score. A 1200px hero image saved as a PNG might weigh 1.8 MB. The same image in JPEG at 85 quality might be 280 KB. In WebP at equivalent visual quality, it could be 190 KB. In AVIF, as low as 130 KB. That difference in download time — especially on mobile connections — can push your LCP from 4+ seconds (Poor) to under 2.5 seconds (Good) without changing a single pixel of your design.
But file size isn't the only variable. Decode time, browser support, and the complexity of implementation all factor into which format actually delivers the best image optimization lcp score improvement in real-world deployments. This comparison gives you the data you need to make the right choice.
Format Performance Comparison Table
| Format | Typical File Size* | Decode Speed | Browser Support | Transparency | LCP Impact |
|---|---|---|---|---|---|
| JPEG | 280 KB (baseline) | Very fast | 100% | No | Moderate (fallback) |
| PNG | 800 KB – 2 MB | Fast | 100% | Yes | Poor (too large) |
| WebP Recommended | 185 KB (33% smaller) | Fast | 96% (all modern) | Yes | Excellent |
| AVIF | 130 KB (54% smaller) | Moderate | 89% (Chrome, Firefox, Safari 16+) | Yes | Excellent (but slower decode) |
*Based on a representative 1200×630px photographic hero image at equivalent visual quality
Format Deep Dives: What the Numbers Mean for LCP
JPEG — The Universal Fallback
JPEG has been the web's default photograph format for 30 years. It's supported everywhere, decoded instantly, and every image editing tool on earth exports it. For LCP purposes, it's your reliable fallback for browsers that don't support WebP — but should not be your primary format.
When to use: As the fallback source in a <picture> element behind WebP or AVIF. Never as the primary format for a modern site targeting Good LCP.
Optimal quality setting: 80-85 for photographic content (the visual difference above 85 is indistinguishable at normal viewing distances).
PNG — Avoid for LCP Images
PNG is lossless, which sounds like a quality advantage but is actually a size penalty. For photographic content, PNG files are 4-10x larger than equivalent JPEG files, making them catastrophic for LCP. PNG is appropriate for logos, icons, and graphics with transparency and sharp edges — never for hero photographs.
When to use: Screenshots, logos, UI elements with transparency. Convert to WebP with transparency instead where possible.
If you must use PNG: Run it through a lossless optimizer (pngquant or ImageOptim) and ensure it's a below-fold element, not the LCP image.
WebP — The 2026 Recommended Standard Best Choice
WebP combines lossy and lossless compression, supports transparency, and is 25-35% smaller than JPEG at equivalent quality. Browser support is 96%+ as of 2026 — essentially every modern browser including Safari 14+. Decode speed is comparable to JPEG, meaning no CPU penalty for the smaller file.
Why WebP wins for LCP: The smaller file size directly reduces download time. No decode penalty means the render step isn't slower. Near-universal browser support means you reach almost all users without a fallback.
Optimal quality setting: 80-85 for photos, 90 for graphics with text or sharp edges.
Implementation: Use a <picture> element with JPEG fallback (see code example below).
AVIF — Smaller Files, But Use Carefully
AVIF is newer, based on the AV1 video codec, and achieves 40-55% smaller files than JPEG at equivalent quality. In theory, AVIF should produce the fastest LCP due to smallest file size. In practice, AVIF decoding is more CPU-intensive than WebP or JPEG, which can be a problem on low-end mobile devices.
The AVIF trade-off: Faster to download (smaller file), but slower to decode (more CPU work). On high-end devices, AVIF wins. On budget Android phones, WebP may actually produce faster LCP despite larger file size.
Browser support: 89% as of 2026 (Chrome, Firefox, Edge, Safari 16+). Older Safari and older Android WebViews don't support it.
Recommendation: AVIF is excellent as the first source in a picture element, with WebP second and JPEG as final fallback. This serves the optimal format to each browser.
Real PageSpeed Score Data by Format
| Format Used for Hero Image | File Size | Mobile LCP | PageSpeed Mobile Score |
|---|---|---|---|
| PNG (no optimization) | 1.8 MB | 6.2s (Poor) | 28/100 |
| JPEG Q85 (unoptimized) | 420 KB | 3.8s (Needs Improvement) | 54/100 |
| JPEG Q80 (optimized) | 280 KB | 2.9s (Needs Improvement) | 67/100 |
| WebP Q85 | 185 KB | 2.1s (Good) | 84/100 |
| AVIF Q75 | 130 KB | 1.8s (Good) | 89/100 |
| AVIF + WebP + JPEG (picture) | 130–280 KB | 1.8s (Good) | 91/100 |
Data from simulated tests using Chrome DevTools Slow 4G throttling on a 1200×630px photographic image.
The picture Element: Serving the Right Format to Every Browser
The <picture> element lets you serve different formats to different browsers while maintaining a universal JPEG fallback. This is the recommended implementation for your LCP image in 2026:
<link rel="preload" as="image" href="hero-1200.webp" type="image/webp"> in your head to preload the WebP version. AVIF preloading requires additional type hints and is less universally supported.
Format Recommendation Summary
| Image Type | Recommended Primary | Fallback | Never Use |
|---|---|---|---|
| Hero photograph (LCP) | AVIF or WebP | JPEG Q80 | PNG |
| Product photos | WebP | JPEG Q80 | PNG |
| Logos / icons | SVG or WebP | PNG | JPEG |
| Screenshots | WebP (lossless) | PNG | JPEG |
| Thumbnails | WebP Q75 | JPEG Q75 | PNG |
Complete Guide: Optimize Images for Core Web Vitals — Full Checklist
How to Reduce LCP Image Load Time: Step-by-Step with Preload
