什么是 WebP?为什么要使用它?
WebP 是一种有损和无损压缩方法,可用于大型 在网上找到的各种摄影图片、半透明图片和图形图片。 有损压缩的程度是可调整的 在文件大小和图片质量之间权衡取舍。WebP 通常 与 JPEG 和 JPEG 2000 相比,压缩率平均高出 30%,且不会丢失图片 质量(请参阅比较研究)。
WebP 格式本质上旨在创建更小、更美观的图片 有助于加快网络速度
哪些网络浏览器本身支持 WebP?
有兴趣改善网站性能的网站站长可以轻松 针对当前图片优化的 WebP 替代方案, 。
- WebP 有损支持
<ph type="x-smartling-placeholder">
- </ph>
- Google Chrome(桌面版)17 及更高版本
- Android 版 Google Chrome 浏览器 25 或更高版本
- Microsoft Edge 18 及更高版本
- Firefox 65 及更高版本
- Opera 11.10 及更高版本
- 原生网络浏览器 - Android 4.0+ (ICS)
- Safari 14+(iOS 14+、macOS Big Sur+)
- WebP 有损、无损和Alpha 版支持
<ph type="x-smartling-placeholder">
- </ph>
- Google Chrome(桌面版)23 及更高版本
- Android 版 Google Chrome 浏览器 25 或更高版本
- Microsoft Edge 18 及更高版本
- Firefox 65 及更高版本
- Opera 12.10 及更高版本
- 原生网络浏览器,搭载 Android 4.2 或更高版本 (JB-MR1)
- 浅月色(26 岁以上)
- Safari 14+(iOS 14+、macOS Big Sur+)
- WebP 动画支持
<ph type="x-smartling-placeholder">
- </ph>
- Google Chrome(桌面版和 Android 版)32 及更高版本
- Microsoft Edge 18 及更高版本
- Firefox 65 及更高版本
- Opera 19 及更高版本
- Safari 14+(iOS 14+、macOS Big Sur+)
另请参阅:
如何检测浏览器对 WebP 的支持?
您只需将 WebP 图片提供给能够显示 WebP 图片的客户端 而对于不能正常运行的客户端,则回退到旧版格式。幸运 有多种技术可用于检测 WebP 支持 客户端和服务器端。某些 CDN 提供商提供 WebP 支持检测 作为其服务的一部分
通过 Accept 标头进行服务器端内容协商
Web 客户端通常会发送“Accept”请求标头,用于指示 在回应中愿意接受的内容格式。如果 浏览器会预先显示其将“接受”image/webp 格式 网络服务器就能安全地发送 WebP 图片 内容协商。如需了解详情,请参阅以下链接。
Modernizr
Modernizr 是一个 JavaScript 库,用于便捷检测 HTML5 和 网络浏览器中的 CSS3 功能支持。查找属性 Modernizr.webp、Modernizr.webp.lossless、Modernizr.webp.alpha 和 Modernizr.webp.animation。
HTML5 <picture>
元素
HTML5 支持 <picture>
元素,您可以通过该元素列出多个
替代图片目标按优先级顺序排列,这样,客户端将请求
可以正确显示的第一张候选图片。请参阅
这篇关于 HTML5 Rocks 的讨论。<picture>
元素为
更多浏览器支持。
使用您自己的 JavaScript
另一种检测方法是尝试解码非常小的 WebP 图片, 使用特定功能,并检查是否成功。示例:
// check_webp_feature:
// 'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
// 'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
var kTestImages = {
lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
};
var img = new Image();
img.onload = function () {
var result = (img.width > 0) && (img.height > 0);
callback(feature, result);
};
img.onerror = function () {
callback(feature, false);
};
img.src = "data:image/webp;base64," + kTestImages[feature];
}
请注意,图片加载是非阻塞和异步的。这意味着 依赖于 WebP 支持的代码最好放在回调中 函数。
Google 为何发布 WebP 开源版本?
我们深信开源模型的重要性。采用 WebP 格式时, 开源的,任何人都可以使用该格式并提出改进建议。包含 您的意见和建议,我们相信,WebP 将会变得更加实用, 以图形格式表示随时间变化的情况。
如何将个人图片文件转换为 WebP 格式?
您可以使用 WebP 命令行实用程序转换个人图片文件 WebP 格式如需了解详情,请参阅使用 WebP。
如果您要转换许多图片,可以使用平台的 shell 简化操作。例如,要转换文件夹中的所有 jpeg 文件,请尝试 以下:
Windows:
> for /R . %I in (*.jpg) do ( cwebp.exe %I -o %~fnI.webp )
Linux / macOS:
$ for F in *.jpg; do cwebp $F -o `basename ${F%.jpg}`.webp; done
如何自行判断 WebP 图像质量?
目前,您可以通过将 WebP 文件转换为常用格式来查看 WebP 文件 使用无损压缩文件(例如 PNG) 任何浏览器或图片查看器。要快速了解 WebP 质量,请参阅 此网站上的图库,用于并排显示照片 比较。
如何获取源代码?
转换器代码可在 WebP 开源项目的下载部分 页面。轻量级解码器的代码和 VP8 规范已开启 WebM 网站。请参阅 容器的 RIFF 容器页面 规范
WebP 图片的最大尺寸是多少?
WebP 与 VP8 兼容,并使用 14 位的宽度和高度。 WebP 图片的像素尺寸上限为 16383 x 16383。
WebP 格式支持哪些颜色空间?
和 VP8 比特流一样,有损 WebP 仅适用于 8 位 Y'CbCr 4:2:0(通常称为 YUV420)映像格式。请参阅 2,“格式概览” RFC 6386 中的规范, VP8 数据格式和解码指南 了解详情。
无损 WebP 仅适用于 RGBA 格式。请参阅 WebP 无损比特流规范。
WebP 图片可以大于其源图片吗?
支持,通常是从有损格式转换为 WebP 无损格式时, 反之亦然。这主要是由于色彩空间差异(YUV420 与 ARGB) 以及这两者之间的转化
有三种典型情况:
- 如果源图片采用无损 ARGB 格式,则空间降采样 会引入比 YUV420 更难压缩的新颜色 原始版本。这种情况通常发生在 采用 PNG 格式,颜色较少:转换为有损 WebP(或者 有损 JPEG)可能会导致文件较大。
- 如果来源为有损格式,请使用无损 WebP 压缩 捕获来源的有损特性通常会导致 大型文件。这并非只针对 WebP, 例如,将 JPEG 源转换为无损 WebP 或 PNG 格式。
- 如果源采用有损格式,而您尝试对其进行压缩
以质量更高的有损 WebP 格式呈现。例如,尝试
将质量为 80 的 JPEG 文件转换为质量为 95 的 WebP 文件
通常会导致文件较大,即使这两种格式都是有损的。
通常,我们无法评估来源的质量,因此建议您
如果文件大小始终较大,则降低目标 WebP 质量。
另一种可能是避免使用画质设置
使用
cwebp
工具中的-size
选项定位给定的文件大小; 或等效的 API。例如,定位 80% 的原始文件 事实证明,规模可能更可靠。
请注意,将 JPEG 源转换为有损 WebP,或者将 PNG 源转换为无损 WebP 不容易出现此类意外文件大小。
WebP 是否支持逐行显示或交错显示?
WebP 在 JPEG 或 PNG 格式。这可能会给应用的 CPU 和内存 解码客户端,因为每个刷新事件都涉及 压缩系统
平均而言,解码渐进式 JPEG 图像等同于解码 baseline 3 次。
此外,WebP 还提供增量解码功能,从 比特流的字节,用于尝试生成可显示的样本行, 问题。这既节省了内存、CPU 以及在对象上 同时提供有关下载状态的视觉提示。增量 解码功能 高级解码 API。
如何在我的 Android 项目中使用 libwebp Java 绑定?
WebP 支持将 JNI 绑定到简单编码器和解码器
位于 swig/
目录中。
在 Eclipse 中构建库:
- 请确保您拥有 ADT 插件 随 NDK 工具一起安装,并且您的 NDK 路径已正确设置 (偏好设置 > Android > NDK)。
- 创建新项目:File >新建 >项目 >Android 设备 应用项目。
- Clone 或
将 libwebp 解压缩到新项目中名为
jni
的文件夹中。 - 将
swig/libwebp_java_wrap.c
添加到LOCAL_SRC_FILES
列表中。 - 右键点击新项目,然后选择 Android Tools >添加 Native Support ... 中。
打开项目属性,然后转到 C/C++ Build >行为。将
ENABLE_SHARED=1
到Build (Incremental build)
部分以进行构建 作为共享库的 libwebp。注意:总体而言,设置
NDK_TOOLCHAIN_VERSION=4.8
会有所改进 32 位构建性能。将
swig/libwebp.jar
添加到libs/
项目文件夹中。构建您的项目。这将创建
libs/<target-arch>/libwebp.so
。使用
System.loadLibrary("webp")
在运行时加载库。
请注意,您可以使用 ndk-build
以及包含的
Android.mk
。在这种情况下,您可以重复使用上述某些步骤。
如何在 C# 中使用 libwebp?
WebP 可构建为导出 libwebp API 的 DLL。这些函数可以 然后用 C#导入
构建 libwebp.dll。这会正确设置 WEBP_EXTERN,以便导出 API 函数。
libwebp> nmake /f Makefile.vc CFG=release-dynamic
将 libwebp.dll 添加到项目中,然后导入所需的函数。 请注意,如果您使用 简单的 API 您应调用
WebPFree()
来释放返回的所有缓冲区。[DllImport("libwebp.dll", CallingConvention = CallingConvention.Cdecl)] static extern int WebPEncodeBGRA(IntPtr rgba, int width, int height, int stride, float quality_factor, out IntPtr output); [DllImport("libwebp.dll", CallingConvention = CallingConvention.Cdecl)] static extern int WebPFree(IntPtr p); void Encode() { Bitmap source = new Bitmap("input.png"); BitmapData data = source.LockBits( new Rectangle(0, 0, source.Width, source.Height), ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb); IntPtr webp_data; const int size = WebPEncodeBGRA(data.Scan0, source.Width, source.Height, data.Stride, 80, out webp_data); // ... WebPFree(webp_data); }
为什么要使用动画 WebP?
与动画 GIF 相比,动画 WebP 的优势
WebP 支持具有 8 位 Alpha 通道的 24 位 RGB 颜色, GIF 的 8 位颜色和 1 位 Alpha 值。
WebP 支持有损压缩和无损压缩;事实上,一个 动画可以结合有损帧和无损帧。GIF 仅支持 无损压缩WebP 的有损压缩技术非常适合 到根据真实视频制作的动画图片,越来越多 动画图片的来源。
WebP 要求的字节数少于 GIF1。 转换为有损 WebP 的动画 GIF 缩小了 64%,而无损的 WebP 的大小缩小了 19%。这在使用移动网络时尤为重要。
WebP 在存在跳转时进行解码所需的时间更少。在 闪烁、滚动或更改标签页都可能导致 隐藏和显示图片,导致动画暂停,然后 以便跳转到其他时间点CPU 使用率过高,会导致 丢帧的动画也可能需要解码器向前跳转 动画。在这些场景中,动画 WebP 所占的比重是总数的 0.57 倍 将时间2解码为 GIF,从而减少卡顿 并能更快地从 CPU 利用率峰值中恢复过来。这是 这得益于 WebP 相对于 GIF 的两大优势:
WebP 图片会存储有关每个帧是否包含 alpha 值、 因此无需对帧进行解码来做出这一决定。 这样可以更准确地推断以前的哪些帧给定 从而减少对上一个帧的不必要解码 帧。
与现代视频编码器非常相似,WebP 编码器会以启发式方式将内容 定期生成关键帧(大多数 GIF 编码器不这么做)。 这样可以显著改善长动画的跳转效果。为了方便 在不显著增加图像大小的情况下插入此类框架;WebP 添加了 “混合方法”标志 以及 GIF 使用的帧处理方法。 这样一来,关键帧的绘制效果就像整个图片已被清除一样 更改为背景颜色,而不强制将上一帧 完整尺寸。
与动画 GIF 相比,动画 WebP 的劣势
在没有跳转的情况下,WebP 的直线解码 与 GIF 相比,需要占用大量 CPU 资源。有损 WebP 所需的解码时间是 2.2 倍 而无损 WebP 则要占用 1.5 倍的成本。
WebP 支持的覆盖范围不如 GIF 支持, 有效实现普及。
为浏览器添加 WebP 支持会增加代码占用空间, 攻击面。在 Blink 中,大约会额外增加 1500 行 代码(包括 WebP 多路分配库和 Blink-side WebP 图片) 解码器)。请注意,如果 WebP 和 WebM 共用更多常见的解码代码,或者如果 WebP 的 功能包含在 WebM 中。
为什么不直接在 <img>
中支持 WebM?
从长远来看,支持 <img>
内的视频格式可能会很有意义
标记前面。不过,现在这样做,通过 <img>
中的 WebM 可以填充
提议的动画 WebP 角色存在以下问题:
在解码依赖于之前的帧的帧时,WebM 要求 比动画 WebP 多出 50% 的内存, 之前的帧3。
视频编解码器和容器支持因浏览器和 设备。为了便于自动对内容进行转码(例如 带宽代理),浏览器将需要添加 Accept 标头 指明其图片代码支持哪些格式。即便是 因为 MIME 类型(如“video/webm”)或“视频/mpeg”静止 不表示支持编解码器(例如 VP8 与 VP9)。另一个 WebP 格式将会有效冻结 它同意发布动画 WebP,即 WebP 在所有 UA 中的行为 应保持一致;由于“image/webp”接受标头为 已用于指示 WebP 支持,不再更改任何新的 Accept 标头 。
Chromium 视频堆栈针对 并且假定在某个时间点仅播放一两个视频 。因此,在消耗型系统上实施积极 资源(线程、内存等),以最大限度地提高播放质量。这种 无法很好地扩展到同时存在的许多视频, 需要重新设计,以适合包含大量图片的网页。
WebM 目前并未整合所有压缩技术 WebP 格式。因此 这张图片 与使用 WebP 相比,使用 WebP 的压缩率明显更高:
1 对于动画 GIF 与动画 WebP 之间的所有比较,我们 使用了从网络上随机获取的大约 7000 张动画 GIF 图片组成的语料库。 这些图片已使用“gif2webp”转换为动画 WebP使用 默认设置(根据最新版 libwebp 源代码树 (截至 2013 年 10 月 8 日)。比较数字是这些 图片。
2 解码时间使用最新的 libwebp + ToT 计算得出 Blink(截至 2013 年 10 月 8 日) 使用基准工具进行测试"解码时间 以及跳转”计算为“解码前五帧,清除帧, 缓冲区缓存,对接下来的五帧进行解码,等等”。
3 WebM 在内存中保留 4 个 YUV 参考帧,每一帧
存储 (width+96)*(height+96) 像素。对于 YUV 4:2:0,每 6 个请求需要 4 个字节
(即每像素 3/2 字节)。这些参考系
4*3/2*(width+96)*(height+96)
字节的内存。另一方面,WebP
只需要有上一帧(采用 RGBA)即可,也就是
4*width*height
字节的内存。
4 动画 WebP 呈现需要使用 Google Chrome 32 或更高版本