Most of us know by now that image optimization is very important as it plays a huge part in the total load times of your WordPress website. Today we want to share with you an easy alternative on how to integrate Google’s WebP files into your WordPress site. Some users have seen image file size reductions of over 70%!
What is WebP?
If you aren’t familiar with WebP, it is an image file format created by the web performance team over at Google with the intent of creating images that are smaller and faster. It was first announced in 2010 and features both lossy and lossless compression methods. The images are delivered to the web browser from a web server based on the MIME type it uses which is
Companies like YouTube and eBay are already using WebP to silently power a lot of their sites. Below is an example from eBay, where on their homepage they average about 30 WebP files.
Why is WebP so important? According to httparchive, as of August 2016, images account for over 64% of an average web page’s weight. Typically it is more than your CSS, JS, and HTML combined. So choosing a robust image optimization method and image format such as WebP is crucial so that so that you can decrease your page weight as much as possible. Generally, the smaller your page is the faster it will load. And that will please not only your visitors, but also Google, as page speed is a ranking factor.
Now while WebP is very exciting it is also important to mention browser support. Not all modern browsers support WebP at the moment. According to caniuse, WebP is currently supported in Chrome 23+, Opera 39+, all versions of Opera mini, Android browser 4.3+, and Chrome for Android.
But wait! Don’t be too disappointed, because in the tutorial we are going to show you below, there is a method to deliver WebP files to supported browsers and JPG/PNGs as a fallback. This means that unsupported browsers won’t see a broken image, they will just see what they were seeing before. Think of WebP as an addition to your WordPress site, rather than a migration.
According to W3Schools, Chrome has the monopoly on the browser market share at a little over 70%. But don’t just take market share as solid proof, look at the data of your own visitors and see what browsers they are using, as it might differ based on your niche. You might be surprised though at how skewed the stats are. In Google Analytics under “Audience” you can click into “Browser & OS” and see what browsers people are using when they hit your site. We pulled a random website and as you can see below, 67% of the visitors are from Chrome and another 1% from Opera. So 68% of these people can view and benefit from the WebP image file format!
How to Use WebP Files in WordPress
In today’s example we are going to be using a combination of two different WordPress plugins to get WebP up and running in WordPress. These are created and developed by the team over at KeyCDN, which is a global content delivery network (CDN).
- [premium] Optimus Image Optimizer: Lossless image compression plugin for WordPress, converts images to WebP
- [free] WordPress Cache Enabler: Caching plugin which allows you to serve WebP to supported browsers
Optimus Image Optimizer
You can download Optimus Image Optimizer from the WordPress repository, from optimus.io, or from within your plugin dashboard. Note: It does require a premium license if you want to convert your images to WebP. Once installed you can enable the “Creation of WebP files” in the plugin settings.
After WebP is enabled this essentially creates an additional image for everything that is converted. So if you upload a PNG file or JPG, there is also now a .webp version of your image. Remember, the PNG/JPG is still needed because these are used still to serve to unsupported browsers. Optimus does lossless compression, so your PNG and JPGs are also compressed.
There is also a bulk optimizer option in case you have already compressed your images before and still need to convert them to WebP.
WordPress Cache Enabler
So now that you have WebP images, you need a way to tell WordPress to serve up WebP images to supported browsers and PNG/JPG to the other browsers. This can be accomplished with the free WordPress Cache Enabler plugin. You can download the plugin from the WordPress repository or install it from within your plugin dashboard. Once installed you can enable the “Create an additional WebP cached version” in the plugin settings.
Once you enable that option an additional cached WebP version of your page is created.
And that is it! Now you should have WebP files running on your WordPress website.
JPG to WebP Comparison
We ran a comparison of JPG to WebP to show the differences you can achieve.
|FILE NAME||ORIGINAL JPG||COMPRESSED JPG||WEBP FORMAT||SIZE DIFFERENCE %|
|jpg-to-webp-1.jpg||758 KB||685 KB||109 KB||86%|
|jpg-to-webp-2.jpg||599 KB||529 KB||58.8 KB||90%|
|jpg-to-webp-3.jpg||960 KB||881 KB||200 KB||79%|
|jpg-to-webp-4.jpg||862 KB||791 KB||146 KB||83%|
|jpg-to-webp-5.jpg||960 KB||877 KB||71.7 KB||93%|
WebP resulted in a 85.87% decrease in average image size.
PNG to WebP Comparison
Again, we also ran a comparison of PNG to WebP to show the differences you can achieve.
|File Name||Original PNG||Compressed PNG||WebP Format||Size Difference %|
|png-to-webp-1.png||44 KB||34 KB||30 KB||32%|
|png-to-webp-2.png||46 KB||35 KB||33 KB||28%|
|png-to-webp-3.png||43 KB||31 KB||25 KB||42%|
|png-to-webp-4.png||30 KB||24 KB||18 KB||40%|
|png-to-webp-5.png||15 KB||11 KB||8 KB||47%|
|png-to-webp-6.png||34 KB||24 KB||18 KB||47%|
|png-to-webp-7.png||15 KB||13 KB||8 KB||47%|
|png-to-webp-8.png||63 KB||47 KB||44 KB||30%|
|png-to-webp-9.png||48 KB||36 KB||33 KB||31%|
|png-to-webp-10.png||17 KB||14 KB||11 KB||35%|
|png-to-webp-11.png||18 KB||13 KB||9 KB||50%|
|png-to-webp-12.png||61 KB||45 KB||39 KB||36%|
|png-to-webp-13.png||32 KB||25 KB||21 KB||35%|
|png-to-webp-14.png||26 KB||21 KB||17 KB||35%|
|png-to-webp-15.png||14 KB||12 KB||9 KB||36%|
|png-to-webp-16.png||36 KB||27 KB||24 KB||33%|
|png-to-webp-17.png||14 KB||12 KB||8 KB||43%|
|png-to-webp-18.png||21 KB||18 KB||13 KB||38%|
|png-to-webp-19.png||42 KB||30 KB||27 KB||36%|
|png-to-webp-20.png||23 KB||20 KB||18 KB||22%|
WebP resulted in a 42.8% decrease in average image size.
As you can see, WebP is very easy to implement on your WordPress site and you can achieve drastically smaller image file sizes! There is no image compression out there that can compare to the savings of WebP. Oh, and did we mention that WebP has the ability to use lossless compression? That means you won’t see any noticeable quality loss. If you are looking for a better way to speed up WordPress, WebP can be a great solution.