Glossary

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

The Advantages

As we’ve noted earlier, smaller image sizes can make a big difference on your site — it helps the website to load faster.

Another benefit is you can save more bandwidth, especially if your site is filled with a lot of images, for example, if you’re running a food, travel, or photography blog.

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.

The Drawbacks

Given all the benefits this image format has to offer, it’s worth to mention some of the limitations that it has.

First of all, while some off the major browsers, including Google Chrome, Firefox, and Opera already support WebP format. However, Safari and Internet Explorer do not.

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.WebP Express plugin to enable WebP on WordPressThe 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.
WebP express settings on WordPress
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.Optimole plugin homepageAn 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.

Conclusion

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.

About the author

Luqmanul M.

Luqman is a self-proclaimed social scientist. He is passionate about education, technology, and everything in between. He wants to help create a high-quality education system. Having spent the past four years as a social researcher and blog guru, he lends his skills to Hostinger's digital content team. As for free time, he enjoys reading scientific (and not-so-scientific) literature with a cup of black arabica coffee as a companion.

Add Comment

Click here to post a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get Exclusive Content

Join thousands of webmasters who get our free newsletter with tips on how to drive more traffic and revenue to their websites!

Please wait...

Thank you for sign up!

More in Glossary
What Is a TLD?
Close