You run your site through PageSpeed Insights, get a decent-looking score, and then see it: a yellow "Serve images in next-gen formats" warning sitting under Opportunities, usually with a number next to it like "Potential savings of 850 KB." You know it's about images. You're just not sure what a "next-gen format" actually is, or why the JPEGs and PNGs you've been using for years are suddenly a problem.
The short version: it's not that your images are wrong, it's that JPEG and PNG are older formats, and newer ones — mainly WebP, with AVIF close behind — can show the same image at a noticeably smaller file size. Lighthouse (the engine behind PageSpeed Insights) checks every image on your page against what a next-gen format would produce, and flags the difference as wasted bytes. Fixing it is mostly mechanical once you know what to convert and how to keep older browsers working.
"Serve images in next-gen formats" means Lighthouse found JPEG/PNG images that would be
smaller as WebP or AVIF with no visible quality loss. Fix it by converting your JPEG and
PNG assets to WebP (usually 25–35% smaller), and serving it with a
<picture> fallback so older browsers still get the original format.
Re-run PageSpeed Insights afterward to confirm the warning has cleared.
What does "Serve images in next-gen formats" mean?
This is one of the "Opportunities" audits inside Lighthouse, the engine behind PageSpeed Insights. It scans every image on your page, re-encodes a copy of it in WebP at a comparable visual quality, and compares the file sizes. If the next-gen version comes out meaningfully smaller, the audit lists that image along with the estimated bytes you'd save by switching formats.
"Next-gen" simply refers to image formats developed after JPEG (1992) and PNG (1996) that use more modern compression techniques:
- WebP. Developed by Google, supports both lossy and lossless compression, and is now supported by every major browser. It's the standard fix for this audit.
- AVIF. Based on the AV1 video codec, often compresses even smaller than WebP at equivalent quality, though encoding takes longer and tooling is less mature.
- JPEG XL. A newer contender with strong compression, but browser support is still limited as of this guide, so it's not yet a practical default.
The audit isn't judging your image quality or resolution — it's specifically about the container format the pixels are stored in. The same photo, same dimensions, same visual quality, just packed more efficiently.
Why this warning matters
It's easy to treat this as a nitpick, but the underlying issue has real consequences for both your PageSpeed score and how the page actually feels to a visitor:
- Largest Contentful Paint (LCP). If your LCP element is an image — a hero banner, a product photo — its file size directly affects how long it takes to paint, and LCP is one of the three Core Web Vitals that factor into ranking signals.
- Total page weight. Images are usually the single heaviest asset type on a page. Converting to WebP can cut that weight by a quarter to a third with zero visual trade-off.
- Mobile and slow connections. Smaller image payloads matter disproportionately more on mobile data or slower Wi-Fi, where every extra hundred kilobytes is felt directly by the visitor.
- Score creep. This audit alone won't sink your score, but it stacks with other image-related audits (properly sized images, efficient encoding), so fixing format is often the fastest single win available in the Opportunities list.
Step-by-step: fixing the warning
- Run PageSpeed Insights and open the audit. Expand "Serve images in next-gen formats" to see the exact list of flagged images and their estimated savings — this tells you which files to prioritize first.
- Convert the flagged images to WebP. Use a converter that supports batch conversion so you're not doing this one file at a time, and keep quality around 80–85% for photographic content — visually identical to the original at a fraction of the size.
- Keep the original as a fallback, don't delete it. Not every visitor's browser needs WebP specifically, and keeping the source format available makes the next step possible.
-
Serve WebP with a
<picture>fallback. Wrap your image in a<picture>element with a WebP<source>and the original JPEG/PNG as the fallback<img>, so every browser gets a format it can render:
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Description">
</picture>
- If you're on WordPress, Shopify, or a similar CMS, check for built-in support. Many platforms and CDNs now auto-serve WebP or AVIF based on browser support, which can resolve this audit without touching markup at all — check your platform's image settings before converting manually.
- Re-run PageSpeed Insights. Confirm the audit has cleared or the estimated savings have dropped substantially. If it's still flagging images, check that your server or CDN is actually serving the WebP file and not silently falling back to the original.
- Repeat for any newly added images going forward. Build the conversion step into your upload workflow so future images don't reintroduce the same warning later.
Common mistakes that keep the warning showing
1. Converting only some images, not all flagged ones
The audit lists every image over its savings threshold individually. Converting your hero banner but leaving product thumbnails or content images untouched means the warning persists — it aggregates savings across every flagged asset, not just the biggest one.
2. Serving WebP without a fallback and breaking legacy support
Renaming files to .webp and swapping them in directly, without a <picture>
fallback, works fine for modern browsers but can break rendering for older browsers or
tools that don't support WebP. Always pair the conversion with a proper fallback path.
3. Assuming a CDN or plugin already handles it
Some CDNs and CMS plugins do auto-convert images, but not all of them apply this by default, and some only do so above a certain traffic tier or plan. Confirm actual behavior by checking the served content-type in your browser's network tab rather than assuming.
4. Re-compressing an already-compressed JPEG into WebP
Converting a heavily compressed, artifact-ridden JPEG into WebP locks in those existing artifacts — it doesn't undo prior compression damage. Whenever possible, convert from the original source image rather than a JPEG that's already been through multiple save cycles.
Real-world savings examples
These are representative results from converting the same source images from JPEG/PNG to WebP at a comparable visual quality:
The pattern is consistent across content types: WebP saves the most on flat-color and screenshot-style PNGs, and a solid, reliable margin on photographic JPEGs — enough in most cases to clear the audit on its own.
Format comparison: JPEG vs PNG vs WebP vs AVIF
Knowing where each format still makes sense helps you decide what to convert and what to leave alone.
| Format | Typical size vs. JPEG | Browser support | Transparency | Best for |
|---|---|---|---|---|
| JPEG | Baseline | Universal | No | Legacy compatibility, email, fallback source |
| PNG | Larger | Universal | Yes | Logos, icons, flat-color graphics needing transparency |
| WebP | −25 to −35% | All modern browsers | Yes | Direct fix for this audit — the safe next-gen default |
| AVIF | −35 to −50% | Most modern browsers | Yes | Further savings once WebP is already in place |
Convert your images to WebP right now — free
The Rebrixe Image to WebP Converter runs entirely in your browser. Your images are never uploaded to a server — conversion happens locally, so you can batch-convert an entire folder of JPEGs and PNGs and download the WebP versions in seconds. No account, no file size limit, no watermarks.
Want to go deeper on quality settings, lossless vs. lossy WebP, and batch workflows for large image libraries? Read the full guide below.
Frequently asked questions
<picture> element
with a WebP <source> and a JPEG/PNG fallback <img>
serves WebP to browsers that support it and the original format to those that don't,
so nothing breaks.