– Advertisement –
A reduction in your images’ file size will significantly increase the speed of your WordPress site. The file size of a webpage is about half comprised of images, so even small improvements can yield big results. You can greatly benefit from WebP!
You can reduce the size of your images with WebP while not compromising their quality. The file size of an image can be reduced by 25%-35% when converted to WebP with no discernible loss in quality.
WebP is supported out of the box by most modern browsers, as well as WordPress 5.8+. We will explore this exciting new image format in this article and explain how it can be used in a variety of ways.
What Is WebP?
In other words, what exactly is a WebP file? WebP is an image format that is geared toward enhancing the efficiency of images (at the time) over other popular formats. You can save images in formats such as JPEG, JPG, or PNG.
See how different image formats can affect your website’s speed.
Rather than delivering the same image, WebP delivers the small file size of the image. Using smaller image files will still give your website’s visitors the same experience but will load faster.
As one example, in Google’s WebP compression study, it was found that a WebP image file was on average:
- Images that are 25-34% smaller than comparable JPEG images.
- PNG images are 26% smaller than equivalent JPEG images.
Therefore PageSpeed Insights recommends serving images in next-generation formats like WebP when you run your site through it
What are the techniques Google uses to achieve these reductions in file size?
You can choose between lossy and lossless compression, so the exact reduction you’ll see is dependent on which type of compression you use.
As a lossy compression method, WebP uses something called “predictive coding” to reduce file size. By predicting the values of neighbouring pixels in an image, predictive coding only encodes the difference between them. In this format, keyframes are encoded in VP8.
In comparison to WebP, Lossless WebP uses a much more complex set of techniques.
A good starting point for learning about WebP compression techniques is this article.
Which Web Browsers Support WebP?
Browsers need to support WebP images in order to display them. The WebP standard is still not universally supported by all browsers, although support has grown considerably.
Popular browsers such as: provide support for WebP images.
- Mobile and desktop versions of Chrome
- Browsers (desktop and mobile) that support Firefox
- Edge is a Microsoft product
- Safari for iOS and Mac (only Mac OS 11 Big Sur and later)
- Opera for desktops and mobile devices
- Safari supports only a portion of WebP images as we write this post.
Additionally, Internet Explorer lacks WebP support (whereas Edge supports WebP since it’s based on Chromium). The proportion of people using Internet Explorer has declined to less than 1% of the total. The web is a better place with less use of Internet Explorer!
A total of 95% of Internet users use a browser with WebP support. While there is certainly a majority of support, 5% is a small hurdle, especially for Safari users with older macOS versions. Below, we’ll provide instructions for handling this so that every visitor has an excellent experience.
WebP vs JPG vs PNG Size Comparison
The following are the main benefits of WebP images according to Google tests:
- Compared to comparable JPEG images, these are between 25 and 34% smaller.
- Compared to similar PNG images, this image is 26% smaller.
How to Use WebP Images on WordPress
With the advent of WordPress 5.8, you’ll be able to use WebP images just as you do JPEG, PNG, and GIF. Just upload your images to the Media Library and then insert them into your content. WebP images can be uploaded to WordPress 5.8+ without installing any third-party plugin. The majority of users will probably find that to be sufficient.
For an immediate start, you can refer to our quick primer on using WebP images in WordPress 5.8+.
In the meantime, 5% of people (mainly Safari users on macOS older than 10 years old) do not have a WebP-compatible browser. You can’t use WebP images straight in your content if you convert them. That would ruin your visitors’ browsing experience.
WebP images are also harder to generate than JPEG/JPEG images, which are the default image file format for most cameras, smartphones, and online image libraries. But now WordPress has officially added support for WebP images to directly upload them.
It is possible to use a plugin that converts your original images to the WebP format and also provides the original image as a fallback if a visitor’s browser does not support WebP.
You should convert the JPEG to WebP and serve it in Chrome, Firefox, Edge, etc.
Safari users and those using other browsers that don’t support WebP should display the original JPEG file.
By doing so, your image will be viewed by everyone, and everyone will get the fastest experience.
This article will cover the best WebP WordPress plugins, which all work efficiently.
- ShortPixel
- Imagify
- Optimole
ShortPixel
ShortPixel is a popular WordPress image optimization plugin that allows you to resize and compress images when you upload them to your WordPress site.
In addition to its many features, ShortPixel also assists in converting images to WebP and serving them in browsers supporting it.
For a limited time, ShortPixel is offering a free plan that allows you to optimize 100 images per month. For $4.99 per month or $9.99 one time for 10,000 credits, users can upload up to 5,000 images.
Whenever you optimize a WordPress image size, ShortPixel counts the credit. One image could possibly need many credits if you wish to optimize many image thumbnail sizes. Image file sizes are not limited.
The number of websites you can have on ShortPixel can never be limited (and you can share your ShortPixel account between all your sites).
In order to use ShortPixel to serve WebP images on WordPress, you must install the plugin from WordPress.org and add your API key (you can get this by signing up for a free ShortPixel account).
You can enter basic settings for how image optimization works in the General tab. When it comes to compression level and resizing of images, these are examples:
If you want to enable WebP images, click the Advanced tab and do the following:
- Make sure the WebP image box is checked
- After checking the first box, select Deliver the WebP versions…
- You can use the *PICTURE> tag syntax (this appears after checking the previous option) by checking the appropriate radio button.
- Leave the Only via WordPress hooks selection at its default
- Once you have made changes, save them.
Imagify
This popular image optimization plugin is from the same developer as WP Rocket (one of the few caching plugins that work with every hosting).
Your WordPress site’s images can be automatically compressed and resized with it. In addition, it can help you render WebP versions for visitors with browsers that support it.
Compared to Imagify, ShortPixel has similar features. The biggest difference is the price. As opposed to ShortPixel, which charges you based on images, without a limit on file size per image, Imagify charges you based on overall file size, with no limit on image size.
Therefore, ShortPixel’s approach may be less expensive if you have lots of large images to optimize. However, Imagify’s approach may be more affordable if you need to optimize a large number of small images.
With Imagify, 25MB of optimizations can be performed for free per month. A one-time credit of 1 GB is $9.99, or $4.99 for monthly credit of 1 GB.
The account limits of ShortPixel can be spread across an unlimited number of websites.
You will need the Imagify plugin from WordPress.org and an API key in order to use Imagify with WordPress.
The General Settings box allows you to choose the compression level after activating the plugin.
You must find the WebP Format section in the Optimization section before enabling WebP images:
- Choose to Create WebP Versions of Images from the drop-down menu
- Check the box to Display images in webp format…
- Select the radio button to use <picture> tags
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.
The free version of Optimole can handle serving images to around *5,000 users per month. A paid plan for 25,000 visitors begins at $19 per month after that.
Optimole’s free account allows you to obtain an API key, which you can then activate the plugin.
You should see your images automatically optimized by Optimole once you click that button. There is no need to enable WebP support manually, since it is on by default.
Media * Optimole * Settings allows you to customize other settings, like compression levels and scaling behavior:
You do not need to configure any Nginx rules for hosting since Optimole handles image delivery via its CDN.
Summary
The images on your WordPress site occupy the majority of the file size of an average page. The size of your images can be reduced without harming the user experience if you find ways to reduce them. In comparison with JPEG or PNG files, WebP offers a 25 percent reduction in file size.
Most Internet users already use a WebP-compatible browser. 8+ versions also support WebP out of the box now. So there’s no reason you shouldn’t use it.
There are still a few browsers out there without WebP support, notably Safari on older macOS versions. Therefore, a lot of visitors may not be able to see WebP images. A WordPress plugin can resolve this issue by converting images to WebP and delivering them to visitors whose browsers support WebP, while displaying the original images to visitors whose browsers cannot.
We’d love to hear your questions about WebP on WordPress! Just comment below!
– Advertisement –