Table of Contents

With images typically accounting for 50% of an average web page’s weight, anything you can do to optimize your images not only saves you space on your server but ensures your pages are served faster.

Fortunately, with the WebP image format, you can create smaller, richer images that are 26% smaller in size than PNGs and 25-34% smaller than JPEGs — while keeping the same quality.

In this post, we’ll look at what WebP is and how to use this image format on your WordPress site to reduce your images’ size dramatically.

What is WebP?

WebP is an image file format created by the web performance team at Google, developed as a replacement for JPEG, PNG, and GIF, while supporting good compression, transparency, and animations.

It was first announced back in September 2010 as a new open standard for lossy compressed true-color graphics on the web, producing smaller file sizes of comparable quality to JPEG.

Support for lossless and translucent images was announced in 2012, making WebP an alternative to the PNG format.

WebP’s lossy compression uses predictive coding to encode an image — the same method used by the VP8 video codec to compress keyframes in videos. Predictive coding works by using the values in neighboring blocks of pixels to predict the value in a block and then encodes only the difference.

WebP’s lossless compression uses already seen image fragments to reconstruct new pixels and can use a local palette if no match is found.

As you can see in the examples below from Google’s WebP gallery, there’s no noticeable difference in quality between the JPEG images on the left and the WebP versions on the right. What you don’t see, unless you check the file size, is that the WebP images are more than 30% smaller than the JPEG ones.

JPEG images vs WebP images

As we’ve covered on this blog before, when it comes to page weight, size matters. After all, the smaller the file size of a web page, the faster it’s going to load. It’s a no-brainer.

So by reducing the file sizes of your images using a format like WebP, in combination with other techniques, such as WP Rocket’s lazy load feature, you can serve smaller images and ensure your pages are delivered faster to your site visitors. Last but not least, by using the WebP format, you’ll optimize the Largest Contentful Paint grade, one of the Core Web Vitals scores.

Browser Support for WebP

You might be wondering, since WebP has been around for eight years now, why isn’t it more popular? Why are we still using JPEG and PNG when WebP can produce smaller file sizes of comparable quality?

Like many technologies on the web that struggle to find their feet, not all modern browsers support WebP. According to Can I use…, the browsers that support WebP include Chrome, Opera, Opera Mini, the Android browser, and Chrome for Android.

Which browsers support WebP images?

Microsoft announced it would support WebP in its Edge browser last October, with Mozilla making a similar announcement soon after for Firefox. Now, it’s just Apple’s Safari lagging behind without any compatibility.

After initially showing interest in supporting the image format when it added WebP support in iOS 10 and macOS Sierra, Apple later replaced it with HEIF, an image format based on the HEVC video compression standard (also known as H.265 and MPEG-H Part 2).

While there’s been no recent indication that Apple will support WebP in the future, the company has little choice now that all other major browsers and image editing software support it.

Using WebP — with JPEG/PNG As a Fallback

Just because Apple doesn’t support WebP doesn’t mean you shouldn’t use the format. It’s possible to deliver WebP files to visitors who use supported browsers while displaying JPEGs and PNGs as a fallback to Safari users.

This way, rather than deliver WebP to all users and risk Safari users seeing broken images, you can ensure all visitors to your site see your images — while users with supported browsers get a faster experience.

But before deciding whether or not to use WebP on your site, there are a few things to keep in mind.

Firstly, know that Chrome is the most popular browser with a 64% market share. So it’s highly likely that most of your site visitors will be able to view any WebP images on your site.

Browser Usage Stats from Google Analytics

It’s a good idea to check your Google Analytics to see which browsers your visitors are using before making a call on whether to go with this method or display WebP with no fallback.

Here, you can see visitors to my site overwhelmingly use Chrome and Firefox, which means 83% of my visitors would benefit if I used WebP.

On the other hand, Safari is the third most popular browser to benefit from a fallback image option.

How to Use WebP with WordPress

WordPress 5.8 added WebP support, so now you can upload your WebP images to the dashboard. However, WordPress doesn’t convert the original format to WebP.

No dramas, as we say in Australia. You can always convert your images to WebP format — you need to use a plugin.

With the free WebP Express plugin, you can serve auto-generated WebP images to browsers that support WebP while still serving JPEGs/PNGs to Safari users. This option works on any images on your site, including those in the media library, galleries, and themes.

