Skip to main content
WordPress made easy with the drag & drop Total WordPress Theme!Learn More

How to Use WebP Files in WordPress

Last updated on:
webp files wordpress

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 image/webp.

WebP lossless images are 26% smaller in size compared to PNGs and WebP lossy images are 25-34% smaller than JPEGs.

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.

webp usage ebay

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.

WebP Support

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.

webp browser support

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!

browsers chrome webp

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).

  1. [premium] Optimus Image Optimizer: Lossless image compression plugin for WordPress, converts images to WebP
  2. [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.

creation of webp files

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.

webp and png files

There is also a bulk optimizer option in case you have already compressed your images before and still need to convert them to WebP.

bulk image optimizer

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.

cache enabler settings

Once you enable that option an additional cached WebP version of your page is created.webp versions

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.

Summary

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.

Subscribe to the Newsletter

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

11 Comments

  1. Emily

    I was interested in webp but how about if I already have other cache install? I have WP Rocket installed.

    • coptictreasures

      I have the same question. I have WP Rocket and cloudflare CDN. When I tried WordPress Cache Enabler, it did not work for me as I have Jetpack installed. Cache Enabler does not work with Jetpack. I tried using the .htaccess rules found online to serve the .webP images, but it did not work.

    • Brian Jackson

      Hey Emily! Unfortunately WP Rocket doesn’t support WebP yet, although they might in the future. For WordPress, there aren’t a lot of options out there yet to use WebP, but the Optimus + Cache Enabler is a good combo.

      • Emily

        I now using .htaccess it work!

        • coptictreasures

          Great. Can you please share the code you used, so we can use it too? Thanks.

  2. André Böker

    so why are you not using WebP here already. I think it’s very stupid to write tutorials and not following the own advices. But hey you have a lot of clicks through this.

    • AJ Clarke

      We have a lot of traffic coming from browsers that do not currently support this format. Our guide is intended as a tutorial for other people interested, but it doesn’t mean that everyone should be using it. In some cases the benefits do not outweighs the negatives. Also the images we use on our site are very small, already optimized and delivered via a CDN. The speed difference we would get may not even be noticeable. But maybe if your website is a Photography site with hundreds of large images you would see noticeable benefits of making the switch 😉

  3. Donna Wayne

    This is very informative and useful. I’ve read in this guide that WebP file format reduces images file size by 34% smaller than JPEG, and I thought that is a good thing and helpful for a wordpress website, but I wasn’t sure so I wanted to read into it a bit, and ran across your guide. Thanks a lot for clearing everything up, I found it very helpful 🙂

  4. Bishwa Ghatana

    Thanx for the article “How to Use WebP Files in WordPress & Decrease Page Load Times”. This is very informative and useful. I’ve read in this guide that WebP file format reduces images file size by 34% smaller than JPEG, and I thought that is a good thing and helpful for a wordpress website, but I wasn’t sure so I wanted to read into it a bit, and ran across your guide. Thanks a lot for clearing everything up, I found it very helpful 🙂

  5. Iryna Shcharbakova

    Hello,
    Thank you for the info!
    Do you know how to make webP images show up in exerpts (home page of my website) WITHOUT any plugins?
    Thank you

    • Kyla

      Actually, I think you can use Cloudflare to create and serve webp files for your images for your entire site (at least for their paid plans). Here’s where you can read about the Cloudflare Polish feature – but you can always double check with their help team just to be sure this features will do what you need.

Leave a Reply

Your email address will not be published. Required fields are marked *

Learn how your comment data is processed by viewing our privacy policy here.