Images make up 60-80% of an average page. JPG and PNG date back to 1992 and 1996 - they work, but they are inefficient. WebP (Google, 2010) saves 25-35% over JPG at the same perceived quality. AVIF (AOMedia, 2019, AV1-based) saves another 40-50% on top of that. On a typical 10-image page that is hundreds of kilobytes to several megabytes - directly translating into faster LCP and better Core Web Vitals.
Why this matters
2026 support: WebP works in Chrome, Edge, Firefox, Safari 14+, Opera, and Android browsers - 97%+ global coverage. AVIF works in Chrome 85+, Firefox 93+, Safari 16.4+, Edge 121+ - 92%+. Both formats fall back to JPG/PNG via the <picture> element for older browsers, so there is no risk of losing visitors.
Core Web Vitals impact concentrates on LCP. A 200KB hero JPG becomes a 130KB WebP or a 100KB AVIF. On a 5Mbps 4G connection that is 100-200ms shaved off LCP - exactly the gap between "good" (≤2.5s) and "needs improvement". Fewer bytes also means lower CDN bandwidth bills (Cloudflare, Bunny, and Fastly meter by GB).
For WooCommerce and e-commerce catalogs with dozens of product images per page, the impact compounds. A 24-product grid drops from 4MB of imagery to 2MB. Mobile shoppers who can actually load the page convert.
How to detect
Open the homepage, F12 > Network > filter Img. Look at the Type column. If most rows say jpeg or png instead of webp or avif, there is room to improve. PageSpeed Insights flags this as "Serve images in next-gen formats" with a list of candidates.
Server check: does it actually serve WebP when the source file is JPG?
curl -I -H "Accept: image/webp" https://YOUR-SITE/wp-content/uploads/IMAGE.jpgIf the response says Content-Type: image/webp a conversion plugin is doing its job. image/jpeg means it is not.
How to fix
Three viable approaches:
Method 1: auto-conversion plugin - Imagify, ShortPixel, or Converter for Media. Each new upload gets a sibling WebP/AVIF, served via .htaccess rewrites or a <picture> tag whenever the browser's Accept header allows.
Method 2: Cloudflare Polish (Pro plan, $20/month) - converts at the edge without touching origin files. Useful when you do not want another plugin.
Method 3: pure JPG/PNG optimization - if budget is tight, at least run Smush (free) on the existing library. JPG/PNG can shed 30-50% without a format change.
For existing media, every plugin offers "Bulk Optimize". On a site with thousands of images this can run for hours - schedule it for night.
Common mistakes
Mistake one: deleting the original JPG/PNG after conversion. You lose the fallback for unsupported browsers and any future format migration becomes painful. Always keep originals. Mistake two: forgetting to verify that the server actually serves WebP. Most plugins create the files but do not patch .htaccess automatically. Mistake three: converting transparency-bearing PNGs (logos, icons) to JPG and losing the alpha channel. Filter by alpha channel before bulk-converting.
Verifying the fix
Reopen DevTools - the Type column should show webp or avif on 90%+ of image rows. Re-run PageSpeed Insights. The "Serve images in next-gen formats" warning should disappear and LCP should drop 15-30%. WebPageTest's Visual Progress graph should hit a faster Speed Index. On the CDN side, cache hit rates rise as WebP responses cache cleanly.
<picture> fallback chain is set up correctly.