WebP Express Plugin

Jetpack’s Site Accelerator feature (formerly known as Photon) also automatically converts JPEGs and PNGs to the WebP image format.

Here’s an example of the quality of compression that the Photon API offers when set to 50%:

Jetpack Photon API compression

Alternatively, you could use your CDN. Cloudflare users on paid plans can access the CDN’s Polish feature, which offers automatic WebP conversion. Like the other solutions I’ve mentioned above, Polish works by swapping a page’s JPEG and PNG images with WebP versions for browsers that support this file type.

Polish WordPress plugin

Our plugin Imagify now supports WebP images!

At the beginning of May 2019, WP Media (the company behind WP Rocket) launched Imagify 1.9.

This major release finally introduced the feature that many of our customers were waiting for: WebP support!

Now, for each image you optimize with the Imagify plugin, you’ll also get its WebP version (if you tick the option in the settings); in your Media library, this will result in the following image versions:

  • full-sized optimized image
  • full-sized WebP image
  • optimized thumbnails
  • WebP thumbnails

The optimization will also work for images included in your themes and plugins.

If you want, Imagify can also display WebP images on your front-end in two ways:

  1. <picture> tag
  2. rewrite rules in the .htaccess file.

The first option replaces the <img> tags with <picture> tags.
This should be the preferred solution, but keep in mind that some themes might break: so, if you choose this option, make sure to verify that everything displays correctly on your front-end.

The second option adds rewrite rules to your site’s configuration file (.htaccess) and doesn’t alter the code of your pages.
An important detail to consider: this option doesn’t work with CDNs!

What about already optimized images?

If you kept a backup copy of the original images, you have the possibility to create their WebP version separately (one by one or via bulk optimization).

Download Imagify for free!

JPG/PNG vs WebP Comparison

Google’s web performance team promises WebP lossless images 26% smaller than PNGs and WebP lossy images 25-34% smaller than JPEG images. So I did some comparison tests to see the differences in size that could be achieved with WebP.

Comparing JPEG to WebP

I download six random JPEG images from Unsplash, compressed them to see what kinds of savings I could get, and then converted the original images to WebP to compare.

Comparing JPEG images to WebP

Converting to WebP resulted in an average 50% decrease in image size.

I was surprised to see the difference in size between the JPEG and WebP versions of image4.jpg, but the plain pink background goes a long way to explaining the big size difference. Below, you can see the two versions side-by-side. The JPEG image on the left is slightly sharper than the WebP image on the right.

Comparing JPEG image to WebP image

Comparing PNG to WebP

Again, I picked six images at random, this time PNG files from I compressed them and then converted the original images to WebP to compare.

Comparing PNG images to WebP

The biggest differences in file size were for detailed images of leaves and a coffee machine (image4.png and image5.png, respectively), while the smallest difference was for a cat’s black and white images (image3.png).

Overall, converting from PNG to WebP led to an average 67% decrease in file size.

Wrapping Up

The WebP file format is still growing in popularity and support, but there’s much to gain from this file format. It can replace JPEG and PNG (and GIF!) file formats with lossy and lossless compression, but it delivers dramatically smaller file sizes.

There really is no other image format or image optimization tool for the web that can achieve smaller file sizes with no noticeable loss in quality quite like WebP can. That’s why we recommend you start using the WebP format to improve your site performance.

Comments (33)

Very interesting post, because this topic is not much covered yet. Glad to be informed in great details on this blog.

Now, just to make it clear, is it a good time to install the WebP Express plugin? Since Rocket is not handeling it?

I am very much interested about the mix "Wordpress+WebP Express plugin+Cloudflare free version".
Is it a no brainer?

I'm using Optimus Image Optimizer HQ to convert my images to WebP but I can only do that if I am using Cache Enabler by KeyCDN. WP Rocket doesn't support that kind of option, would you release an update for it? Because for me there's no reason for now to use WP Rocket if it's not going to support WebP format.

Very interesting post thanks for sharing! Do you have any recommendations on how to best set up this plugin to work alongside WP Rocket?

How about adding WebP support to Imagify? One of its main competitors supports it. It automatically inserts all images on a site with WebP and jpg/png fallback.

Excellent @Jonathan!

Hi all,

