What is WebP and How to Use This Image Format in WordPress

With images typically accounting for 50% of an average webpage’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 take a look at what WebP is and how to use this image format on your WordPress site to dramatically reduce the size of your images.

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 using WP Rocket’s lazy load feature, you can serve images that are smaller and ensure your pages are delivered faster to your site visitors.

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 files sizes of comparable quality?

Well, like a lot of technologies on the web that struggle to find their feet, not all modern browser 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 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 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 simply display WebP with no fallback.

Here, you can see visitors to my site overwhelming 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, so these users would benefit from a fallback image option.

How to Use WebP with WordPress

Here’s another hurdle when it comes to using WebP: WordPress doesn’t support it.

While WordPress supports the most popular image file formats, including JPEG, PNG, GIF, and ICO, it’s yet to add WebP to that list. This means that you can’t just go and upload a WebP file to your WordPress media library because you’ll get this security error:

Media Library Security Error with WebP files

No dramas, as we say in Australia. You can still use the WebP format on your site — you just 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:

  • <picture> tag
  • rewrite rules in the .htaccess file
webp format optimization with imagify

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 the bulk optimization).

Download Imagify for free!

JPG/PNG vs WebP Comparison

Google’s web performance team promises WebP lossless images that are 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 freepngs.com. 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 black and white image of a cat (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. Not only can it replace JPEG and PNG (and GIF!) file formats with is lossy and lossless compression, but it delivers dramatically smaller file sizes, too.

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.

Hopefully, we’ll see WordPress — and Apple — introduce support for WebP in future. Until that happens, I’d encourage you to experiment with this file format and check out alternative tools that can help you serve WebP images on your WordPress site.

About

Raelene Morey is the Co-Founder of Words By Birds, a digital writing agency that helps busy WordPress with writing articles, content strategies, lead magnets and other word-related things. A former journalist and editor, Raelene has been developing WordPress sites for over 10 years.

22 comments

Comment

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.

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!

    Hi Patrick, sorry for the late answers! We receive so many comments on our blog that sometimes we mistakenly skip some of them.

    To answer your questions:
    The Imagify update including WebP images is only a few weeks away, so it’s coming soon!
    WP Rocket won’t take care of WebP conversion, it will only make sure that images are displayed within the cache environment.
    If images are only optimized by Imagify but not converted, you’ll need to relaunch the bulk optimization to convert them to WebP format.

    Hope this answers your questions! 🙂

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 😀

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 app.imagify.io 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 Patrick, we realized there is a bit more work to do on Imagify than expected, so we’re still working on it, and WebP support will be delayed a little. At the moment I don’t have a clear due date, but hopefully, we’ll be able to give more updates on this soon. 🙂

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 Robin, we’re working on WebP with our image optimization plugin, Imagify. Have a look at it, if you don’t know it already: https://imagify.io/
    Imagify will soon support WebP images, and WP Rocket will make sure that WebP images are displayed within the cache environment.

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

Leave a Reply

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

{"cart_token":"","hash":"","cart_data":""}