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.
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.
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.
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.
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).
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.”
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.
If you liked this tutorial, you’ll love my WordPress Speed Guide.
Cheers,
Tom
Keep reading the article at Tom Dupuis. The article was originally written by Tom Dupuis on 2021-01-25 23:17:15.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.