Table of contents

What is WebP?

This is an image format introduced by Google in 2010 and it is adopted by all modern browsers.

If you deal with WordPress and web development in general, you came across mentions of the WebP image format.

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

Taken from the official Google Developers page.

Long story short, it’s an image format that is more efficient when compared to JPG or PNG.

Good compression means smaller files, smaller files will result in less storage for you and faster web pages for your visitors.

How to use WebP with WordPress?

At the current time (before WP 5.8) you needed to use a 3rd party (plugin or CDN) to display WebP images to your WordPress website.

There are several plugins out there that will convert your JPG or PNG to WebP for the existing images and future uploads.

Here are some of the plugins that do this:

If you’re using Cloudflare, they also have an option to generate WebP files for you on the fly. The Cloudflare Pro version includes Cloudflare Polish that will create and cache WebP versions of your existing images and deliver them directly into the browser when the page is loaded.

This is the easiest option to set up since you just need to turn on the option Cloudflare Dashboard, but it only comes with the Pro plan.

WordPress 5.8 WebP support

WordPress 5.8 adds native support to WebP files. This means that from WordPress 5.8 up, you can upload WebP images in your Media Library and don’t have to depend on other plugins to convert them and replace them in the content.

There is a small catch here, your server needs to support WebP. This means that the hosting server will require the Imagick PHP library to be installed.

WebP images support lossy and lossless compression, as well as an animated format and support for transparent images. In WordPress, the lossless WebP format is only supported when the hosting server uses Imagick (the PHP library) until LibGD adds support. In addition, animated and alpha formats are not yet supported for resized images (lossy images are created instead when you upload in these formats).

Taken from the WordPress site.

How to create WebP images?

You can use an online tool like Squoosh or use an offline software like GIMP that allows you to save/export files into WebP.

After that you can simply upload them to your site and start using them in the same way you did with your regular JPG/PNG files.

Control compression quality settings for WebP

A new filter, wp_editor_set_quality, is available to control the compression quality for WebP.

Copy Code 


// Use a quality setting of 75 for WebP images.
function filter_webp_quality( $quality, $mime_type ) {
  if ( 'image/webp' === $mime_type ) {
     return 75;
  }
  return $quality;
}
add_filter( 'wp_editor_set_quality', 'filter_webp_quality', 10, 2 );

How can I convert existing images to WebP?

If you’re updating to WordPress 5.8 nothing will change for your existing content. Converting your existing images to WebP format can be done in 2 ways:

  • Manually, you go and upload WebP files since WordPress now supports that (as long as your server does too). Not the best option if you have a huge site.
  • Use one of the methods mentioned in the How to use WebP with WordPress. Those will automatically do the conversion and replace the images on the site.

Future WebP integration in WordPress core

The plan is to offer WordPress users the ability to convert to WebP when uploading images in the Media Library. This should be a huge improvement and it might make some of the plugins that already do this obsolete.

I do believe there will still be some requirements on the server side to make this work, but we’ll have to wait and see.

There is a ticket that tracks the progress for this feature.

I’m excited to try this out when it’s ready.