Serving lightweight WebP images can help boost your site speed, critical to the user experience and as a ranking factor. In this article, we’ll look at a few different ways to convert existing images to WebP, including Google’s cwebp utility, cloud converters like Convertio, and EWWW Image Optimizer plugin. We’ll also show you how to use EWWW and WP Offload Media together to offload your WebP image files to a cloud storage provider to free up server resources, and set it up so everything is served through a CDN.

Not too long ago, you needed a plugin to get WordPress to recognize WebP images at all. The release of WordPress 5.8 and its support for the WebP image format brought those days to an end, but plugins still have a place when it comes to converting existing images into the WebP format. EWWW Image Optimizer has support for generating WebP files and works very well with our WP Offload Media plugin.

1. What is WebP?
2. PNG vs. JPG vs. WebP
3. Most Browsers Support WebP
4. The New Contenders: JPG XL and AVIF
5. Serving WebP Images on WordPress Sites
6. 3 Ways to Convert PNGs and JPEGs to the WebP Image Format
7. Wrapping Up

What is WebP?

Google developed the WebP image format in 2010 to improve on the compression offered by JPEGs and PNGs. The format also supports animated and transparent images. WebP provides both lossless and lossy image compression.

• Lossless: Offers perfect reproduction at the cost of larger file sizes. PNGs are lossless images.

• Lossy: Discards some of the data and uses an algorithm to rebuild the image, resulting in smaller media files. JPGs are lossy images.

PNG vs. JPG vs. WebP

WebP images usually have smaller file sizes than the equivalent PNG or JPG files, according to studies conducted by Jyrki Alakuijala and Vincent Rabaud of Google.

• PNG: The lossless version of WebP files are approximately 26% smaller than PNG files.
• JPG: Lossy WebP files are usually between 25 and 34% smaller than JPGs.

When it comes to performance, size matters. Serving WebP rather than JPEG or PNG image files could save a good chunk of bandwidth, especially if your WordPress sites have a lot of images. More compact image files enhance the visitor experience by delivering the site faster, reducing bounce rates and improving rankings.

Most Browsers Support WebP

WordPress 5.8 introduced support forWebP. Most of the major desktop and mobile browsers already supported the WebP image format by that point. However, Safari’s support for the WebP format requires that the user have upgraded to at least Big Sur.

Support for WebP is widespread, but still not quite universal. You’ll need to fallback to other image files for users without WebP support. Options to do so include the HTML picture element and an image optimization plugin.

The New Contenders: JPG XL and AVIF

WebP is the current lightweight image champ, but it may not keep that status for long. JPG XL and AVIF file formats were developed to beat WebP files at their own game, with both offering higher compression ratios than WebP.

Both formats are promising, but there isn’t widespread browser support for JPG XL yet. There’s more browser support for AVIF, but currently WordPress doesn’t support either format. With that said, you can get WordPress to recognize next-gen formats with a bit of PHP.

Serving WebP Images on WordPress Sites

There are a few different ways to serve WebP images while still offering a fallback, including the HTML picture element and plugins.

WordPress 5.8 and later recognize images in the WebP format as valid MIME types, so you can use the wp_editor_set_quality filter to set the compression quality for WebP files on your WordPress sites. Note that WordPress defaults to creating sub-sized files that match the format that was uploaded. Even after setting the compression quality for WebP files in wp_editor_set_quality, if you upload JPEGs, you’ll get sub-sized JPEGs rather than WebP files. To convert all your thumbnails to WebP, please see the section on serving WebP thumbnails with WordPress filters. Alternatively, the section on serving WebP images with EWWW Image Optimizer includes a method for serving WebP images while retaining original image formats for browsers not compatible with WebP. WordPress multisite users may have another challenge, as multisite sets the recognizable file types when you first create the site. As the trac ticket puts it,

Currently in multisite upload_filetypes site option is massively out of date with mime / ext allowed in get_allowed_mime_types.

In other words, you’ll have to make some manual adjustments to your site_option_upload_filetypes filter if you want all your multisite subsites to use WebP images. Make sure to add the filter to a network mu-plugin so it’s available to all your subsites. There is an open PR to fix this in WordPress core. That link also includes details of what you need to add to your mu-plugin until the PR is accepted.

Multisite issues aside, you’ll still need a third-party plugin for any sites running a legacy version of WordPress. The plugin must create WebP files from your existing files while also delivering them to browsers that support WebP.

WebP Images With HTML

You can use the HTML picture element, and it should serve WebP images to the majority of browsers that support it, while serving other image formats to the minority of users without WebP support.

