If you want to speed up your WordPress site, reducing your images’ file size offers a significant return on your investment. On average, images account for about half of a webpage’s file size, so even minor improvements can yield humungous results. WebP can help you immensely with that!
WebP is a modern image format that can help you reduce the size of your images without changing how they look. On average, learning how to convert an image to WebP can shrink its file size by ~25-35% with no discernible loss in quality.
Most modern browsers and WordPress 5.8+ support WebP out of the box. In this article, we’ll dive deep into this exciting new image format and show you how you can leverage its awesomeness.
Ready? Let’s get started!
What Is WebP?
So, what is a WebP file? In a nutshell, WebP is an image format developed by Google to optimize images better than popular image formats (at that time). For example, you have image formats like JPEG or JPG and PNG.
Note: Check out how different image file types can impact the speed of your website.
WebP focuses on delivering the same image file, just with smaller file sizes. By reducing the size of your image files, you can still give the same experience to your website’s visitors, but your site will load faster.
For example, in Google’s WebP compression study, Google found that a WebP image file is on average:
- 25-34% smaller than a comparable JPEG image.
- 26% smaller than a comparable PNG image.
That’s the reason why if you run your site through PageSpeed Insights, one of the many recommendations is to Serve images in next-gen formats like WebP:
So how does Google’s WebP format achieve these reductions in file size?
First, it supports lossy and lossless compression, so the exact reduction will depend on whether you’re using lossy or lossless compression.
With lossy compression, WebP uses something called “predictive coding” to lower the file size. Predictive coding uses the values of neighboring pixels in an image to predict values and then only encodes the difference. It’s based on VP8 key frame encoding.
Lossless WebP uses a much more complicated set of methods that were developed by the WebP team.
If you want to learn about the WebP compression techniques in detail, this article is a good starting point.
Which Web Browsers Support WebP?
For WebP images to work, a visitor’s web browser needs to support them. Unfortunately, while browser support has grown a lot, WebP compatibility is still not universal.
WebP images are supported by popular browsers such as:
- Chrome (desktop and mobile)
- Firefox (desktop and mobile)
- Microsoft Edge
- iOS and macOS Safari (macOS 11 Big Sur and later only)
- Opera (desktop and mobile)
At the time that we’re writing this post, Safari supports WebP images only partially.
Internet Explorer also lacks WebP support (but Edge supports WebP as it’s based on Chromium). However, IE usage has shrunk to less than 1% of total internet users. That’s a boon for everyone on the web!
In total, around 95% of Internet users use a browser that supports WebP. So while it certainly has majority support, that 5% is a minor hurdle, especially when it’s Safari users on older macOS versions. In our WordPress WebP tutorial below, we’ll show you how to handle this so that all of your visitors have a great experience.
WebP vs JPG vs PNG Size Comparison
According to Google’s tests, WebP images are:
- 25-34% smaller than comparable JPEG images.
- 26% smaller than similar PNG images.
If you want to learn more about Google’s methodology, you can find direct links to the full results below:
Both tests are based on over 11,000 images, including:
- The famous Lenna image
- 24 images from Kodak true color image suite
- 100 images from Tecnick.com
- A random sample of 11,000+ images from Google Image Search
How To Use WebP Images on WordPress
Starting with WordPress 5.8, you’ll be able to use the WebP image format the same way as JPEG, PNG, and GIF formats. Just upload your images to your Media Library and include them in your content. As WordPress 5.8+ supports the WebP format by default, you don’t have to install third-party plugins to upload WebP images. That should suffice for most common use cases.
To get started immediately, you can refer to our quick primer on using WebP images in WordPress 5.8+. We suggest you go through the caveats about WebP support in WordPress.
However, around 5% of people (mainly Safari users on older macOS) use a web browser that doesn’t support WebP. If you convert WebP images and use them directly in your content, those visitors wouldn’t be able to see your images, which would ruin their browsing experience.
Also, generating WebP images isn’t as straightforward as getting a JPG/JPEG image, which is the default image file format on most cameras, smartphones, and online image libraries. WordPress doesn’t support automatic image conversion to WebP format (yet!).
Don’t fret! There’s a solution.
You can use a WordPress plugin that converts your original images to the WebP format and also provides the original image as a fallback if a visitor’s browser doesn’t support WebP.
For example, if you upload a JPEG file to your site, the plugin will:
- Convert the JPEG file to WebP and serve the WebP version for Chrome, Firefox, Edge, etc.
- Show the original JPEG file to visitors browsing with Safari (on older macOS versions) and other browsers that don’t support WebP.
That way, everyone can see your image, and everyone gets the fastest experience possible.
Below, we’ll go through some of the best WebP WordPress plugins, all of which work with Kinsta and the Kinsta CDN.
Kinsta’s Image Optimization Feature
This first one isn’t exactly a plugin, but rather a built-in feature: Kinsta’s Image Optimization.
This feature — accessed through Kinsta’s custom dashboard, MyKinsta — automatically creates optimized WebP copies of your site’s original images, then serves up the smaller of the two image files to your visitors.
By always ensuring the smallest possible file is retrieved, Image Optimization immediately boosts loading times, which can greatly improve both your SEO results and your users’ experience. The feature takes direct advantage of Kinsta’s lightning-fast CDN to deliver the files even faster.
Site owners can choose between lossy and lossless compression for their WebP images, depending on their needs. Optimization can also be switched on or off at will if you need to do some testing.
The Image Optimization feature is completely free for all Kinsta customers. Here’s how to enable it:
- Upload your images to your Kinsta-hosted WordPress media library.
- Sign in to your MyKinsta dashboard.
- Navigate to WordPress Sites > sitename > CDN.
- Click on the Settings button under the Image optimization section.
- Choose between lossless and lossy compression, then click Save Settings.
If you’re not already on the Kinsta platform, you can give the feature a try yourself at no cost by scheduling a demo.
Lossless vs Lossy Compression
You can choose between lossless and lossy compression for your files. Although both methods will compress your image files and remove their metadata, there’s a big difference between them:
- Lossless Image Optimization: Lossless image compression has zero impact on the quality of your images. You should pick this option if image quality is more important to you than speed.
- Lossy Image Optimization: Lossy image compression might reduce the quality of your images. Pick this option to maximize and prioritize speed over image quality.
Next, we’ll look at some installable WordPress plugins for optimization.
ShortPixel
ShortPixel is one of the most popular WordPress image optimization plugins that can help you automatically resize and compress the images you upload to your WordPress site.
As part of its feature list, ShortPixel can also help you automatically convert images to WebP and serve those images to browsers that support it.
ShortPixel counts each WordPress image size that you optimize as a credit. So if you want to optimize multiple image thumbnail sizes, one image could conceivably use numerous credits. There are no file size limits for images.
You can spread your ShortPixel credits over unlimited websites – there are no per-site limits (and all your websites can use the same ShortPixel account).
To use ShortPixel to serve WebP images on WordPress, you’ll need to install the ShortPixel plugin from WordPress.org and add your API key (which you can get by registering for a free ShortPixel account).
In the General tab, you can set up basic settings for how image optimization works. For example, what compression level to use and whether or not to resize images:
To enable WebP images, go to the Advanced tab and:
- Check the box for WebP Images
- Check the box to Deliver the WebP versions… (this appears after you check the first box)
- Select the radio button for Using the <PICTURE> tag syntax (this appears after checking the previous box)
- Leave the default Only via WordPress hooks selection
Then, save your changes.
If you’re hosting at Kinsta, ShortPixel will give you a warning message about configuring server config files on Nginx. To configure these settings, you can reach out to Kinsta support, and we’ll be happy to set up the server configuration for you.
Imagify
Imagify is a popular image optimization plugin from the same developer as WP Rocket.
It can automatically compress and resize the images that you upload to your WordPress site. Then, it can also help you convert them to WebP and serve those versions to visitors with browsers that support it.
In terms of features, ShortPixel and Imagify share a lot of similarities. The most significant difference comes when you look at pricing. Whereas ShortPixel charges you based on images with no size limit per image, Imagify charges you based on overall file size, with no image limit.
So if you need to optimize lots of large images, ShortPixel’s approach might be cheaper. But if you need to optimize lots of small images, Imagify’s approach might be more affordable.
Imagify has a limited free tier that allows for 25 MB of optimizations per month. After that, paid plans start at $4.99 per month for up to 1 GB or $9.99 for a one-time credit of 1 GB.
Like ShortPixel, you can spread your account limits over unlimited websites.
To use Imagify to deliver WordPress WebP images, you’ll need to install the plugin from WordPress.org and add your API key to get started.
Once you’ve activated the plugin, you can use the General Settings box to choose your compression level.
To enable WebP images, scroll down to the Optimization section and find the WebP Format section:
- Check the box to Create webp versions of images
- Check the box to Display images in webp format…
- Select the radio button to use <picture> tags
As with ShortPixel, if you’re hosting at Kinsta, you’d need to create an Nginx rule for WebP cache buckets (reach out to Kinsta support).
Optimole
Optimole is a WordPress image optimization plugin that operates a little differently than Imagify and ShortPixel. Optimole can automatically compress and resize your images. However, it also has two other notable features:
- It can serve your images via its CDN (powered by Amazon CloudFront).
- It offers real-time adaptive images whereby Optimole will deliver the optimally sized image for each visitor. For example, someone browsing on a small screen will get a lower-resolution image than someone browsing on a Retina screen.
This approach is similar to other real-time optimization/manipulation services like Cloudinary, imgix, KeyCDN Image Processing, etc.
Optimole can also deliver WebP images to visitors with browsers that support it as part of this real-time image optimization.
Optimole has a limited free plan that can handle serving images to around ~5,000 visitors per month. After that, paid plans start at $19 per month for ~25,000 visitors.
To get started, you’ll need to install the plugin from WordPress.org and activate it with an API key (which you can get by registering for a free Optimole account).
Once you do that, Optimole will start automatically optimizing your images and delivering them via its CDN. WebP support is on by default, so there’s no need to enable it manually.
To configure other settings, like compression levels and scaling behavior, you can go to Media → Optimole → Settings:
Since Optimole handles delivering your images via its CDN, there’s no need to set up any Nginx rules if you’re hosting at Kinsta.
Summary
Your WordPress site’s images make up a big part of the file size of an average page. If you can find ways to reduce the size of your images, you can speed up your site without hurting the user experience. WebP is a modern image format that does exactly that by offering a ~25% reduction in file size vs comparative JPEG or PNG files.
Around 95% of Internet users already use a browser that supports WebP. WordPress 5.8+ versions also support WebP out of the box now. So there’s no reason you shouldn’t use it.
However, a minority of browsers, notably Safari on older macOS versions, still don’t offer WebP support. Hence, you cannot serve WebP images to all visitors yet. To address this issue, you can use a WordPress plugin that converts images to WebP and serves WebP versions to visitors whose browsers support it while using the original images to visitors whose browsers don’t.
For more tactics to optimize images, check out our full guide to optimize images for web performance. And don’t forget that Kinsta customers can automatically generate compressed WebP images, with no cost in disk space, by leveraging Kinsta’s free, built-in Image Optimization feature.
If you have any questions about using WebP on WordPress, please ask us in the comments below!
Why always paid plugins? For example Resmushit + webp express works great and is free ;)
Thanks for sharing this. I use Imagekit on my website and I am quite happy with it. I prefer it to Imagify, although I still use WP Rocket
I run a photography website so the images are both plentiful and also key to the content. Should I be wary of using WebP? I already use Imagify to create smaller JPEGs but I’m hesitant to generate an entirely new format. I have seen people say the lossless WebP option is pretty useless, often increasing the file size.
Great article, already tried a few webp integrations but since Safari (iOS) does not support it, I’ve ran into a lot of troubles and decided to remove it (for now).
The technology itself is good, but since there are issues with browser support, I can’t integrate it in many websites and would not recommend anyone to do this at least until Apple starts adding real support to it.
Hey, great post,
Thanks to Rafael @ Kinsta support for helping with this. I will say one thing, if you’re using Imagify and you copy the Kinsta CDN URL, make sure to put https:// at the front of it or it won’t save the URL.
Just a heads up, thanks for being awesome people, stay classy.
All the best
Ben
Hello Ben, thank you for your comment! We will pass your message to Rafael!
Hi, Safar in last version webp format supported!!
But, yet still wordpress It is not yet supported in the media section!
Hello, I don’t think WordPress will support WEBP natively until the format receives adoption similar to JPG/PNG/GIF. Unless you convert to JPG or PNG, many people will not be able to see WEBP images at this time.
All fine, but what about themes? ShortPixel gives you support for webp images in posts and pages. But, themes like Solidad do many things their own way, and ignore the webp images. And some of the theme images may be shown on all pages, so webp would be useful there.
However, it appears that none of the dozens of WordPress WebP articles even mentions this. Are there very few themes out there with this issue, or is it just being ignored because there’s no answer?
Hi Gerry, I’m not a theme developer, so I can’t provide a 100% certain answer. I think if a theme is developed with WordPress best practices in mind, then it shouldn’t be overriding such a core functionality. If you notice it with a theme you’re using, I’d suggest reporting it to the theme developer to resolve. If that is not possible, you can add WEBP support via Cloudflare instead.