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.
- What Is WebP?
- Not All Browsers Support WebP
- Convert Images To WebP Using Free Online Tools
- Use A WebP Plugin
- Choose A Conversion Method
- ShortPixel
- Imagify
- Optimole
- WebP Converter For Media
- SG Optimizer
- Cloudflare
- Should I Enable WebP Caching In WP Rocket?
- Regenerate Images If Necessary
- Consider SVGs For High Quality Images
- Retest Your Website
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).
- 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.
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:
“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.
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
WebP has such a nuance – not all browsers support it.
For example, some versions iOS Safari, regular Safari, IE – do not support WebP.
https://caniuse.com/#feat=webp
Therefore, you must always store at least two versions of each image. Webp (for WebP-enabled browsers) and original image.
And give the right version depending on the browser.
And the original image must also be optimized/compressed – so that even for browsers without WebP support, images will be optimized (lighter in weight) – this is the third! version of the file..
At the optipic service, I recently noticed a new plugin in which all of this is already in the box.
https://optipic.io/en/webp/wordpress/
You can even connect everything so that the urls of the images do not change (they remain exactly the same and look like internal urls on my site). But in fact, they are loaded through their system with automatic compression, conversion to webp and recognition of webp support.
It turns out that everything is simple and beautiful, and inexpensive))
Love your articles man, super in depth. I’m an SEO and am diving deeper into this page speed stuff more than I have before for this new business website I am launching but it’s more complex than I thought reading your articles. Can’t get the page score up past about 45 on PSI for mobile. I’ve used several of the plugins you’ve mentioned and I am trying to find the right combination. I’ll be testing out Optimole instead of Shortpixel AI. Also I did try to upload the webp image to Wordpress after using the Cloud Convert but WordPress still doesn’t seem to like it as it blocks it for “security” reasons. I’m using Elementor Pro btw which I understand is inherently slower and Namecheap shared hosting.
Ah, you might just want to try a plugin for WebP instead. And yes, Elementor with NameCheap hosting is probably not the best combo. Try disabling unused CSS/JS with Asset CleanUp or Perfmatters, then look into cloud hosting. Cloudways Vultr HF, NameHero LiteSpeed, GridPane, and RunCloud are some good options.
Is it true that you can’t use WebP for background images? Is there a way around this problem or a way to limit the damage it does on site-speed tests?
Did some research and it sounds like Optimole can do it for CSS background images.
Do I require both module? Or then again I can simply utilize the WebP Converter for Media module?
You should just be able to use WebP Converter for Media. No need to use 2 plugins that do the same thing.
Hello!
That’s a really hot article
I have a question.
I have the reSmush.it Image Optimizer and WebP Converter for Media installed.
Do I need both plugin? Or I can just use the WebP Converter for Media plugin?
Thanks!
WebP Converter For Media has an option to compress images, it doesn’t resize images though. If you’re just using Smush for compression, you should be able to just use WebP Converter For Media. Depends what you’re using Smush for though.
Sorry for the late reply.