<picture>
  <source srcset="/path/to/image.webp" type="image/webp">
  <img src="/path/to/image.jpg" alt="">
</picture>

Serving WebP Thumbnails With WordPress Filters

Before we dive into how you can convert your images, there’s an even simpler way if you’re only concerned with serving thumbnails as WebP, you’re not worried about having fallback image formats for browsers that don’t support WebP, and you’re using WordPress 5.8 or later. This process will not convert the original image files, but will display thumbnails as WebP. This can be useful for reducing your site’s load time if you have thumbnail-heavy pages.

The key is using WordPress 5.8’s image_editor_output_format filter. You can use this to adjust the MIME type that WordPress uses to save your thumbnail image files. As MIME types usually match the source image, the mapping array passed into the image_editor_output_format filter is empty by default. If you change the mapping for an image in the filter, so that one MIME type (such as JPGs or PNGs) is mapped to a different one (such as WebP), the resulting thumbnail image generated will be of the different type. This results in WebP images being served as thumbnails while the source image is left in its original format.

You can add the following code to your site to convert thumbnails to WebP for all your JPEG and PNG source files:

add_filter( 'image_editor_output_format', function( $formats ) {
    $formats['image/jpeg'] = 'image/webp';
    $formats['image/png'] = 'image/webp';

    return $formats;
} );

We should note that this requires your web server’s image processing library to support the WebP format.

Regenerating Existing Thumbnails

This will create webp thumbnails for any newly uploaded images, but what about any existing images in your Media Library? If you’re happy with the webp thumbnails, you will need to regenerate the thumbnails for existing images. There are plugins that will do this, but you can also use WP-CLI if you have access to it. The wp media regenerate command will regenerate all of your thumbnails, using the new WebP format set through the filter:

wp media regenerate --yes --skip-delete

Using the --skip-delete option ensures that the original thumbnails are left on the server. However, they will be orphaned as the attachment’s metadata will no longer reference them. You can fix this manually, but it’s easier to use something like WP Migrate’s Find & Replace tool to update all the content that references the old thumbnail, and change it to use the WebP extension instead. This process should result in serving WebP images as thumbnails without having to convert the source images. However, a more elegant solution is to use EWWW Image Optimizer or another plugin to add WebP as an additional file to be served when supported.

3 Ways to Convert to the WebP Image Format

Using Cwebp to Convert to the WebP Image Format

Google has precompiled utilities to convert JPGs, PNGs, and TIFFs into WebP images before you upload them. The operating system you use will determine how you install these utilities.

On macOS there is a homebrew package available, which you can install using the following command:

brew install webp

Most popular Linux distros have a version of the utilities available in their software package managers. For example, on Debian/Ubuntu, you can install it through apt:

sudo apt-get install webp

If you’re on Windows, or you can’t use one of the above options, you can download the archive of the packaged utilities for your OS.

If you install a version from the links above, the first step is to extract the downloaded archive. Once extraction is complete, you can find the cwebp executable file in the bin directory of the extracted files. You may want to add this directory to your system path, depending on how often you intend to run the utility.

Once you’re ready to convert your files, open your command line interface. The basic command to convert a PNG file to WebP is shown below.

cwebp -q 80 image.png -o image.webp

Let’s break down the elements of this command and see how we can build our own command strings that will allow cwebp to convert our PNGs and JPEGs.

• cwebp: If you haven’t added the bin folder to the system path, you’ll need to insert the complete path to the file into your command line. In Windows, this will look something like this: “C:\Users\Mike\Downloads\WebP\libwebp-1.2.1-windows-x64\bin\cwebp.exe”.

• -q: This should be followed by a number from 1 to 100 to set the compression factor. The lower the number you use, the lower the quality of the file. Lossy compression is the default for cwebp. To activate lossless compression, use the -lossless and -exact options.

• image.png: Replace this with the name of the file you want to convert to WebP. Make sure to include the correct file extension. Note that you will also have to include the full path or cwebp won’t know where to find it. The full script for your image should look something like this: “C:\Users\Mike\Pictures\JPEGs\Mountains Test.jpg”.

• -o: This command specifies the name of your new WebP file and where you would like it stored. Again, you’ll need to include the full path after the command. Following our examples from above, we’d use the string -o “C:\Users\Mike\Pictures\WebPs\Mountains Test.webp”.

Once we put it all back together, we get this command line string:

