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

Serve images in next gen formats wordpress

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

You Might Also Like:

9 Comments...

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

    Reply
  2. 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.

    Reply
    • 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.

      Reply
  3. 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?

    Reply
  4. 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!

    Reply
    • 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.

      Reply

Leave a Comment