WebP is an excellent replacement for JPEG, PNG, JPEG and GIF images. In addition, WebP offers both lossless and lossy compression. In lossless compression no data is lost while compressing images. Lossy compression reduces file size, but at the risk of likely reducing image quality.
What is WebP image format?
WebP is a modern image format that yields superior lossless and lossy compression for images on the web. Using WebP image format, developers can create smaller, richer images that make the web faster as it increases the page load time drastically than other formats like png, jpg, jpeg, gif, etc.
WebP lossless images are 26% smaller in size when compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at corresponding SSIM quality index.
Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3 times smaller file sizes compared to PNG.
WebP is supported almost on all browsers like chrome, Firefox, edge and many more browsers because of its popularity.
Converting Images to WebP-:
People commonly use one of the following methods for converting their images to WebP:
1.cwebp command-line tool.
*Convert a single file, using cwebp's default compression settings:
cwebp images/flower.jpg -o images/flower.webp
*Convert a single file, using a quality level of 50:
cwebp -q 50 images/flower.jpg -o images/flower.webp
2.Imagemin WebP plugin (npm package).
3.Online tools(like compressordie)
Many online tools offer image conversions for free of cost.
How to serve WebP images on your site?
If your site only supports WebP compatible browsers, you can stop reading. Otherwise, serve WebP to newer browsers and a fallback image to older browsers:
Before:
<img src="flower.jpg" alt="">
After:
<picture><source type="image/webp" srcset="flower.webp"><source type="image/jpeg" srcset="flower.jpg"><img src="flower.jpg" alt=""></picture>
Above code source-web.dev
Why should you use WebP format?
Advantages of WebP compared to GIF,PNG or JPG-:
1. WebP supports 24-bit RGB color with an 8-bit alpha channel, compared to GIF's 8-bit color and 1-bit alpha.
2. WebP supports both lossy and lossless compression while GIF only supports lossless compression. WebP's lossy compression techniques are well-suited to vivid images.
3. WebP requires fewer bytes than GIF. Animated GIFs converted to lossy WebPs are 64% smaller, while lossless WebPs are 19% smaller. This is especially important on mobile networks.
4. WebP takes less time to decode in the presence of seeking. In Blink, scrolling or changing tabs can hide and show images, resulting in animations being paused and then skipped forward to a different point.
5. WebP images store metadata about whether each frame contains alpha, ignoring the need to decode the frame to make this decision. This leads to more accurate inference of which previous frames, reducing unnecessary decoding of preceding frames.
Disadvantages of animated WebP compared to animated GIF-:
1. In the lack of offering, straight-line decoding of WebP is more CPU-intensive than GIF. Lossy WebP takes 2.2x as much decode time as GIF, while lossless WebP takes 1.5x as much.
2. WebP support is not nearly as widespread as GIF support, which is effectively universal.