How To Serve Images In Next-Gen Formats In WordPress (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.

Serve images in next-gen formats

 

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.

WebP Test
This test shows average files sizes for various image formats

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

JPEG Image
JPEG file size: 120.78 KB
JPEG Image (2)
JPEG file size: 43.84 KB
WebP Image
WebP file size: 80.76 KB
WebP Image (2)
WebP file size: 29.61 KB

 

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.

Broken WebP Background Image

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.

WebP Supported Browsers
Browsers supporting WebP by caniuse.com

 

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.

PNG to WebP Converter - CloudConvert

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.

new-about-banner
Background banner (WebP image)

 

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).

  • Picture Tag: <img> tags will be replaced with <picture> tags. This is usually the recommended method to convert images  in most image optimization plugins.
  • .htaccess: deliver WebP images via .htaccess. However, many server configurations won’t allow this (if you’re using Cloudflare’s CDN or Varnish).
  • Pass Thru: changes your URLs in the process and is not the preferred method.

 

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.

WebP Images ShortPixel

 

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).

Imagify WebP Images

 

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.”

WebP Converter For Media

 

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.

WebP Images - SG Optimizer

 

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.

Cloudflare Polish - WebP

 

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.

WP Rocket WebP 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.

Regenerate WebP Images

 

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:

“Lighthouse collects each BMP, JPEG, and PNG image on the page, and then converts each to WebP, reporting the potential savings based on the conversion figures.”

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.

SVG Images

 

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.

Serve Images In next-gen formats wordpress

 

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

About Tom Dupuis

Tom Dupuis 2017Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

Subscribe
Notify of
guest
8 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments