https://wp-rocket.me/blog/webp-use-image-format-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.
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.
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.
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:
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.
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%:
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.
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
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).
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.
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 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.
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.