"C:\Users\Mike\Downloads\WebP\libwebp-1.2.1-windows-x64\bin\cwebp.exe" "C:\Users\Mike\Pictures\JPEGs\Mountains Test.jpg" -q 80 -o "C:\Users\Mike\Pictures\WebPs\Mountains Test.webp"

If you were able to install the cwebp utility using a package manager as we outlined above, you probably don’t need to include the full path to the cwebp executable.

Google has a complete list of cwebp commands that you can use to convert your image files to the WebP format. There are only a few situations where you’ll need most of them.

The command string we’ve built will only convert one image at a time. You can convert all of your images this way, but we all know that scripting something that converts every image in the same directory would be a more suitable solution.

I opened Git Bash and navigated to the directory where my test images were stored. Then I ran this script:

for file in *.jpg
do
cwebp -q 80 "$file" -o "${file%.jpg}.webp"
done

This is a fairly basic way to do this. I only converted 20 images and the process was fast. You may want to look at how to run this with parallel processing to speed up your WebP image conversion. In addition, the script I used places the new WebP files in the same directory as the JPEGs. It’s pretty easy to sort the images in WebP format from the others, but that may not be where you want them.

Online Image Converters

There’s a practically endless selection of these, with varying levels of usability. Convertio is one of the most popular, allowing you to convert up to 100MB of files without registering for an account. Unlike a lot of the converter sites I’ve tried, it’s also not blanketed with intrusive ads.

You’re limited to two concurrent conversions if you don’t register (and pay) for an account. Converting the full 100MB limit of images this way means going back to that tab and clicking Convert periodically until the job is done.

When it comes to converting JPGs/PNGs to WebP, the process is also slowed down by one of Convertio’s big selling points: the ability to convert practically any file into a wide range of different formats.

Selecting these for every single file would quickly get tedious, but Convertio has two ways to avoid this step. Clicking the Convert all to button at the end of the list of files opens the same modal as before, but you’ll only need to make the selection once.

Alternatively, you can use Convertio’s PNG to WEBP or JPG to WEBP converters. This is exactly the same interface, but with everything preselected. You’re still free to change the file formats if you wish.

WebP and the EWWW Image Optimizer Plugin

EWWW Image Optimizer is a WordPress plugin designed to help load your pages faster by optimizing your images. The plugin has supported WebP Images since August of 2014. As I mentioned earlier, we’re also going to use WP Offload Media to maximize the increase in speed.

To test serving WebP files with this combination of plugins, I first created a post with a single image block and a gallery block.

I opened up the devtools console in Firefox and refreshed the site a few times while keeping the “Disable cache” checkbox enabled. This gave me a rough idea of the total bytes transferred and how long the page might take to load for a new visitor to the site.

In the screenshot below, you can see that the total bytes transferred on this occasion was 1.19 MB out of 1.88 MB with a load time of 1.54 seconds, so that’s our baseline set.

From the usual “Add Plugins” page in the WordPress admin area I searched for “ewww” and simply hit the Install Now button for “EWWW Image Optimizer,” then activated it as normal.

Setting up EWWW Image Optimizer to Convert JPEGs to the WebP Image Format

I then went to the EWWW settings page. The plugin gives you the option to select a default goal: speeding up your site or saving storage space. I wanted to see the rest of the settings, so I selected I know what I’m doing, leave me alone!

This opens another screen where you can see the current level of optimization and checkboxes for various options. I was a little tempted by Enable Ludicrous Mode, but I elected to leave it for now in favor of WebP Conversion. Checking this box caused WebP Delivery Method to appear, showing three options: “Insert Rewrite Rules”, “JS WebP Rewriting”, and “Picture WebP Rewriting.” I checked the JS WebP Rewriting option. You can exclude files at this point, but I wanted to convert everything so I left it blank.

Checking the box for WebP Conversion will ensure that users with WebP support are served WebP images, while continuing to serve JPEGs and PNGs to users without WebP support.

Optimizing Images for Our WordPress Site

At this point, any new images uploaded will be converted to WebP. Converting previously uploaded images requires the use of EWWW’s Bulk Optimizer tool. I wanted to convert the images in our example post, so I clicked Bulk Optimizer on the right-hand side of the EWWW settings screen.

The “Bulk Optimize” page has very few controls. Checkboxes on the right-hand side give you the option to Force re-optimize, which will override skipping images that have previously been optimized. WebP Only skips compression entirely and just converts everything to WebP. I went ahead and clicked Scan for unoptimized images, which scans everything in the Media Library, as well as the active theme and any folders that you have configured. I also selected WebP Only, as I wanted to see how much space and bandwidth it would save.

