What’s the difference between lossy and lossless image compression? How do you…
Interested in using WebP images on WordPress? Or confused about what WebP images are in the first place and why you should even care about them?
In this post, we’re going to solve both of those problems. If you already know what WebP is and are itching to get started, we’ll show you a step-by-step guide on how to get up and running.
And if you’re still not sure why you should even care about WebP images for your WordPress site, we’ll start with an introduction to the WebP image format, its benefits and comparison to other image formats, and some important details about browser support.
Let’s dig in!
What Is WebP?
WebP is a modern image file format that was developed by Google.
By “image file format”, we mean that it functions the same as other image formats like PNG, JPEG, GIF, etc.
If you’re using images on your WordPress website, you can convert those images from formats like JPEG or PNG into the WebP format.
To human visitors, your WebP images will look exactly like images in other formats – there’s nothing special about how they look to the human eye.
So – what is the benefit of using WebP images then? Well..,
What Is the Benefit of Using WebP Images?
The main benefit and goal of the WebP project is to create smaller image files while preserving the same image quality.
If you can shrink the file size of the images that you use on your WordPress site, you can speed up your site’s load times without changing any part of your site’s user experience.
That’s the benefit of WebP images in a nutshell – smaller images → faster website load times.
For example, when Google rolled out WebP images for YouTube thumbnails in 2014, the Google team claimed that it resulted in up to a 10% reduction in page load time. In that same post, Google also said that they were able to shrink the size of images in the Google Play store by 35%.
This is why speed analysis tools like PageSpeed Insights will often suggest that you “serve images in next-gen formats”. By “next-gen formats”, these tools mean WebP (or a similarly optimized format).
Your next question might be – just how much smaller is WebP vs other image formats like PNG and JPEG?
Well, the exact difference depends on the specific image and file format that you’re comparing…
WebP vs JPEG
Google ran a big comparative evaluation between WebP and JPEG image compression and found that the WebP images were 25-34% smaller than equivalent JPEG images. In their words, “These results indicate that WebP can provide significant compression improvements over JPEG.”
If you want to see some actual images to judge whether the quality has changed, Google maintains a WebP gallery here that compares the same image WebP and JPEG format.
WebP vs PNG
For PNG images, Google found that the WebP version was 26% smaller on average.
Other studies have found slightly smaller or larger differences depending on which variables you use (like which JPEG encoding method you’re using), but the results are generally pretty consistent that WebP offers smaller file sizes at comparable quality, which is why it’s been growing in popularity.
Which Web Browsers Support WebP Images?
If we had written this post a year ago, we would have said that one disadvantage of the WebP format is that it lacked full browser support.
Chrome and Firefox have long had WebP support, but the lone major holdout had been Safari. However, Apple finally gave in back in September 2020 and added WebP support in Safari 14 and onward.
As of June 2021, all major browsers support WebP with the exception of Internet Explorer, which Microsoft is already about to deprecate in August 2021. This is according to the great website, Can I Use:
However, there is one little caveat with Safari support for WebP – it’s only available for Mac users who are on macOS 11 Big Sur or later. So if someone is using an older version of macOS/Safari, they still might not have WebP support.
Overall, Can I Use estimates that, as of June 2021, around 95% of all visitors use a browser that supports WebP.
But what about that other 5%?
Thankfully, it’s pretty easy to get around this by using the right WordPress plugin (which we’ll detail below). Essentially, you can upload your original images in JPEG/PNG/GIF format and have the plugin convert them. Then, the plugin will serve the WebP version to browsers that support it and the original version to browsers that don’t.
How to Use WebP Images on WordPress
WordPress 5.8 added WebP support. It means that you can upload WebP images directly on WordPress. However, you can’t convert them. Plus, being able to upload WebP images directly to the Media Library still won’t fix the ~5% of visitors whose browsers don’t support WebP.
That doesn’t mean you can’t use WebP images on WordPress, though. Instead, you’ll want to:
- Continue uploading images in their original formats – e.g. PNG, JPEG, GIF, etc.
- Use a WordPress plugin to convert images to WebP and serve the WebP versions when possible.
To accomplish both those things and optimize your images in other ways, you can use Imagify.
Imagify is a full WordPress image optimization plugin. In addition to helping you convert images to WebP and serve them to supported browsers, it can also help you:
- Compress multiple images in their original formats.
- Automatically resize images to a set of max dimensions without losing quality.
Imagify will automatically optimize and convert images to WebP as you upload them. And for older images, you can bulk optimize and convert some or all your existing images with a single click.
Here’s how to set it up…
1. Install Imagify Plugin and Activate API Key
To get started, install and activate the free Imagify plugin from WordPress.org.
Once you’ve done that, the plugin will prompt you to enter your API key.
If you upload fewer than ~200 images per month, you’ll be able to stick with the free plan forever. If you need more than that, you can upgrade to a paid plan, which costs $4.99/month for 500 MB (~5,000 images) or $9.99 per month for unlimited usage.
With all of the plans, you can use your API account on unlimited WordPress sites.
Once you have your API key, add it in the box and click Connect Me:
2. Set Up Basic Image Optimization Settings
Once you’ve added your Imagify API key, go to Settings → Imagify to configure the plugin’s basic settings.
At the top, you can choose your desired compression level, along with some other settings. If you’re not sure which compression level to use, you can try the visual comparison:
Further down the page, you can enable an option to automatically resize larger images and set the max dimension for resized images. For example, if you set the maximum width to 1,600 px, any images that are wider than 1,600 px will automatically be resized down to 1,600 px.
You can also choose which image thumbnail sizes you want to optimize:
3. Set Up WordPress WebP Conversion
To enable WebP conversion in Imagify, find the WebP Format settings under Optimization.
First, check the box to Create webp versions of images. This tells Imagify to convert your images to WebP, but it doesn’t tell Imagify to serve those WebP images to supported browsers.
To accomplish that, you can also check the box to Display images in webp format on the site. Under that, we recommend using the Use <picture> tags method.
If you’re using a content delivery network (CDN) to serve images from a separate URL, like https://cdn.yoursite.com, you should also enter that URL into the box:
As you can see in the screenshot, the <picture> tags method might cause issues with some WordPress themes. If you notice any problems with your theme after enabling WebP images, you can experiment with the Use rewrite rules option instead.
4. Convert and Optimize Your Images
Now, Imagify will start automatically optimizing and converting new images that you upload.
If you have a lot of existing images on your site, you can go to Media → Bulk Optimization to optimize all of your existing images and convert them to WebP:
And that’s it! Your WordPress site will now start using smaller, faster WebP images for visitors whenever possible.
Start Using WebP Images on WordPress Today
Using the WebP image format lets you reduce the file size of your WordPress site’s images without changing image quality or user experience. By shrinking the file size, you can speed up your site’s load times.
As of June 2021, the WebP format enjoys near-universal browser support, with ~95% of all visitors using a browser that supports WebP.
If you want to get started with WebP images on WordPress, you can use Imagify.
Imagify will automatically optimize your site’s images and convert them to WebP. Then, it will also handle making sure visitors see the WebP version of images if their browsers support WebP.
Do you still have any questions about using WebP on WordPress? Let us know in the comments section!