What are WebP Images, and when they should be used?
April 12th, 2022 by Pavithra KameswaranThe speed with which your website / web application loads is a key factor in a great user experience, and also has a big impact on the ranking of your website in search engines such as Google.
While there are many things that can be done to optimise a website and its performance, one of the most common factors that we see slowing down websites is the use of very large images.
That’s where WebP Images – the most recent image format to be introduced on the web – comes into play. WebP images can significantly reduce the load time thus increasing website performance.
What is a WebP image?
A WebP image is an image that has been created using the WebP format. The WebP image format was developed by Google and first released in 2010. A WebP image has a file extension of, of course, .webp.
You may not have heard of WebP images before, even though they have been around for over 10 years, because web browser support for the new image format has been slow to arrive. In addition, your image editing software is unlikely to have the option to save your image to the WebP format.
Below is an example of a .webp image. As a .jpg its size was 451Kb. As a .webp image it is just 97Kb.
To understand how the WebP image came to be more effective than the other formats, we need to know a little about image compression. When an image is optimized, some form of compression must be applied to it, thus reducing the file size of the image. There are two general types of compression:
- Lossy compression – the overall idea of lossy compression is to reduce the file size by removing some of the [less necessary] image data. This results in the loss of quality to an extent from the original image, and so the most successful lossy compression does so in a way that is very hard to detect with the naked eye.
- Lossless compression – this type of compression involves reconstructing the image data in such a way as to reduce file size, without removing any of the information about the image. Since all the image data remains, we can also reconstruct the original image from a lossless compressed image. This cannot happen in a lossy compressed image since some of the image data has been removed.
The WebP image format can use both lossy and lossless compression, and according to Google, the WebP image format can achieve approximately 30% smaller sized images compared to PNG or JPEG.
Technical information about WebP Compression
For those interested in the underlying technology, below is a summary of how both lossy and lossless compression is achieved for WebP images:
LOSSY WEBP
The WebP image format’s lossy compression technique is based on the VP8 key frame encoding (which was created by On2 Technologies in 2008). It uses a methodology called predictive encoding whereby redundant data is identified and discarded, and only the remaining data, known as residual, is used for compression, making the compression more effective. The residual is then quantised and lossless-ly compressed using a lossless compression methodology called entropy encoding. Although lossy compression takes place, the residual image data is lossless-ly compressed and therefore retains quality. The fact that WebP uses a predictive coding methodology makes it much more effective than JPEG.
lOSSLESS wEBp
The lossless compression technique for WebP images was created by the Google WebP development team. As lossless compression is all about reconstructing image data without removing any of image information, the image is transformed using many techniques such as Spatial transformation, Colour transformation, Subtract Green transformation, Palettes transformation and Colour cache coding. The transformed data is then entropy encoded as performed in the lossy WebP compression mentioned above.
Google reports a significant difference with lossless WebP images being 26% smaller in size than PNGs and lossy WebP images being 24%-35% smaller than JPEGs with the same SSIM quality index.
Reduction in file size also means that there is significant reduction in storage space which is also important in websites that are image-centric.
Other Advantages of WebP Images
WebP also enables lossy compression of transparent images.
This is a major advancement as none of the pre-existing image formats provided this feature. Up until the introduction of the WebP image format, if a website needed images with a transparent background, the best option was to use a PNG image, and PNGs can be compressed only lossless-ly. This meant that we have not been able to reduce the size very much for images that required transparency, leading to significantly bigger file sizes for such images. But WebP image formats now allow lossy compression of alpha by encoding images with low bits-per-pixel, thereby considerably reducing the size of the overall image with transparency. This is also very useful for websites that make heavy use of icons.
Another highly desirable feature of WebP is that it supports animation as well, and therefore can be used instead of GIFs, making it an image format that supports the transparency of PNGs as well as the animation of GIFs.
When should we use WebP Images?
WebP images can be used wherever images need to be displayed online. With native support for WebP image format in almost all major browsers including:
- Chrome,
- Microsoft Edge (18+),
- Firefox (65+),
- Chrome in Android,
- Native Android web browser,
- Safari,
- Opera
websites, web applications and mobile-focused websites can use WebP images throughout to leverage the benefits of this format on performance. With the previously mentioned advantage of lossy WebP with alpha, we can use .webp for icons as well.
We recommend converting and compressing images on an individual basis to see the difference it makes by using WebPs instead of Jpegs. From the conversion and compression we have undertaken for Contactpoint clients, on average we have found that converting Jpegs to WebPs with a quality setting of 80 shows huge file size differences that can considerably improve website load time.
When to avoid WebP images?
Although there is much less reduction in quality compared to lossy compression, WebP images still have a reduced quality. Below is a .jpeg image of the same .webp image shown above in this article.
Although the quality when seen in a browser is negligible to most people, if you are particular about the high resolution and quality of the image being displayed (perhaps in a site that hosts a gallery of paintings, a photography website, animation/graphic portfolio site, etc.) then it might be right to perform lossless compression of Jpegs instead of using a WebP image. We recommend that you view both formats after compression and decide based on the outcome, as the end result also depends on the specific image, details such as tone and colour, the quality setting used in encoding of the image and other factors.
Another time when WebP should be avoided is when using a browser that does not support WebP formats. Although most browsers support WebP format, a few browsers still do not and if support for a particular is important, then WebP might not be appropriate.
Alternatively, you can get the best of both worlds by coding your web page to use Jpegs/PNGs for web browsers which do not support WebP. The downside of this method is that you end up storing the one image in 2 or more formats on your web server, thus using more disk space rather than less.
How to Create a WebP Image?
Another reason for the slow uptake of WebP Images is the relative difficulty in creating them. You are unlikely to find that you can save an image to a WebP format from your favourite image editing software. Instead, you will likely need to use an online tool to do the conversion such as: https://www.online-convert.com/
If you have a WordPress website, there are some handy plugins that allow WebP images to be created on the fly, as you upload JPGs into your website.
If you would like to discuss the use of WebP images throughout your website, or more generally a review of your website performance, please don’t hesitate to get in touch with us at Contactpoint.
by 
