What is WebP?

WebP is an image compression technology developed by Google around a decade ago. The WebP file is represented by the “.webp” file format. The support for the WebP file format has increased quite a lot in the past few years by modern browsers, platforms like WordPress, and many other tools and software libraries. And because of its increased compatibility and popularity in recent years, the WebP has become a de-facto standard for web images.

The primary reason behind implementing this technology was to reduce the image file size as much as possible while maintaining the quality of the image. Image file size largely impacts the performance of the website and affects the SEO rankings as well.

This leads to an increase in bounce rate and lower ranking on analytical tools like PageSpeed Insights. The WebP particularly affects the Largest Contentful Paint (LCP) metrics of the Core Web Vitals (CWV) that measures the amount of time it takes to load the largest content component on the visible screen. Websites that do not have optimized images mostly face performance issues and this is the reason why webp was introduced. WebP conversion is one of the default optimization techniques that are enabled out of the box for 10Web Booster customers. It works for any WP website, hosted on any hosting.

How much can WebP reduce image payload?

The WebP technology provides two compression methods, lossy compression and lossless compression. Both these compression methods work in a different ways.

WebP lossy compression method reduces the image to 25-34% smaller than compared to the JPEG images at equivalent SSIM (Structural Similarity Index Measure) quality index. And the WebP lossless images are 26% smaller in size as compared to PNGs. These methods not just make the image size smaller but also reduces the load on the web servers as they are smaller in size.

Image compression for WebP

A WebP file consists of VP8 or VP8L image data, and a container based on RIFF. It uses two compression methods, lossy compression, and lossless compression. We will see each of these compression methods in detail.

Lossy compression

Lossy compression reduces the size of the image by removing metadata data from the image itself. It uses predictive coding to encode an image. Predictive coding is a technique to predict a block’s value the algorithm uses the value of its neighboring block.

Here, the VP8 divides an image into something called macroblocks. For each macroblock, the encoder tries to restore the unknown part of the image by understanding the already decoded neighboring parts from the image. This is called predictive coding. The reason WebP is far better than JPEG is because of predictive coding.

And to get efficient compression, it subtracts the unnecessary data from the block. The 4×4 luma, 16×16 luma, and 8×8 chroma are the three types of macroblocks that are used with VP8 intra-prediction modes.

For 90% of the cases, the lossy compression technique is recommended. It reduces the file size of the image to a larger extent resulting in good quality images, and higher page speeds. But sometimes it might affect the quality of the image as well, so in that case, you can use another WebP compression technique called lossless compression.

Lossless compression

The lossless compression method uses a variety of techniques to transform an image and reduce the image size. Various transformation techniques that are involved in lossless compression are as follows.

Predictor (Spatial) Transform – It reduces the entropy of the image. Entropy is a measure of image information content, which is interpreted as the average uncertainty of information source.

• Color (de-correlation) Transform – It decorrelates the R, G, and B values of each pixel.
• Subtract Green Transform – It subtracts the green values from the red and blue values of each pixel.
• Color Indexing (palettes) Transform – It identifies the number of unique ARGB values in the image.
• Color Cache Coding – It uses already-seen image fragments to reconstruct new pixels.

After all these techniques are performed on the image, finally, the entropy encoding is performed on the transformed image. Using Lossless compression, the quality of the image is maintained however, the image file size is also not reduced much as compared to lossy compression.

What are the advantages of using WebP?

• Faster page load times – Since the size of the image is lesser, it enhances the speed of the site.
• Less network traffic, therefore less cost.
• Also supports image background transparency and animation functionalities like GIF.
• Smoother color gradations Improvement in the compression algorithm.
• Increases SEO rankings.

What are the disadvantages of using WebP?

• Image quality – Sometimes it might affect the quality of the image, but most of the time it pretty much does a great job.
• Browser support – WebP is supported by all the major browsers. But there are still some older browsers that do not support WebP. Some people might still use older or legacy browsers without updating their versions, which might impact them.

Which web browsers support WebP format?

Almost all the major and modern browsers support the WebP file format. A list of all the web browsers that fully support WebP on both the desktop as well as on mobile devices is as follows.

• Google Chrome (V3+)
• Mozilla Firefox (V65+)
• Microsoft Edge (V104+)
• Opera (V11.5+)
• Safari (V14+)

These versions are used by around 99%+ of visitors, therefore using WebP without fallback causes loss of only 1% visitors.

Some older versions of some browsers like Safari and legacy browsers like IE do not support the WebP format. It is always recommended to use the latest version of the browsers so that you can take advantage of the latest feature enhancements and bug fixes.

How to convert images to WebP?

Below are the ways of converting images to WebP format.

Manually converting images to WebP:

To manually convert an image into a WebP file format you can take advantage of various third-party photo editing software, tools, and utilities as mentioned below.

• Photoshop,
• cwebp (conversion tool for Linux, Windows, or macOS),
• npm packages,
• Gulp,
• Webpack, etc

The only thing which you should be aware of when converting an image manually to WebP is to be comfortable in using any of these software, tools, and utilities. And the good part is that you don’t have to learn about how to use this software from scratch just for the sake of converting your images to WebP. There are always alternatives.

Apart from this, you can also use plugins in WordPress to automatically convert an image to WebP.

How to enable WebP on WordPress

If you already have a WebP image and you are using WordPress version 5.8 or above then you can easily use WebP on your WordPress website.

You simply have to upload the WebP image to the WordPress media library and use that image anywhere on your website directly as you would normally do with other images. This is because WordPress 5.8 has introduced built-in support for the WebP file format.

If you are using older versions of WordPress then in that case you can use third party plugins in order to use WebP on WordPress.

WebP conversion and optimization using 10Web Booster

The 10Web Booster is the speed optimization plugin for improving the overall performance of any website. It also supports converting and optimizing an image to WebP format.

1. To convert and optimize any images using 10Web Booster you first have to install this plugin via the WordPress admin panel.
2. Then you have to connect your website with the 10Web dashboard.
3. After you have successfully connected your website to the 10Web dashboard it will either be automatically redirected to the dashboard or you can press the “Manage” button from the 10Web WordPress plugin to go to the 10Web dashboard.
4. Now to convert and optimize the image you can select the “Image Optimizer” tab and from here you can convert and optimize your website.