How to Convert Website Images to WebP and Fix "Serve Images in Next-Gen Formats"
"Serve images in next-gen formats" is a PageSpeed Insights (Lighthouse) warning. It means your page loads JPEG, PNG or BMP images that would be noticeably smaller as WebP or AVIF. To fix it, convert those images to WebP (or AVIF) and make sure the site actually serves the new files to visitors' browsers.
Google's current Lighthouse documentation calls the same check "Serve images in modern formats". Older reports and most tutorials still use the "next-gen" name. The fix is the same.
Quick fix
- A few images: convert them to WebP before uploading, and replace the old ones.
- WordPress with many images: install a WebP conversion plugin, bulk-convert the media library, and turn on WebP delivery.
- Shopify, Wix, Squarespace: these platforms already serve WebP automatically; the warning usually comes from images in your theme or from another site.
- Then: clear your caches (plugin, server, Cloudflare) and test again.
Why WebP?
WebP gives you the same visual quality in fewer bytes. According to Google's WebP documentation, lossless WebP files are about 26% smaller than PNG, and lossy WebP files are 25–34% smaller than JPEG at the same quality. Smaller images download faster, which helps your Largest Contentful Paint (often the hero image) and saves mobile data.
| Format | Use it for | Notes |
|---|---|---|
| WebP | Photos, screenshots, graphics with transparency | The safe default; supported by all current browsers and most CMSs |
| AVIF | Photos where every kilobyte matters | Often smaller than WebP, but slower to create and not every tool supports it |
| SVG | Logos, icons, simple illustrations | Usually the smallest; don't convert these to WebP |
| JPEG / PNG | Fallback | Largest for the same quality |
For a full overview of image optimisation, including sizing and lazy loading, see website speed optimization.
What the warning checks
Lighthouse looks at every JPEG, PNG and BMP image on the page, estimates how much smaller each would be as WebP or AVIF, and lists the images with real savings, biggest first. Small savings are ignored.
So the list in your report is literally your to-do list. Look at the URLs:
- Images from your own domain (
/wp-content/uploads/...): you can fix these. - Images in your theme or plugin folders: fixable, but they may need a different approach (see below).
- Images from other domains (ad networks, embeds, review widgets): you usually can't convert them.
Method 1: Convert images by hand before uploading
Good for small sites, landing pages, or the handful of large images that matter most (hero images, banners, featured images).
- Open the JPG to WebP converter for photos, or the PNG to WebP converter for screenshots and graphics with transparency.
- Add your images (several at once is fine). They're converted in your browser; nothing is uploaded to a server.
- Choose a quality around 75 to 85. Compare the preview: most photos look the same at 80 with a much smaller file.
- Download the WebP files and upload them to your site, replacing the old images in pages, sliders and featured images.
Resize first. Converting a 5000-pixel-wide photo to WebP still gives you a big file. Resize images to the largest size they're actually shown at (for example 1600 or 1920 pixels wide for a full-width banner), then convert.
Method 2: WordPress plugins (bulk conversion)
WordPress has accepted WebP uploads since version 5.8 (and AVIF since 6.5, if the server supports it). But it doesn't convert your existing images on its own. For a media library of hundreds of JPEGs and PNGs, a plugin is the practical way.
Common options:
| Plugin | What it does |
|---|---|
| Modern Image Formats (by the WordPress Performance Team) | Creates WebP or AVIF versions of new uploads |
| Converter for Media | Converts the existing library to WebP; AVIF in the paid version |
| EWWW Image Optimizer | Compression plus WebP conversion, locally or in the cloud |
| ShortPixel, Imagify | Cloud compression and WebP/AVIF conversion, with free monthly limits |
| LiteSpeed Cache | Image optimisation and WebP built in, if your host runs LiteSpeed |
Use one of them, not several.
Setup in general
- Install the plugin and open its settings.
- Choose WebP as the output format (AVIF only if your server and plugin support it well).
- Run the bulk optimisation / regenerate for the existing media library. Keep the original files as backup if the plugin offers it.
- Turn on WebP delivery. This is the step people miss: creating WebP files does nothing if the site still sends the old JPEGs.
- Clear the cache.
How plugins serve WebP, and why it matters
Plugins use one of two methods:
- Rewrite rules (in
.htaccess): the image URL staysphoto.jpg, but the server sends the WebP version to browsers that support it. Simple, but it relies on Apache rules (on Nginx your host has to add them) and it can clash with a CDN. Cloudflare's free plan caches one version per URL, so it may keep serving the JPEG, or serve WebP to the wrong browser. <picture>tags: the plugin rewrites your HTML so each image lists a WebP source with the original as a fallback. It works behind any CDN, but can occasionally upset page builder layouts.
If you use Cloudflare and the warning won't go away, switch the plugin to the <picture> method (or its "pass-through"/URL-based mode, if it has one). Our Cloudflare for WordPress guide covers the rest of the setup.
Method 3: Other platforms and custom sites
- Shopify: the CDN automatically serves WebP or AVIF to supporting browsers. If PageSpeed still flags images, they're usually loaded from an app, a CSS file, or another domain.
- Wix and Squarespace: convert images automatically. Most remaining warnings come from embeds and third-party widgets.
- Hand-coded sites: use the
<picture>element with a fallback:
<picture>
<source srcset="/images/team.avif" type="image/avif">
<source srcset="/images/team.webp" type="image/webp">
<img src="/images/team.jpg" alt="Our team in the workshop" width="1200" height="800">
</picture>
Keep the width and height on the <img> so the layout doesn't jump while images load.
- Frameworks (Next.js, Nuxt and others) and image CDNs can convert and resize on the fly. Use their image component instead of a plain
<img>.
Check that WebP is actually served
- Open your page in Chrome, press F12, go to Network, and choose the Img filter.
- Reload the page.
- Look at the Type column: it should say webp (or avif). Click an image and check the Content-Type response header:
image/webp.
The file name may still end in .jpg with rewrite-based plugins. What matters is the type the browser receives.
Then run PageSpeed Insights again. If you use caching or Cloudflare, purge the cache first.
Why the warning won't go away
| Cause | Fix |
|---|---|
| Cache still serves the old pages or images | Purge the plugin, server and Cloudflare caches |
| WebP files exist but delivery is off | Turn on the plugin's WebP delivery / rewriting option |
| Rewrite rules don't work on your server | On Nginx, ask the host to add the rules, or use the <picture> method |
| CDN serves the cached JPEG | Use the <picture> method, or purge and check the plugin's CDN settings |
| Images set as CSS backgrounds (sliders, hero sections) | Some plugins skip CSS; replace the background image manually with a WebP file |
| Images in the theme folder | Convert them and update the theme files, or ask the theme developer |
| Images from other domains | You can't convert those; remove or replace the widget if it matters |
| New uploads aren't converted | Turn on automatic conversion for new uploads in the plugin |
Frequently asked questions
What does "serve images in next-gen formats" mean?
PageSpeed Insights found JPEG, PNG or BMP images that would be smaller as WebP or AVIF. Converting and serving them in those formats removes the warning and makes the page lighter.
Is WebP supported in all browsers?
Yes, in all current versions of Chrome, Safari, Firefox and Edge. Only very old browsers lack support, and the <picture> method or a plugin gives them the original JPEG or PNG.
Should I use WebP or AVIF?
WebP is the safe default because almost every tool, plugin and CMS supports it. AVIF can be smaller still; use it if your plugin and server handle it well.
Does converting to WebP reduce image quality?
At sensible quality settings (around 75 to 85) most people can't see a difference, and the file is much smaller. Lossless WebP keeps every pixel and is still smaller than PNG.
Do I need to convert my logo to WebP?
If your logo is an SVG, keep it as SVG. If it's a large PNG, converting it to WebP (with transparency) helps.
Will converting images to WebP improve my SEO?
Indirectly. Faster pages can improve Core Web Vitals like Largest Contentful Paint, which is part of Google's page experience signals. Content and relevance still matter far more.