How To Serve Images In Next-Gen Formats In WordPress (And Convert Them To WebP)

When running your site through PageSpeed Insights, you may see a recommendation to serve images in next-gen formats.

Google recommends converting JPEG and PNG images to WebP. This is a next-gen image format that is supposed to be faster and higher quality. You can convert images to WebP using online tools (e.g. CloudConvert) or with plugins like ShortPixel or WebP Converter For Media.

However, many industry leaders in speed optimization (e.g. WP Rocket and Kinsta) don’t use WebP images. Instead, they use SVGs for their high quality images which don’t get flagged as errors because Lighthouse only tests the potential savings for BMP, JPEG, and PNG images.

So should you use WebP or not?

I’ll show my  research and experiments in this guide.

 

1. What Is WebP?

WebP is a modern image format that offers faster speeds and superior quality than JPEGs/PNGs.

Google found that lossless WebP images have a 26% smaller file size than PNGs. And WebP lossy images have a 25-34% smaller file size than JPEGs. In other words, you can serve the same quality images at a reduced file size. This will result in both faster speeds and better PSI reports.

Here are a few example images of JPEG vs. WebP:

 

2. Not All Browsers Support WebP

I learned this the hard way.

PageSpeed Insights recommended I change a few images to WebP, so I used the free WebP converter from CloudConvert to change my background image and a few others. Since I rarely use my MAC laptop to check the site on Safari, these images were broken for about two weeks.

WebP is supported by most major browsers including Chrome, Firefox, Opera, and Edge. Safari is the lone wolf and doesn’t support WebP (although Apple has experimented with it). But the good news is that many WebP plugins only serve WebP images when the browser supports it. However, if you’re using a free online tool like CloudConvert, always check your site on Safari!

You can also find a list of supported browsers here. It’s important to note that Safari only supports WebP on macOS 11 Big Sur and later.

 

3. Convert Images To WebP Using Free Online Tools

CloudConvert’s WebP Converter is a popular choice.

Upload the image, convert it to WebP, and download it.

Upload the image to WordPress and use it wherever you want. It used to be that WordPress didn’t support WebP, but from my testing, it should work now without having to insert any code.

 

4. Use A WebP Plugin

Most image optimization plugins support WebP (and even some cache plugins).

If your image optimization plugin already supports WebP conversion, I recommend using that. If it doesn’t, search for a WebP plugin like WebP Converter For Media. And if you’re using a paid Cloudflare plan, you can also use their Polish feature which can serve WebP images. Some WebP plugins have additional settings to further optimize images during the WebP conversion.

Popular WebP plugins are listed below.

 

5. Choose A Conversion Method

Most WebP plugins have different conversion methods (picture tag is usually recommended).

 

6. ShortPixel

ShortPixel lets you enable WebP images in the Advanced Settings. They allow <picture> tag and .htaccess. ShortPixel says if your server CAN or CAN’T serve WebP images via .htaccess.

 

7. Imagify

Imagify also has an option to create WebP images in the settings. When enabling the <picture> tags option, they prompt you to add a CDN URL which Imagify says you should definitely do. Cloudflare does not use a CDN URL (this only applies to CDNs that are setup using CDN URL).

 

8. Optimole

Optimole automatically serves WebP images as explained in their article.

I’m a big fan of this plugin because it has quite a few extra features. Most notably, it serves images from Cloudfront’s CDN and serves lower quality images for users on slow connections. Finally, it serves adaptive images (serves smaller images on mobile devices). That’s probably why Optimole has great reviews and is a quickly growing WebP and image optimization plugin.

 

9. WebP Converter For Media

WebP Convert For Media is a dedicated WebP plugin, but it also has other options.

It lets you specify whether you want to convert WebP images in specific file extensions, directories, conversion methods (GD or Imagick), compress quality, and various other settings. It can also remove WebP images that are larger than the original file size (recommended). Choose which settings work best for your images. When you’re done, click “regenerate images.”

 

10. SG Optimizer

SiteGround’s SG Optimizer introduced an option to generate WebP copies of new images. If you want to convert your existing images, they also have an option to bulk generate WebP files.

 

11. Cloudflare

Cloudflare also supports WebP if you’re using their Pro, Business, or Enterprise plan. In your Polish settings, check “WebP” and Cloudflare will serve WebP images to supported browsers.

 

12. Should I Enable WebP Caching In WP Rocket?

In the majority of cases, you should leave WebP caching off.

WP Rocket says you should leave WebP caching disabled if:

• Your WebP plugin is serving WebP with <picture> element or .htaccess.
• Your CDN is serving WebP images.
• You’re using Cloudflare’s cache everything page rule, Varnish, or NGINX caching.

 

13. Regenerate Images If Necessary

Once you select a WebP conversion method, the plugin will do the rest. If you’re using  WebP Conversion For Media, you need to regenerate images. The plugin author says this should only be done once after installation. It can also stress your server, so do it during a time of low traffic.

 

14. Consider SVGs For High Quality Images

SVGs don’t get flagged in Lighthouse since it only tests for BMP, JPEG, and PNG images. So if you want to improve scores while also serving high quality images, SVGs might be the way to go.

Google says:

Maybe this is why WP Rocket, Kinsta, and other authority sites use SVGs instead of WebP. Not only do they use SVGs for the logo and background image, but other high quality images as well.

 

15. Retest Your Website

Now that you’re serving images in next-gen formats (WebP or maybe even SVG), retest your WordPress website in Lighthouse and make sure “serve images in next-gen formats” is 100%. If it’s not, try a different image optimization plugin or even a different WebP conversion method.

 

Frequently Asked Questions

How do I fix serve images in next-gen formats in WordPress?

Choose a WebP plugin like ShortPixel or WebP Converter For Media and convert your JPEG, PNG and GIF images to WebP images. Alternatively, you can use a free WebP converter tool to convert single images to WebP without needing WordPress plugins.

How do I serve images in nex-gen formats using WP Rocket?

WP Rocket does not convert images to WebP format. It only enables WebP caching which in most cases, should be disabled. You will need to use another plugin to convert images to WebP.

How do I serve WebP images without a WordPress plugin?

Use a free online tool like CloudConvert to convert single images to WebP for free, without requiring the use of WordPress plugins. Cloudflare's Polish feature also serves WebP images but requires a paid plan.

Which WordPress plugins support WebP?

ShortPixel, Imagify, Optimole, WebP Converter For Media, and SG Optimizer all let you serve WebP images.

If you liked this tutorial, you’ll love my WordPress Speed Guide.

Cheers,
Tom