How to Use Super-Light WebP Images in WordPress – If you want to speed up your WordPress site, and are looking for ways to reduce the load on each page, one of the best ways of optimizing is reducing the size of your images.
Since an average image takes up nearly the entire file load size of a web page, a small fix from reducing the image size can have a big impact on page load speed.
WebP is a modern image format that can help you reduce the size of your images without changing their appearance. On average, converting an image to WebP can shrink its size by ~ 25-35% without any noticeable loss of image quality.
Therefore, in this article I will discuss in depth the WebP format and give reasons why you should start using this format for your website.
Read: How to Optimize SEO on Images to Increase Site Ranking
What is WebP?
So, what are WebP files? In short, WebP is an image format developed by Google. For example, you have image formats like JPEG or JPG and PNG, right? Well, WebP is a super lightweight alternative file format for web images.
WebP is focused on sending the same image file, only with a smaller file size. By reducing the file size of the image, however, your images will still be displayed to your site visitors with the exact same quality, and the website will load faster.
For example, in Google’s WebP compression study, Google found that an average WebP image file …
- 25-34% smaller than a comparable JPEG image.
- 26% smaller than comparable PNG images.
This is why, if you run your site through PageSpeed Insights, one of the many recommendations is to Serve images in a next-generation format such as WebP:
So how does Google’s WebP format achieve this reduction in file size?
WebP supports both lossy and lossless compression, so the exact reduction will depend on whether you use lossy or lossless compression.
With lossy WebP compression, WebP uses something called “predictive coding” to reduce file sizes. Predictive coding uses the neighboring pixel values in the image to predict the values and then simply encodes the differences. It is based on VP8 key frame encoding.
Lossless WebP uses a much more complicated set of methods developed by the WebP team.
If you want to learn the WebP compression technique in detail, please read this article to the end.
Which Web Browsers Support WebP?
For WebP images to work, the visitor’s web browser must support them. Unfortunately, although browser support has grown rapidly, WebP compatibility is still not universal.
WebP images are supported by popular browsers such as:
- Chrome (desktop and mobile).
- Firefox (desktop and mobile).
- Edge.
- Opera (desktop and mobile).
However, the most important thing is Safari. At the time of writing this post, neither the desktop nor mobile versions of the Safari web browser do support WebP images. Apple briefly experimented with WebP support for Safari in 2016, but there has been no further push since then.
Internet Explorer also doesn’t have WebP support (but Edge does support WebP because it’s based on Chromium).
In total, approximately 77% of Internet users use a browser that supports WebP. So, even though it has majority support, that 23% is too big to ignore (in the WordPress WebP tutorial below, I’ll show you how to handle it so all your visitors can view WebP images and have a great experience):
WebP vs JPG vs PNG Size Comparison
According to Google testing, the WebP image is:
- 25-34% smaller than a comparable JPEG image.
- 26% smaller than comparable PNG images.
If you want to learn more about Google’s methodology you can find a direct link to the full results below:
- JPEG
- PNG
Both tests are based on more than 11,000 images including:
- Lenna Image
- 24 images from the Kodak true color image suite
- 100 pictures from Tecnick.com
- Random sample of 11,000+ images from Google Image Search
How to Use WebP Images in WordPress
Since not all browsers support WebP images, you can’t just upload WebP image files in your Media Library and use them right away in WordPress like you can with JPEG and PNG.
Again, 23% of people (including all Safari users) use a web browser that doesn’t support WebP. If you convert WebP images and use them directly in your content, these visitors will not be able to see your images, which is likely to result in disappointment of visitors and never coming back to your site again.
Don’t worry, there is a solution!
Instead of directly uploading a WebP image to WordPress, you can use a WordPress plugin that converts your original image to WebP format and also provides the original image as a backup in case the visitor’s browser doesn’t support WebP.
For example, if you upload a JPEG file to your site, the plugin will:
- Convert JPEG files to WebP and use the WebP version for visitors browsing with Chrome, Firefox, etc.
- Show original JPEG files to visitors browsing with Safari and other browsers that don’t support WebP.
That way, everyone can see your pictures and everyone has the fastest experience.
Below, I’ll cover some of the best WordPress WebP plugins, all of which work great
- ShortPixel
- Imagify
- Optimole
ShortPixel
ShortPixel is a popular WordPress image optimization plugin that can help you automatically resize and compress the images you upload to your WordPress site.
As part of its list of features, ShortPixel can also help you automatically convert images to WebP and serve them to a browser that supports WebP.
ShortPixel has a limited free plan that lets you optimize ~ 100 images per month for free. For paid plans ranging from $ 4.99 per month up to 5,000 images / credits or $ 9.99 one-time for the 10,000 images / credits plan.
ShortPixel calculates each WordPress image size that you optimize as a credit. So if you want to optimize for multiple image thumbnail sizes, one image can use up a lot of credit. There is no file size limit for images.
You can spread your ShortPixel credits to unlimited websites – no limit per site (and all your websites can use the same ShortPixel account).
To use ShortPixel to serve WebP images in WordPress, you will need to install a plugin from WordPress.org and add your API key (which you can get by signing up for a free ShortPixel account).
In the General tab, you can set basic settings for how image optimization works. For example, what level of compression to use and whether or not to resize the image:
To enable WebP images, go to the Advanced tab and:
- Check the box for WebP Images
- Check the box for Deliver the WebP versions .. (this appears after you tick the first box)
- Select the radio button for the PICTURE tag (this appears after checking the previous box) Leave the default
- Leave the default for Only via WordPress hooks selection
Then, click on Save your Changes.
Imagify
Imagify is a popular image optimization plugin from the same developer as WP Rocket (which is one of the few popular caching plugins for WordPress).
It can automatically compress and resize the images you upload to your WordPress site. Then, it can also help you convert it to WebP and serve the WebP version to visitors with browsers that support it.
In terms of features, ShortPixel and Imagify have a lot in common. The biggest difference comes when you look at prices. Whereas ShortPixel charges you based on an image with no size limit per image, Imagine charging you based on the overall file size, with no image limit.
So if you need to optimize a lot of large images, using ShortPixel might be cheaper. However if you need to optimize a lot of thumbnails, using Imagify might be cheaper.
Imagify has a limited free tier that allows optimization of 25 MB per month. After that, paid plans start from $ 4.99 per month up to 1 GB or $ 9.99 for 1 GB one-time credit.
Like ShortPixel, you can use to an unlimited number of websites.
To use Imagify to submit WordPress WebP images, you need to install a plugin from WordPress.org and add your API Key to get started.
After you activate the plugin, you can use the General Settings box to select your compression level.
To enable WebP images, scroll down to the Optimization section and find the WebP Format section:
- Check the box for Create webp versions of images
- Check the box for Display images in webp format
- Select radio button to use picture tag
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 important features:
- It can serve your images via its own CDN (powered by Amazon CloudFront).
- It offers real-time adaptive images where Optimole will provide the optimal 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 display.
This approach is similar to other real time optimization / manipulation services like Cloudinary, imgix, KeyCDN Image Processing, etc.
As part of this real-time image optimization, Optimole can also send WebP images to visitors with browsers that support it.
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 need to install a plugin from WordPress.org and activate it with an API key (which you can get by signing up for a free Optimole account).
Once you do, Optimole will start optimizing your images automatically and send them via its CDN. WebP support is on by default, so there’s no need to turn it on manually.
To configure other settings, such as compression level and scaling behavior, you can go to Media → Optimole → Settings :
Since Optimole takes care of sending your images via its own CDN, there’s no need to set up any Nginx rules on your best host .
Read: Image and PDF Optimization to Make it Lighter with ImageRecycle
Conclusion
Your WordPress site image is a large part of the average page file size. If you can find ways to reduce the size of your images, you can speed up your site without changing your visitor experience.
WebP is a modern image format that can offer ~ 25% file size reduction vs comparative JPEG or PNG files.
Most modern browsers support WebP and about 77% of Internet users have a browser that supports WebP. However, some browsers, especially Safari, still don’t offer WebP support, so you can’t show WebP images to all your visitors.
To solve this problem, you can use a WordPress plugin that converts an image to WebP and serves a WebP version to visitors whose browsers support this format, while using the original image for visitors whose browsers don’t support it.
The three plugins that can help you do this are:
- ShortPixel.
- Imagify.
- Optimole.
For more tactics for optimizing images, see my complete guide to optimizing images for web performance.