Nice post explaining what it coming with webp :)
Kudos on that!

I saw that you mentioned it was available through API at the moment.
Last time we interacted you noted weeks when it was about the update coming to the Imagify plugin, is that still the case?

Also I do have a question about how it will work when it comes to both WP Rocket and Imagify;
If you have already optimized all your images with Imagify ... do you need to batch it once more for WebP?

As always keep it up!

Here is the biggest hurdle I am facing... I am using Shortpixel for WebP support and it works, which is great. Until I enable lazyload from WpRocket settings

Please do support lazyloading for webp images as well.

Shame that nobody got back to me on the above :(
I am still hoping this will drop sooner then later because well WebP would be a very welcome addition for some additional speedup.
Besides that keep up the great job everyone!

Thanks for getting back to me Alice, much appreciated ;)
I only mentioned WP Rocket because of compatiblity (for instance with WebP and lazy loading in mind).
Ah ok good to know for sites with a larger image collection that it will be a one-time batch run to get WebP on all images of the past.
But really looking forward to it coming to Imagify.

Keep up the good job WP Media team :D

Almost a month has passed since the note about WebP coming to Imagify (longer if I count the discussion we had on Twitter).
Is there anything you guys can note about this development? Is it still weeks or months of from making it to Wordpress?
It's been a feature we would love to see for sure in Imagify and Wordpress.

And with the above mentioned fact that we would have to process our entire image set again, to make sure we have webp formats of all we would like to be able to plan that action out a bit (we have a fairly large image set to process).

Also you noted it was available in the API but I checked the API documentation but could not find something on WebP.
And PS: will the Optimizer on the be updated to support WebP as well?

(Not meant as critisism at all, but hope we can get some insight as to where this stands currently)

Hi Alice,

Thanks for getting back to us all :) much appreciated.
Ah ok that's a shame but Im sure it will be awesome when it releases.

Best of luck in development!

It would be awesome if we could enable WebP by combining WP Rocket and ShortPixel (just like we can do now combining ShortPixel and Cache Enabler). Do you have any plans on doing so?

Hi all sorry to be a pain but is there any estimated release for WebP when it comes to Imagify?
If you give us any time indication (weeks, months) that would be more than welcome.

As above, when is this likely to be supported? I pay for unlimited usage on wp rocket and it would be nice to see webp supported soon considering other plugins are already doing so. Is the delay because imagify is going to take care of the conversions while wp rocket will serve them and you're planning on releasing both simultaneously? Is it likely to be completed this month? :)

Hi. Is the latest version of WP-rocket ( has support of WebP and it works with lazyloading?

I have added a rule to the .htaccess to add .webp to the filename for supported browsers. This is basically what WebP Express does.

But this only works when WP Rocket is disabled. When it's enabled it only loads the .jpg file. Why is that?

I've had issues with Cloudflare's WebP support trying to send WebP to Safari users, especially on mobile devices, and therefore breaking. Just a heads up in case anyone else is looking in that direction.

The WebP Express Plugin is no longer being maintained.

Is there any way to apply the Imagify plugin WebP images to background images like on hero or slider modules?

My image optimizer (Shortpixel) creates 2 versions of images: JPG/else, and WebP.
As far as I knew, only Cacheenabler supports 21 versions of cache. But I prefer WP-Rocket for ebveything else it does so good!
Any plan to get that in?

If I use webp from Imagify, will people using Safari still see a JPEG image, or do I need to use an additional plugin for that?

WebP with a fall back jpeg or PNG would be amazing, cant wait for the update...hopefully soon.

WP Rocket doesn't seem to suppqort lazy load webP images. I use imagify for WebP with WP Rocket and it doesn't lazy load images. Kinda Sad ?

WP rocket vs imagfy Does not work together (Does not work with Webp). I tried on localhost and some other websites. It does not automatically redirect webp images. This is an error, please fix it.

Nice post. Recently i have updated my theme for Wordpress website. And, i got some performances improvements . Now it’s time for webp.let c how much i can gain in google page speed.

Latest Articles of Page speed and caching
Subscribe to Our Newsletter

Stay in the loop with the latest WordPress and web performance updates.
Straight to your inbox every two weeks.

Get a Faster Website
in a Few Clicks

Setup Takes 3 Minutes Flat
Get WP Rocket Now