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. I cover this format specifically, versus the older PNG default, in WebP vs PNG for Website Speed.
- 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. Whether it's actually worth switching to yet is covered in AVIF vs WebP: Is AVIF Ready for Everyday Use?
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.
If you're on Blogger specifically: you don't need either method above. Blogger has a built-in toggle, under Settings → Serve post images using WebP, that automatically converts your uploaded JPEGs and PNGs to WebP for browsers that support it, with zero manual conversion or code changes required. This is genuinely the fastest way to clear this warning if your site runs on Blogger. The full walkthrough, including how to verify it's actually working, is in How to Optimize Images in Blogger Specifically.
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.
How to Verify the Fix Actually Worked
Converting your images is only half the job. Before assuming the warning is gone, check that browsers are actually receiving the new format:
- Open your page in Chrome and open DevTools (F12 or right-click → Inspect).
- Go to the Network tab, filter by Img, and reload the page.
- Click on individual image requests and check the Type column. It should show
webporavif, notjpegorpng. - Re-run your page through PageSpeed Insights and confirm the "Serve images in next-gen formats" warning no longer appears.
Common mistake: Converting your images but still seeing the warning afterward, usually because of caching, not a failed conversion. Both your CDN and your browser can keep serving a cached copy of the old JPEG or PNG version for a while after the fix is live. Purge your CDN cache (or wait for the TTL to expire) and hard-refresh your browser (Ctrl+Shift+R) before concluding the fix didn't work.
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 break down what image lazy loading is and how to implement it cleanly without breaking above-the-fold rendering.
