此图库的内容
此图库展示了一些示例图片,展示了 WebP 的两种新模式:WebP 无损和基于 alpha 的 WebP 有损(透明度支持)。
并列比较
下表显示了 PNG 图片(使用 pngcrush 和 pngout 压缩)、WebP 无损图像和使用 Alpha 版的 WebP 有损图像,以便进行并排比较。这些图像会像在图形软件中通常那样叠加在方格背景上。
请注意,对于 WebP 有损图片,我们使用 WebP 质量 90 作为 Alpha 版和默认质量的 WebP 无损图片。如需了解详情,请参阅重现映像部分。
对于无法呈现 WebP 的浏览器,我们提供 WebP 图片(转换回 PNG 格式)。如果您有兼容的浏览器,可以在下方找到指向 WebP 文件的链接。此外,为方便查看,此页面上的图片已按比例缩小。点击任意图片即可查看完整尺寸的图片。
该表还列出了在每种模式下获得的图像大小。
PNG | WebP 无损 | WebP 有损(使用 Alpha 版) |
---|---|---|
“Yellow Rose”1 | ||
PNG 优化文件大小:110.7 KB |
WebP 无损文件大小:79.9 KB |
WebP 有损(Alpha 版)文件大小:17.7 KB |
“我的用户页面的婴儿礼服” 2 | ||
PNG 优化的文件大小:38.1 KB |
WebP 无损文件大小:27.0 KB |
WebP 有损(Alpha 版)文件大小:13.8 KB |
“PNG 透明度演示” 3 | ||
PNG 优化文件大小:213.5 KB |
WebP 无损文件大小:149.0 KB |
WebP 有损(Alpha 版)文件大小:51.6 KB |
“格雷戈尔·门德尔诞辰 189 周年” 4 | ||
PNG 优化文件大小:49.2 KB |
WebP 无损文件大小:33.2 KB |
WebP 有损(Alpha 版)文件大小:18.3 KB |
“适用于叠加层的透明罗盘卡” 5 | ||
PNG 优化文件大小:126.8 KB |
WebP 无损文件大小:97.1 KB |
WebP 有损(Alpha 版)文件大小:57.3 KB |
以下是 WebP 文件(可在 Chrome 22 及更高版本中查看)的链接:
“Yellow Rose”: | WebP 无损文件 (80.1 KB) | WebP 有损(含 Alpha 版)文件 (18.4 KB) |
“我的用户页面的婴儿晚礼服”: | WebP 无损文件 (27.0 KB) | WebP 有损(含 Alpha)文件 (14.1 KB) |
“PNG 瞬态演示”: | WebP 无损文件 (149.1 KB) | WebP 有损(含 Alpha)文件 (52.6 KB) |
“格雷戈尔·门德尔诞辰 189 周年”: | WebP 无损文件 (33.3 KB) | WebP 有损(使用 Alpha 版)文件 (19.0 KB) |
“适用于叠加层的透明罗盘卡”: | WebP 无损文件 (97.1 KB) | WebP 有损(含 Alpha)文件 (57.3 KB) |
图片来源
此页面上的图片来自多个不同的来源。此处按顺序列出了上述映像的赠金。
1 |
“高分辨率库存照片 - 黄色玫瑰 3 - 鲜花” 图片作者:Jon Sullivan 此文件属于公共领域。 JPEG 来源 |
2 |
“baby tux for my user page” 图片作者:Fizyplankton 此文件属于公共领域。 PNG 来源 |
3 |
“PNG 透明度演示” 图片作者:POV-Ray 源代码 照片已获得 知识共享 署名-相同方式共享 3.0 未移植许可。 PNG 来源 |
4 |
“格雷戈尔·门德尔诞辰 189 周年” 图片作者:Google 涂鸦团队 感谢 Google 涂鸦团队提供这张图片。 PNG 来源 |
5 |
“叠加的透明罗盘卡片” 图片作者:Denelson83 此文件已获得 知识共享 署名-相同方式共享 3.0 未移植许可授权。 PNG 来源 |
重现映像
为了重现问题并演示如何使用某些 WebP 压缩参数,我们在此介绍生成此图库中的图片时所涉及的确切步骤。
工具
对于 PNG 重新压缩,系统将使用 pngcrush 1.8.13 和 ZopfliPNG 1.0.3 中的最佳结果。使用以下命令行选项
Pngcrush:
pngcrush -brute -rem tEXt -rem tIME -rem iTXt -rem zTXt -rem gAMA -rem cHRM -rem iCCP -rem sRGB -rem alla -rem text input.png output-candidate.png
ZopfliPNG:
zopflipng --lossy_transparent input.png output-candidate.png
采用所有滤镜的 ZopfliPNG:
zopflipng --iterations=500 --filters=01234mepb --lossy_8bit --lossy_transparent input.png output-candidate.png
为了重新缩放一些较大的源图片(仅供查看),我们使用了名为 convert
的最新版 ImageMagick 工具,该工具位于 https://www.imagemagick.org。确切的命令行如下所示:
convert image.png -resize 240x image_resized.png
压缩为 WebP 无损压缩
我们使用 cwebp 工具中的“无损”选项将 PNG 转换为 WebP 无损格式。要获得最少的输出,所使用的确切命令行如下所示:
cwebp input.png -lossless -m 6 -q 100 -o webp_lossless.webp
呈现 WebP 无损
我们使用 dwebp 工具进行渲染,将 WebP 无损图片转换回 PNG 格式。使用的确切命令行如下所示:
dwebp webp_lossless.webp -o output.png
压缩为 WebP 有损压缩(使用 alpha 通道)
我们使用 cwebp 工具将 PNG 转换为 WebP 有损(带有 alpha 通道)。我们选择的 WebP 质量为 90(有损压缩),alpha 质量为 100(无损压缩)。使用的确切命令行如下所示:
cwebp input.png -q 90 -alpha_q 100 -m 6 -o webp_alpha.webp
呈现 WebP 有损效果(使用 alpha 通道)
我们使用 dwebp 工具进行渲染,将 WebP 有损(含 alpha 通道)图片转换回 PNG。使用的确切命令行如下所示:
dwebp webp_alpha.webp -o output.png