Fix the “Serve Images in Next‑Generation Formats” Warning on WordPress

Google’s PageSpeed Insights has become a staple for measuring website performance, and one of its most common alerts is the “Serve images in next‑generation formats” warning. The message signals that your site still delivers images in legacy formats such as JPEG or PNG, which can be larger and slower to load than modern alternatives like WebP or AVIF. If you’re running WordPress, fixing this issue is surprisingly straightforward once you understand the conversion process, server configuration, and troubleshooting steps required to keep PageSpeed happy.

Why Next‑Generation Formats Matter

WebP and AVIF are image codecs that combine the best features of older formats while cutting file sizes by up to 50 % or more. Because they compress more efficiently, they reduce bandwidth usage, lower page weight, and speed up rendering—especially on mobile networks. For a WordPress site that relies heavily on media, the impact can be dramatic: faster load times translate into lower bounce rates, higher search rankings, and a better user experience.

Google’s PageSpeed score rewards sites that serve images in these formats. The warning appears when the tool detects that at least one image on a page is delivered in JPEG, PNG, GIF, or BMP, or when it can’t confirm that the image is being served in WebP or AVIF. Fixing it involves two main tasks: converting the existing media library to the new format and ensuring that the server or CDN can deliver the correct MIME type to browsers that support it.

Steps to Convert and Serve WebP/AVIF in WordPress

The first step is to convert all of your existing images. WordPress offers several plugins that automate this process. ShortPixel and EWWW Image Optimizer are two popular choices that can convert images to WebP or AVIF on upload and even retroactively process the media library. These plugins handle the heavy lifting—generating the new files, replacing the original URLs in the database, and keeping the original images as fallbacks for older browsers.

After conversion, you need to ensure that your web server serves the correct content type. If you’re on Apache, add the following to your .htaccess file to set the MIME types for WebP and AVIF:

AddType image/webp .webp
AddType image/avif .avif

For Nginx, include these lines in your server block:

types {
image/webp webp;
image/avif avif;
}

Once the server is configured, you must instruct browsers to request the new format. The most reliable method is to use the <picture> element or the srcset attribute. WordPress’s default image tags can be extended with the wp_get_attachment_image filter or by using a plugin like WebP Express, which automatically rewrites image URLs to point to the WebP/AVIF version when the client supports it.

Don’t forget to clear any caching layers after making these changes. If you use a CDN such as Cloudflare or a caching plugin, purge the cache so that the new image formats propagate to the edge. Without cache invalidation, PageSpeed Insights may still see the old JPEG/PNG files and continue to flag the warning.

Troubleshooting When PageSpeed Still Flags a Warning

Even after conversion and server configuration, PageSpeed Insights can still flag the warning if any of the following conditions persist:

• Missing MIME Types: If the server fails to send the Content-Type: image/webp header, browsers will not recognize the file as WebP. Verify the headers with a tool like curl -I or an online header checker.
• Browser Support Mismatch: PageSpeed tests from a desktop Chrome instance may not reflect mobile device support. Ensure that your Accept‑Encoding header is correctly set and that the <picture> fallback points to the original format.
• Mixed Content: Serving images over HTTP on an HTTPS site can cause browsers to ignore the WebP files. Use https:// URLs consistently.
• Plugin Conflicts: Some image‑optimisation plugins may interfere with each other, resulting in duplicate or corrupted WebP files. Disable all but one plugin and test again.
• CDN Caching Rules: CDNs can override MIME types or strip the Accept‑Encoding header. Check the CDN configuration to ensure it forwards these headers to the origin.

To confirm that the images are being served correctly, open the page source and look for srcset entries ending with .webp or .avif. Then inspect the network tab in the browser’s developer tools to verify the Content-Type header. If everything checks out, re‑run PageSpeed Insights; the warning should disappear and the score should improve.

In summary, converting your WordPress media library to WebP or AVIF, configuring your server to serve the right MIME types, and ensuring that the CDN and caching layers propagate the changes are the three pillars of a successful fix. By following these steps, you’ll eliminate the “Serve images in next‑generation formats” warning, reduce load times, and give your visitors a smoother, faster experience.