How To Serve Images In Next-Gen Formats In WordPress (WebP) Tom Dupuis

How To Serve Images In Next-Gen Formats In WordPress (WebP) • Tom Dupuis

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.

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

[…]

 



This article was written by Tom Dupuis and originally published on Tom Dupuis.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top