Why Image Format Is the Most Underestimated LCP Variable
Most WordPress performance guides tell you to “use WebP.” Few of them tell you how much it actually matters, when AVIF beats WebP by a measurable margin, or how to implement format switching correctly so you do not break compatibility. This article presents real lab data from a controlled benchmark on a WooCommerce store, explains the encoding trade-offs, and gives you a decision framework you can apply today.
Images are responsible for LCP in the majority of real-world WordPress pages. According to HTTP Archive data, images are the LCP element on approximately 70% of mobile pages. The format you choose determines how many bytes the browser has to download before it can paint that element — and every byte matters on constrained connections.
Test Setup and Methodology
All tests were run on the same WooCommerce product page using a 1200×630 px hero image. The baseline was a standard JPEG exported at quality 85 — the most common export setting we see in real stores.
- Server: Nginx 1.25, PHP 8.3, Redis object cache, no full-page cache
- CDN: Cloudflare with image resizing enabled
- Connection throttling: Chrome DevTools — Fast 4G (10 Mbps) and Slow 4G (1.6 Mbps, 150ms RTT)
- Tool: WebPageTest (3 median runs, Lighthouse v11)
File Size Benchmark: JPEG vs WebP vs AVIF
| Format | Quality | File Size | vs JPEG | Encode Time | Browser Support |
|---|---|---|---|---|---|
| JPEG (baseline) | 85 | 142 KB | — | — | 100% |
| WebP (lossy) | 80 | 88 KB | −38% | ~80ms | 97.5% |
| AVIF (lossy) | 70 | 54 KB | −62% | ~900ms | 89.2% |
| AVIF (aggressive) | 50 | 31 KB | −78% | ~900ms | 89.2% |
LCP Impact by Format and Connection Speed
| Format | LCP – Fast 4G | LCP – Slow 4G | vs JPEG (Slow 4G) |
|---|---|---|---|
| JPEG | 2.8s | 5.4s | — |
| WebP | 2.1s | 3.9s | −28% |
| AVIF | 1.6s | 2.7s | −50% |
On Fast 4G, AVIF moves LCP from “needs improvement” (2.8s) to “good” (1.6s). On Slow 4G — representing a significant share of mobile traffic in Southeast Asia, Eastern Europe, and emerging markets — AVIF cuts LCP by half. If your store has international traffic, this is not a marginal gain: it is the difference between passing and failing Core Web Vitals in those regions.
The Encoding Cost Problem (And How to Solve It)
AVIF’s main drawback is encoding time. At 900ms per image server-side, real-time AVIF conversion is not viable at scale. A WooCommerce store with 5,000 products would take over an hour to encode the full catalog on demand. Three practical solutions exist:
Option 1: Cloudflare Image Resizing
Cloudflare handles AVIF encoding at the edge with no server CPU cost. Enable it under Speed → Optimization → Image Resizing. Cloudflare serves AVIF to supporting browsers automatically via Accept header negotiation, falling back to WebP or JPEG for others — zero code changes required.
Option 2: Imagify, ShortPixel, or Kraken
These plugins process your media library asynchronously via cloud API. Imagify and ShortPixel both support AVIF output as of 2024. The trade-off: API cost per image. For stores that cannot use Cloudflare, this is the next-best option.
Option 3: Manual picture element
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img
src="hero.jpg"
alt="Product hero image"
fetchpriority="high"
loading="eager"
width="1200"
height="630"
/>
</picture>Note fetchpriority="high" and loading="eager" on the fallback <img>. These are critical for the LCP element — format optimization reduces file size, but browser priority determines when the download starts.
Browser Support Reality Check
AVIF is supported in Chrome 85+, Firefox 93+, Edge 121+, and Safari 16.4+ (March 2023). Global support sits at approximately 89–90% as of mid-2025. The unsupported segment is primarily older iOS Safari and some embedded browsers. Never serve AVIF via a plain <img> tag — always use <picture> with a fallback.
WebP vs AVIF: Decision Matrix
| Use Case | Recommended Format | Reason |
|---|---|---|
| Hero / LCP image (above fold) | AVIF + WebP fallback | Maximum size reduction where it matters most |
| Product thumbnail grid | WebP | Fast encoding, excellent support, sufficient savings |
| Blog post inline images | WebP | Not LCP-critical, encoding simplicity wins |
| Animated GIFs | WebP (animated) or video | AVIF animation support is inconsistent |
| PNG screenshots / UI | WebP lossless | Lossless WebP beats PNG by 25–35% |
| Photographic product shots | AVIF quality 65–75 | Best ratio of savings to visual quality |
Common Mistakes to Avoid
- Serving AVIF without a fallback. Older iOS Safari and IE will fail silently.
- Re-encoding already-compressed JPEGs. Double compression introduces visible artifacts. Start from the uncompressed source.
- Low AVIF quality across all images. Below quality 50, AVIF produces ringing artifacts around text and sharp edges.
- Forgetting fetchpriority=”high” on the LCP element. Format and priority work together — you need both.
- Assuming your CDN handles it automatically. Not all CDNs support AVIF transcoding. Verify before relying on it.
WooCommerce Implementation Checklist
- Identify your LCP element (Chrome DevTools Performance panel)
- Pre-generate AVIF + WebP variants for all hero and above-fold images
- Implement picture element with AVIF → WebP → JPEG fallback chain
- Add fetchpriority=”high” and loading=”eager” to the LCP img
- Verify AVIF is being served (Content-Type: image/avif in DevTools Network tab)
- Confirm fallback works in Safari 15 or older
- Measure CrUX LCP after 28 days to confirm real-user impact
Final Verdict
For LCP-critical images on WooCommerce product pages, AVIF with a WebP fallback is the correct choice. The 62% file size reduction over JPEG translates to a 50% LCP improvement on slow connections — a gain that no single other optimization delivers at equivalent effort.
For product thumbnails and everything below the fold, WebP is sufficient. The practical takeaway: implement Cloudflare Image Resizing or Imagify with AVIF support, apply fetchpriority="high" to your LCP element, and measure with WebPageTest across real connection profiles. Format choice is one of the highest-ROI LCP improvements available to WooCommerce stores today.
FAQ
Is AVIF better than WebP for WordPress?
For LCP-critical hero images: yes. AVIF produces 30–40% smaller files than WebP at equivalent visual quality. For all other images, WebP is the more practical choice due to faster encoding and broader browser support.
Which plugins convert images to AVIF in WordPress?
Imagify, ShortPixel, and Kraken.io all support AVIF output as of 2024–2025. Cloudflare Image Resizing handles conversion at the edge without any WordPress plugin required.
Does AVIF work in all browsers?
No. Global AVIF support is approximately 89–90% as of mid-2025. Safari 16.4+ supports it, but older iOS versions do not. Always implement a WebP or JPEG fallback using the picture element.
How much does image format affect Core Web Vitals?
Significantly for the LCP element. Switching the hero image from JPEG to AVIF reduced LCP by 50% in our Slow 4G benchmark. For images below the fold, format choice affects page weight but not LCP directly.