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.

This means you need convert JPEG and PNG images to WebP (usually with a plugin). There are dedicated WebP conversion plugins out there, but many image optimization plugins already support WebP conversion. In this case, you will simply enable WebP conversion in the settings.

Serve images in next-gen formats

 

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 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 most WebP plugins only serve WebP images when the browser supports it.

 

1. Choose A WebP Plugin

If your image optimization plugin supports WebP conversion, use that (ShortPixel and Optimole are good choices). If your plugin doesn’t support WebP, use WebP Converter For Media. Some WebP plugins have additional settings to further optimize images during the WebP conversion.

 

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

 

3. Regenerate Images If Necessary

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

Regenerate WebP Images

 

4. Retest Your WordPress Website

Now that you’re serving images in next-gen formats (WebP), retest a few pages of your WordPress site in PageSpeed Insights and make sure this is 100%. If it’s not, you may want to try a different image optimization plugin or even a different WebP conversion method.

Serve Images In next-gen formats wordpress

Looks good!

 

5. Using WebP In 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

 

6. Using WebP In Imagify

Imagify also has an option 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

 

7. Using WebP In 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 by Optimole has such great reviews and is a quickly growing WebP and image optimization plugin.

 

8. Using WebP Converter For Media

WebP Convert For Media is a designated WebP plugin, but it also has additional 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

 

9. 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 it 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

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

Cheers,
Tom

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments