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.
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.
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.
If you are hosting at Kinsta, you’ll need to reach out to our support so that we can create an Nginx rule for WebP cache buckets for some of these plugins.
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 has a limited free plan that lets you optimize ~100 images per month for free. Paid plans start at $4.99 per month for up to 5,000 images/credits or $9.99 one-time for a pack of 10,000 credits.
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 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 is a popular image optimization plugin from the same developer as WP Rocket (one of the few caching plugins that work with Kinsta).
Tired of a slow host for your WordPress site? We provide blazing fast servers and 24/7 world-class support from WordPress experts. Check out our plans
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
- If you’re hosting at Kinsta and using the Kinsta CDN, enter the URL of your Kinsta CDN (including https://) in the If you use a CDN box (we’ll tell you how to find the Kinsta CDN URL below)
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 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:
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.
If you have any questions about using WebP on WordPress, please ask us in the comments below!
The post How to Use WebP Images on WordPress (Shrink Image File Sizes up to 35%) appeared first on Kinsta.