无损图库

此图库展示了一些示例图片,展示了 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 无损图片
WebP 无损文件大小:79.9 KB
WebP 有损(使用 Alpha 版)图片
WebP 有损(Alpha 版)文件大小:17.7 KB
“我的用户页面的婴儿礼服” 2

PNG 优化的文件大小:38.1 KB
WebP 无损图片
WebP 无损文件大小:27.0 KB
WebP 有损(使用 Alpha 版)图片
WebP 有损(Alpha 版)文件大小:13.8 KB
“PNG 透明度演示” 3

PNG 优化文件大小:213.5 KB
WebP 无损图片
WebP 无损文件大小:149.0 KB
WebP 有损(使用 Alpha 版)图片
WebP 有损(Alpha 版)文件大小:51.6 KB
“格雷戈尔·门德尔诞辰 189 周年” 4

PNG 优化文件大小:49.2 KB
WebP 无损图片
WebP 无损文件大小:33.2 KB
WebP 有损(使用 Alpha 版)图片
WebP 有损(Alpha 版)文件大小:18.3 KB
“适用于叠加层的透明罗盘卡” 5

PNG 优化文件大小:126.8 KB
WebP 无损图片
WebP 无损文件大小:97.1 KB
WebP 有损(使用 Alpha 版)图片
WebP 有损(Alpha 版)文件大小:57.3 KB
“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