Running a performance audit on Google PageSpeed Insights often highlights a persistent warning: "Serve images in next-gen formats." This diagnostic triggers when a site serves legacy JPEG or PNG images instead of modern compressed formats, inflating page weight and slowing down load times for visitors.
Hey, welcome here to BytebaseX. I'm Suptojit Modak, writing a series on Image Optimization and in this post, I'll explain what next-gen image formats are, why Google flags legacy image extensions, and how to fix this warning across your web pages to improve your Core Web Vitals. If you missed the previous post on properly resizing images before upload, you can read it here.
What Are Next-Gen Image Formats?
Next-gen formats refer to modern image file containers engineered specifically for the web. Unlike legacy formats built decades ago for digital photography or desktop publishing, next-gen formats use newer compression algorithms designed to shrink network payloads without sacrificing visual clarity.
The two industry-standard next-gen formats are:
- WebP: developed by Google, WebP supports both lossy and lossless compression, transparency, and animation. It produces files that are roughly 25% to 35% smaller than equivalent JPEG files.
- AVIF: based on the AV1 video codec, AVIF offers better compression than WebP, often shrinking file sizes by around 50% compared to legacy JPEGs while still holding up visually.
Why PageSpeed Insights Flags Legacy Formats
PageSpeed Insights scans your page's Document Object Model (DOM) and measures the transfer size of every image file against what those assets would weigh if converted to AVIF or WebP. When the test detects PNG or JPEG files above a certain payload threshold, it flags the issue to highlight potential bandwidth savings.
Leaving this diagnostic unresolved hurts performance in three ways:
- Slower Largest Contentful Paint (LCP): large hero or featured images delivered as JPEGs delay the main page content from rendering quickly.
- Higher bandwidth usage: serving unoptimized legacy images wastes mobile data for site visitors.
- Lower performance scores: high total byte weight directly pulls down overall Core Web Vitals ratings.
WebP and AVIF Browser Support in 2026
A common concern with adopting newer file extensions is cross-browser support, and this used to be a real blocker. As of 2026, that concern is mostly settled for WebP, and mostly settled for AVIF too, though AVIF still has one gap worth knowing about.
| Format | Chrome / Edge | Safari | Firefox | Global Support |
|---|---|---|---|---|
| WebP | Full support | Full support | Full support | ~98% |
| AVIF | Full support | Full support since Safari 16.4 (2023) | Full support | ~93% to 95% |
The gap in AVIF support mostly comes from older iPhones and iPads still running iOS 15 or earlier, which can't decode AVIF at all. For most audiences that's a small slice of traffic, but it's the reason a fallback still makes sense for AVIF specifically. WebP has no such gap left, since even old Safari versions have supported it for years.
How to Fix the Warning Step-by-Step
Resolving the "Serve images in next-gen formats" warning means serving WebP or AVIF files to browsers instead of standard JPEGs or PNGs. Depending on your tech stack, you can implement this manually or automatically.
Method 1: Manual Pre-Upload Conversion
For custom static sites or lean workflows, convert image assets locally before adding them to your web server:
- Export original graphics from your design software as PNG or high-quality JPEG.
- Pass files through a conversion tool, such as Squoosh or the command-line utility
cwebp. - Set output compression to around 80% quality using WebP or AVIF.
- Upload the converted WebP or AVIF file directly to your content repository.
Method 2: Automated Server or CMS Conversion
If you manage a dynamic website with multiple contributors, manual conversion isn't scalable. Use server-level or plugin solutions to automate it instead:
- Content Delivery Networks (CDNs): enable edge-based image optimization, like Cloudflare Polish or Fastly, to automatically convert legacy images to WebP or AVIF on the fly based on the visitor's browser.
- CMS plugins: configure automated conversion plugins to generate WebP copies on upload and rewrite
<img>tags automatically.
Serving the Right Format with a Fallback
If you want AVIF's smaller file size but still want to cover the small slice of older devices, the <picture> element lets the browser pick the best format it understands, with JPEG as the safety net underneath:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="description">
</picture>For most blogs and content sites, plain WebP without this fallback chain is already enough. The extra AVIF layer is worth the setup mainly for image-heavy sites like photography portfolios or large product catalogs, where the file size difference actually adds up.
Conclusion
Fixing the "Serve images in next-gen formats" warning is one of the most effective ways to cut page weight and speed up load times. Moving your image workflow from JPEGs and PNGs to WebP, and to AVIF where it makes sense, brings a real, measurable improvement to your LCP score and PageSpeed Insights results, not just a number that looks better on paper.
This post is part of the ongoing Image Optimization series on BytebaseX. In the next guide, I'll break down what image lazy loading is and how to implement it cleanly without breaking above-the-fold rendering.
