May 08, 2019
What Is WebP? A Guide for Beginners
Having a fast-loading website is probably every webmaster’s dream. One of the ways to optimize page speed is by using WebP format images. So, what is WebP? It’s a format that offers richer, high-quality image, with a smaller size compared than PNG or JPEG.
In this article, you’ll learn about WebP, its pros and cons, and how to use this format on your WordPress site.
What Exactly Is WebP?
WebP is a file format developed by Google back in 2010. It provides a higher compression rate for images while keeping the quality intact. Webmasters and developers can create images with smaller file sizes so that your site can load them faster.
This format uses more powerful lossless and lossy compression methods compared than PNG and JPEG formats.
Lossless compression means that every bit of original data will remain the same after the file is uncompressed. WebP lossless helps to compress images up to 26% more compared to PNG.
On the other hand, the lossy comparison will usually reduce the file size, by removing a certain amount of original data. With the predictive coding to encode an image, lossy WebP offers a comparable quality as JPEG, while reducing image file sizes from 25% to 34%.
As we’ve noted earlier, smaller image sizes can make a big difference on your site — it helps the website to load faster.
To understand the difference better, let’s take a look at a brief explanation of JPEG and PNG formats.
- JPEG (or JPG) – this format is great for images with a lot of colors, and is the preferred option for still images. However, there’s usually a trade-off: you’ll notice a slight loss of image quality due to compression.
- PNG – is excellent for keeping the image quality, even when it’s compressed. This format suits for images with a lot of data or pixels, for example, logos, text-heavy images, and illustrations. However, it doesn’t work really good for photographs.
WebP combines and offers the best of both formats. While giving some 25-34% smaller size than PNG or JPEG, it also manages to retain the image quality.
For an illustration, have a look at the images from Google’s WebP gallery. As you can see, we can’t really distinguish the difference in quality between JPEG images on the left, and WebP images on the right.
When you do file-checking, however, you’ll notice the difference that the WebP images are 32% and 34% smaller than the JPEGs.
Given all the benefits this image format has to offer, it’s worth to mention some of the limitations that it has.
Given the current trend, we hope that those browsers will follow pretty soon.
Another problem for a webmaster who wants to use this format for their site, is that WordPress currently doesn’t support WebP images. This means you can’t just start uploading WebP files to your WordPress media library.
This doesn’t mean you can’t use it though — you only need the help of a plugin to do that.
Using WebP in WordPress
You can display WebP on WordPress images using WebP Express, and here’s a tutorial about how to install a WordPress plugin.The WebP Express plugin uses the WebP Convert Library to change the images. This plugin serves as a converter, that generates WebP to browsers that support this format, but displaying JPG or PNG to browsers that don’t.
You can also use Optimole plugin, to help you convert the images to browsers that support WebP. This plugin not only will optimize your WebP images, but it will also serve them through a CDN.An alternative to plugins, you can also use Photon API to do the same thing. With this API, your JPEGs and PNGs images will instantly be converted to your desired format.
However, please be mindful that you can only use this API for sites hosted on WordPress.com, or Jetpack-connected WordPress sites.
And that’s it. Now you’ve learned about WebP format, helping you to have a smaller size, richer quality images to use on your site.
You probably want to start using this format for your images, as it helps your website to load them a lot faster. It also gives you much space for bandwidth quota, especially if you use a lot of images on your site. Though it has limitations, you can always use plugins that help you to convert those images.