Day26 【概念解析】 WebP

type

status

date

slug

summary

整理定义

出处	定义
维基百科	WebP 是一种由 Google 开发的图形文件格式，旨在替代 JPEG、PNG 和 GIF 文件格式。它支持有损和无损压缩，[8] 以及动画和 Alpha 透明度。
百度百科	WebP（发音：weppy）是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自影像编码格式VP8，被认为是WebM多媒体格式的姊妹项目，是由Google在购买On2 Technologies后发展出来，以BSD授权条款发布。 WebP支持的像素最大数量是16383x16383。有损压缩的WebP仅支持8-bit的YUV 4:2:0格式。而无损压缩（可逆压缩）的WebP支持VP8L编码与8-bit之ARGB色彩空间。又无论是有损或无损压缩皆支持Alpha透明通道、ICC色彩配置、XMP诠释数据。 WebP有静态与动态两种模式。动态WebP（Animated WebP）支持有损与无损压缩、ICC色彩配置、XMP诠释数据、Alpha透明通道。

复述展开

WebP是一种新型的图片格式，与之类似的有，JPEG、PNG、GIF、SVG等。

WebP是一种基于VP8视频编码格式的图像格式，它采用了先进的压缩算法，旨在提供更高的压缩率和更好的图像质量。使用 WebP，网站站长和 Web 开发者可以制作更小、更丰富的图片，从而提升网页加载速度。

Google给出效率对比：

WebP 无损图片的大小比 PNG 图片小 26% 。WebP 有损图片比采用等效 SSIM 质量索引的同类 JPEG 图片缩小 25-34% 。无损 WebP 支持透明度（也称为 Alpha 通道），费用仅为 22% 的额外字节。在可以接受有损 RGB 压缩的情况下，有损 WebP 也支持透明度，其提供的文件大小通常比 PNG 小 3 倍。

下图是一张WebP格式的图片

网站的图片格式 | WebP | Google for Developers

图片转换在线工具【PNG 转 WEBP - 在线 (imgonline.tools)】

使用上面的图片转换工具，得出上面的两张图片：左图为png格式（4KB），右图为webp格式（2KB），视觉效果上看几乎不差。

理解体会

首先，WebP具有出色的压缩性能。相比JPEG格式，WebP可以实现更高的压缩率，从而减小图像文件的大小。这意味着在保持图像质量的同时，可以显著减少图像的加载时间，提升网页的整体性能。此外，WebP还支持无损压缩，使得图像在压缩过程中不会丢失任何细节，适用于对图像质量要求较高的场景。

其次，WebP具备广泛的浏览器和平台支持。现在，主流的Web浏览器（如Chrome、Firefox、Edge等）已经原生支持WebP格式，这意味着无需任何额外的插件或工具，就可以直接在网页上使用WebP图像。此外，WebP还可以在移动设备上得到广泛的支持，包括Android和iOS平台，使得开发者能够在移动端提供更高效的图像加载体验。

此外，WebP还具备透明度和动画的支持。类似于PNG格式，WebP可以实现图像的透明背景，使得开发者能够创建更加丰富和吸引人的用户界面。此外，WebP还支持动画图像，类似于GIF格式，但具有更好的压缩性能和图像质量。

在Web开发中，WebP的应用广泛而多样。首先，对于需要加载大量图像的网站，使用WebP格式可以显著减小图像文件的大小，提高网页的加载速度，从而提升用户体验。其次，对于移动端应用开发，WebP的高压缩率和广泛支持使得应用能够在移动设备上更快地加载图像，减少用户的流量消耗。此外，对于需要展示透明背景或动画效果的应用，WebP提供了更好的选择。

然而，WebP也存在一些挑战和限制。首先，由于WebP是一种相对较新的图像格式，与传统的JPEG和PNG相比，它的兼容性可能稍有不足。尽管现代浏览器已经支持WebP，但在一些旧版本的浏览器上可能无法正常显示。其次，WebP的压缩算法相对复杂，对于一些特定的图像内容，可能无法达到预期的压缩效果。

总结起来，WebP作为一种现代化的图像格式，具备出色的压缩性能、广泛的浏览器和平台支持，以及透明度和动画的特性。它在Web开发中的应用潜力巨大，能够提升网页性能。