Serving lightweight WebP images can help boost your site speed, critical as both a ranking factor and as part of the user experience. 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.
Plugins still have a place when it comes to converting your existing images into the WebP format. EWWW Image Optimizer has support for generating WebP files and it’s one of our favorite image optimization plugins. EWWW also works very well with our WP Offload Media plugin.
In this article, we’ll look at a few different ways to convert existing images to WebP, including Google’s cwebp utility, the Squoosh app, and EWWW. 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 and free up server resources. Finally, we’ll set it up so everything is served through a CDN so we can pick up some serious speed. In other words…
- The Advantages of the WebP Image Format
- WordPress 5.8 and Most Browsers Support WebP
- Serving WebP Thumbnails With WordPress Filters
- 3 Ways to Convert PNGs and JPEGs to the WebP Image Format
- Using Cwebp to Convert to the WebP Image Format
- Changing Image Formats with Squoosh and Squoosh CLI
- Serving WebP Images with the EWWW Image Optimizer Plugin
- Setting Up the WP Offload Media Plugin to Support WebP
- Increasing WordPress Site Speed with a CDN
- Examining the Benefits of an Image Optimizer
The Advantages of the WebP Image Format
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. According to Google, WebP is…
a modern image format that provides superior lossless and lossy compression for images on the web.
A lossless image format like PNG offers perfect reproduction at the cost of larger file sizes. A lossy format such as JPEG uses irreversible compression, discarding some of the data and using an algorithm to rebuild the image. This results in smaller media files. GIFs occupy a sort of odd middle ground. While they are technically lossless, they are also 8-bit images. Converting a 24-bit JPEG or PNG into an 8-bit GIF and back again will inevitably cause data loss.
Studies conducted by Jyrki Alakuijala and Vincent Rabaud of Google show the lossless version of WebP files are approximately 26% smaller than PNG files. Lossy WebP files are also usually between 25 and 34% smaller than JPEGs, according to a study by the same authors.
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. This helps reduce bounce rates and improve rankings.
WordPress 5.8 and Most Browsers Support WebP
Native WordPress support for WebP came on July 20, 2021. Most of the major desktop and mobile browsers already supported the WebP image format by that point. Mac users who haven’t upgraded to at least Big Sur won’t be able to view WebP images. Safari’s support for the WebP format doesn’t work if users have Catalina or an earlier OS installed.
This doesn’t mean you can’t use WebP images. It does mean you’ll still need to fallback to other image files for users without WebP support. There are a few different ways to do this. If you’re using an image optimization plugin, it may do this for you. Our favorite, EWWW Image Optimizer, has this capability. We’ll show you which settings to use when we set up EWWW below.
You can also make modifications to your .htaccess file, but we can’t fully recommend doing this unless you’re very comfortable editing this file. Your .htaccess file is a high-level server configuration file. A single mistake may cause server configuration issues and break your site. If you do decide to go down this route, please make a backup of the original file before proceeding. This GitHub repo contains instructions and code for modifying .htaccess to serve images based on browsers, but even the author notes that it really isn’t the “responsible” way to do it.
Instead, you can just 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>
There are a few other things to bear in mind when you use WebP images with WordPress:
- Your web server’s image processing library must support the WebP format. You will receive an error message when uploading to the WordPress Media Library if your server doesn’t support WebP.
- The GD Graphics Library and ImageMagick—two of the most common image processing libraries on web servers—both support WebP, though GD hasn’t added lossless support yet.
- Uploading an animated or alpha formatted image will result in a lossy image instead of a lossless image, as these aren’t supported yet for resized images.
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.
In the next section, we’ll look at three ways to convert your existing image files to the WebP format: Google’s cwebp utility, the Squoosh app, and the EWWW Image Optimizer plug-in for WordPress.
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 JPEGs 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. As mentioned above, the GD Graphics Library hasn’t added support for lossless images yet.
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 DB Pro’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 the EWWW Image Optimizer plugin to add WebP as an additional file to be served when supported.
3 Ways to Convert PNGs and JPEGs to the WebP Image Format
Using Cwebp to Convert to the WebP Image Format
Google has precompiled utilities to convert JPEGs, 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. Please note that these utilities are run on the command line.
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. Otherwise, you’ll have to include the complete path in your command line every time you run it. The process itself is straightforward, but varies depending on your OS. Check out this guide for information on how to edit your system path in Windows. For Mac users, you can use Terminal to make additions to your system path. Linux users can find out how to change the PATH variable in this guide.
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 used Git Bash on Windows, but a quick search turned up solutions using Powershell, JavaScript, and Windows batch files.
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. This article from Smashing Magazine gives details on how to run these conversions more efficiently.
Changing Image Formats with Squoosh and Squoosh CLI
You can use Squoosh if you don’t have many images to convert to the WebP format. The online app can convert practically any image format into another, including WebP. The Squoosh app is limited to processing one image at a time. Batch processing is only available through Squoosh CLI, an experimental command line utility. We’ll go over how to use the online Squoosh app and provide some links on how to use Squoosh CLI for the more adventurous.
To get started with Squoosh, either drag and drop an image onto the indicated area of your screen or click to search your machine for the image you want to convert. Remember that it can only process one image at a time. You can drag multiple images onto it at once, but it will only open the last one in line.
The Squoosh editing screen will open automatically once you’ve dragged an image onto it. The interface is uncluttered and intuitive, but let’s take a moment to run through the available settings and options.
Edit: Located on the right-hand side of your screen, this panel has toggle switches for Resize and Reduce Palette. Both options are switched off by default. Toggling one will expand a new menu allowing you to control your output. We’re going to leave those switched off, as neither of them is necessary for converting your image to WebP. You can see the options available in the image below.
Compress: Both the left and right parts of the screen have menus for selecting compression settings. You can use this feature to compress a single image into two different formats to see which one you prefer. A bar with two arrows bisects the image on your screen. You can move this bar to one side or the other to show more of what the compressed image will look like. We recommend leaving the left-hand Compress menu alone if all you’re doing is converting to WebP. This will allow you to easily compare the original image to the WebP version.
The Compress menu on each side also shows the size of the original image (left) and how large the converted image will be (right). Select WebP from the dropdown menu. There is also a setting for WebP v2 (unstable), a still-experimental successor of the WebP image format. We do not recommend using this at this time.
The Squoosh app defaults to lossy compression, with a checkbox allowing you to select lossless compression. We’re converting a JPEG, so we’ll leave that unchecked for now.
You can adjust Effort and Quality with the slider bars. You’ll want to be careful with these, as higher settings can result in an output file larger than the original.
Make sure to check the box at the bottom of the Compress menu if you wish to preserve transparent data.
Click the arrow next to Advanced settings to tweak various details. These include image optimization characteristics such as alpha quality, filter strength, preprocess, and sharp RGB to YUV conversion. You can usually leave these settings at their defaults if all you’re interested in doing is switching the file format.
Squoosh is fast, free, and it’s easy to use. The app’s only disadvantage is that you can only process one image at a time.
Changing Image Formats with Squoosh CLI
Squoosh CLI is a command line interface that allows you to apply Squoosh codecs to many images at the same time. We should note that the CLI is still in the experimental phase. If you’re interested in trying it out, you can find the repository and instructions here.
Serving WebP Images With 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 two options: “JS WebP Rewriting” and “
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
After I clicked Save Changes, it took me back to the first settings page. 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 5.8 now offers native support for 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.
Have you used WebP images yet? If so, how did it go? If not, why not? Let us know in the comments below.