The plugin found 200 images ready to optimize, so I clicked Optimize 200 images and let it do its thing. It took just a few minutes to process the image files. Converting to the WebP format saved space, even with files that were pretty small to begin with. Size reduction was generally between 30 and 60%.

I cleared my browser cache and then refreshed the blog page a few times to make sure the optimization and WebP conversion had worked. Each image is now using a version that has .webp appended to its name, and those are the images being served to my browser.

The load time has dropped from the original 1.54 seconds to 1.37 seconds, but the real saving is in bandwidth used, 786 KB compared to the original 1.19 MB, a nearly 33% decrease. Nice! Remember, I skipped compression on these images the first time, so we could look at the savings with just WebP conversion.

I popped back into the EWWW settings page and ran the bulk optimizer again, this time selecting Force re-optimize to make sure it would compress all of the images, including the ones I had already converted to WebP. I also made sure to leave WebP Conversion Only unchecked this time. This time around, we managed to drop the load time down to 1.22 seconds. An incremental savings, but it could add up if you have an image heavy site.

Setting Up the WP Offload Media Plugin to Support WebP

Now it was time to install WP Offload Media and offload the media to S3 to help save more resources on the server. The ultimate goal is to deliver the files via Amazon CloudFront so that site visitors get them as fast as possible.

After installing WP Offload Media, I configured it to use my AWS access keys using the recommended AS3CF_SETTINGS constant defined in the wp-config.php file, and then created a new bucket via the UI.

I then offloaded the existing Media Library items to the new bucket with all the default settings, using the process explained in our Quick Start Guide.

You’ll notice I didn’t set up CloudFront at first. I wanted to make sure offloading to the bucket using default URLs worked before configuring a CDN. I like to KISS. 😉

I checked in on our test site again to make sure that WebP files were being served from the bucket. Success!

EWWW and WP Offload Media Support WebP

Turns out EWWW Image Optimizer’s support for WP Offload Media is the real deal. It implements the as3cf_attachment_file_paths filter to ensure the WebP files are added to the list of files that should be offloaded, and the as3cf_object_meta filter to set a correct “ContentType” so S3 does not reject them. Thanks Shane, you’re a star!

Looking at load stats, the transferred bytes were around the same, but our load time had shot back up to 1.61 seconds from 1.37 seconds. I had rather expected this to happen, as S3 is not optimized for speed. This is why we need a CDN.

Naturally, WP Offload Media will work just as well with images already in the WebP format, such as any files you’ve converted locally with cwebp or an image editor. In this case, you can just upload the WebP files directly into your Media Library, and from there place them in an S3 bucket.

Increasing WordPress Site Speed with a CDN

Now that we’ve got our WebP images served from our S3 bucket, it’s time to really boost our speed by using a CDN, in this case Amazon CloudFront. A CDN is one of the easiest ways to increase the speed of your site, through the expedient of serving the content from the nearest location.

I created a CloudFront distribution as per our CloudFront Setup for Media Offloaded to Amazon S3 guide.

In the WP Offload Media settings, I turned on the “Custom Domain (CNAME)” setting and entered the subdomain I wanted to use. We strongly recommend using a subdomain of your site’s domain here for better SEO.

A couple of refreshes of the site’s front page, and I started to see a nice improvement in delivery speed.

As expected, the total bytes transferred had remained roughly the same as the other times we used WebP at 786 KB, but the load time has dropped to 986ms!

Examining the Benefits of an Image Optimizer

I also played around with WP Offload Media’s “Remove Files From Server” option, offloading a variety of larger Media Library items to see if I could break EWWW Image Optimizer. No dice! EWWW Image Optimizer was able to compress the original files and generate WebP versions without a problem.

EWWW Image Optimizer integrates well with WP Offload Media. That makes offloading media and serving WebP images relatively easy.

• Turn on all the options in EWWW Image Optimizer’s WebP tab and enter the base URL for the offloaded media
• Bulk optimize your media
• Offload your media with WP Offload Media
• Job done!

EWWW’s combined image optimizing service and CDN, Easy IO, is something I need to look at in the future. It can automatically create and substitute WebP files for images it is serving, among many other features.

Wrapping Up

There seem to be some real gains with using WebP, so it’s probably worth investigating if you have an image heavy site. While WordPress supports WebP images, that won’t help you convert the images already in your media library. EWWW Image Optimizer is a great option for converting your JPEGs and PNGs without having to download, convert, and upload them all again.

Are you using WebP images to speed up your WordPress site, or are you ahead of the game and already serving AVIF files? Let us know in the comments below.