What is WebP?
Google provides, lossless compression, lossy compression is the latest corresponding image format.
The file extension is “.webp”.
WebP’s momentum of the next-gen format war
Typical image formats are “JPEG,” “GIF,” and “PNG,” which have been used as the standard from the dawn of the expansion of the Web to the present. While they have continued to support the Web for a long time, each company has promoted the development and adoption of image compression technology. The most prominent are “JPEG XR” from Microsoft, “JPEG 2000” from Apple and “WebP” from Google that appear in this article. However, due to speculation of competition for market shares, penetration has only stagnated. WebP, which is said to be the next generation standard, will be available in September 2010, so you can see how fierce the conflict was. WebP is now available in most browsers, except IE / Safari, as of August 2020, perhaps due to the format war that had stalled. The following is the result of searching for WebP on the “Can I use …” site where you can check the browser’s compatibility with Web technology. Since Safari will also support WebP in the upcoming version 14, the latest state of supported browsers is IE JPEG only
XR, Safari only JPEG It can be said that 2000 has been completely removed. Especially for JPEG XR, it will be stopped because it is no longer available in the new Chromium-based Edge, and it will be boosted by the improvement of WebP. From this background, the attention of WebP is extremely high and is expected to become an essential knowledge in web production.
f: id: t-ookubo: 20200817172652j: simple
Benefits of using WebP
Advantage 1: file size can be reduced
Excellent compared to conventional key format algorithm Lossless or lossy compression is possible to handle both types, WebP lossless image PNG (lossless compression) about 26% compared to lossy compression image of WebP JPEG compared to File size can be reduced by approximately 25 to 34%. The following is a comparison of information saved in the same image in JPEG / WebP (lossy compression) format. The file size is reduced by approximately 40% to 314KB for WebP, compared to 520KB for JPEG. By reducing the image file size, the page display will be faster and SEO measures and usability (UX) are expected to improve. In the SEO measurement function “Lighthouse” installed in the Chrome development tools, it is evaluated whether or not the image is compatible with the next generation format, and if it does not support it, the “Performance” diagnostic is performed as follows. A warning will be displayed and the score will be deducted from the number of old format images. You can see that next-generation format support is no longer an overlooked item.
f: id: t-ookubo: 20200818202726p: simple
f: id: t-ookubo: 20200817175635j: simple
On the other hand, as you can see from the fact that the evaluation increases in the number of images compatible with the next generation format, richer websites that use more images can expect the benefits of weight reduction. Now that designs that capture the hearts of users with large images, such as hero images, are popular, it can be said that compatibility with WebP is a very effective site improvement measure.
Advantage 2: Supports alpha channel animation (transparent)
Since JPEG is lossy compression, it has a high compression ratio and is effective for saving photos with many colors, but it does not support transparency or animation. On the other hand, GIF and PNG can be transparent and animated, but the compression ratio is not high due to lossless compression. Due to these individual characteristics, it has traditionally been necessary to use different formats depending on the intended use of the image. WebP has removed this barrier.
Lossless compression WebP lossless images support transparency with an additional 22% file size and can be animated using tools. . Also, as mentioned in Merit (1), it has a compression rate that exceeds that of the previous format, so it may not be long before there are no errors as long as the image file is placed in WebP.
Disadvantages of using WebP
Disadvantage 1: some browsers are not supported
