此库的内容
此图库提供了一些示例图片,用于展示 WebP 的两种新模式: WebP 无损和采用 alpha 通道的 WebP 有损(透明度支持)。
对照比较
下表显示了 PNG 图片(使用 pngcrush 和 pngout 压缩), WebP 无损图像和带有 Alpha 值的 WebP 有损图像并排显示 比较。这些图片通常会叠加在方格背景上 都是在图形软件中完成的。
请注意,对于采用 alpha 值和该值的 WebP 有损图像, WebP 无损图像的默认画质。请参阅 如需了解详情,请参阅重现映像部分。
对于不支持 才能呈现 WebP如果您使用的是兼容的浏览器,则可以找到 WebP 文件的链接见下文。另外,这个页面上的图片 为方便观看而缩小点击任意图片即可查看完整尺寸的图片 图片。
该表还显示了在每种模式下获得的图片大小。
PNG | WebP 无损 | WebP 有损(含 alpha 值) |
---|---|---|
“Yellow Rose”1 | ||
<ph type="x-smartling-placeholder"></ph>
PNG 优化的文件大小:110.7 KB |
<ph type="x-smartling-placeholder"></ph>
WebP 无损文件大小:79.9 KB |
<ph type="x-smartling-placeholder"></ph>
WebP 有损(含 alpha 版)文件大小:17.7 KB |
“我的用户页面的婴儿晚礼服” 2 | ||
<ph type="x-smartling-placeholder"></ph>
PNG 优化的文件大小:38.1 KB |
<ph type="x-smartling-placeholder"></ph>
WebP 无损文件大小:27.0 KB |
<ph type="x-smartling-placeholder"></ph>
WebP 有损(含 alpha 版)文件大小:13.8 KB |
“PNG 透明度演示” 3 | ||
<ph type="x-smartling-placeholder"></ph>
PNG 优化的文件大小:213.5 KB |
<ph type="x-smartling-placeholder"></ph>
WebP 无损文件大小:149.0 KB |
<ph type="x-smartling-placeholder"></ph>
WebP 有损(含 alpha 版)文件大小:51.6 KB |
“格雷戈尔·门德尔诞辰 189 周年” 4 | ||
<ph type="x-smartling-placeholder"></ph>
PNG 优化的文件大小:49.2 KB |
<ph type="x-smartling-placeholder"></ph>
WebP 无损文件大小:33.2 KB |
<ph type="x-smartling-placeholder"></ph>
WebP 有损(含 alpha 版)文件大小:18.3 KB |
“适用于叠加层的透明罗盘卡片” 5 | ||
<ph type="x-smartling-placeholder"></ph>
PNG 优化的文件大小:126.8 KB |
<ph type="x-smartling-placeholder"></ph>
WebP 无损文件大小:97.1 KB |
<ph type="x-smartling-placeholder"></ph>
WebP 有损(含 alpha 版)文件大小:57.3 KB |
以下是指向 WebP 文件的链接(可在 Chrome 22 及更高版本中查看):
"Yellow Rose": | <ph type="x-smartling-placeholder"></ph> WebP 无损文件 (80.1 KB) | <ph type="x-smartling-placeholder"></ph> WebP 有损(含 alpha 版)文件 (18.4 KB) |
"我的用户页面的婴儿晚礼服": | <ph type="x-smartling-placeholder"></ph> WebP 无损文件 (27.0 KB) | <ph type="x-smartling-placeholder"></ph> WebP 有损(含 alpha 版)文件 (14.1 KB) |
"PNG 透明度演示": | <ph type="x-smartling-placeholder"></ph> WebP 无损文件 (149.1 KB) | <ph type="x-smartling-placeholder"></ph> WebP 有损(含 alpha 版)文件 (52.6 KB) |
“格雷戈尔·门德尔诞辰 189 周年”: | <ph type="x-smartling-placeholder"></ph> WebP 无损文件 (33.3 KB) | <ph type="x-smartling-placeholder"></ph> WebP 有损(含 alpha 版)文件 (19.0 KB) |
“适用于叠加层的透明罗盘卡片”: | <ph type="x-smartling-placeholder"></ph> WebP 无损文件 (97.1 KB) | <ph type="x-smartling-placeholder"></ph> WebP 有损(含 alpha 版)文件 (57.3 KB) |
图片来源
此页面上的图片来自多个不同的来源。赠金 上面的图片按顺序列出
1 |
“高分辨率免费图库照片 - 黄色玫瑰色 3 - 花朵” 图片作者:Jon Sullivan 此文件属于公共领域。 <ph type="x-smartling-placeholder"></ph> JPEG 来源 |
2 |
“我的用户页面的婴儿晚礼服” 图片作者:Fizyplankton 此文件属于公共领域。 <ph type="x-smartling-placeholder"></ph> PNG 来源 |
3 |
“PNG 透明度演示” 图片作者:POV-Ray 源代码 已根据 <ph type="x-smartling-placeholder"></ph> 知识共享 署名-相同方式共享 3.0 未移植许可。 <ph type="x-smartling-placeholder"></ph> PNG 来源 |
4 |
“格雷戈尔·门德尔诞辰 189 周年” 图片作者:Google 涂鸦团队 感谢 Google 涂鸦团队提供这张图片。 <ph type="x-smartling-placeholder"></ph> PNG 来源 |
5 次 |
“叠加层的透明罗盘卡片” 图片作者:Denelson83 此文件已获得 <ph type="x-smartling-placeholder"></ph> 知识共享 署名-相同方式共享 3.0 未移植许可。 <ph type="x-smartling-placeholder"></ph> 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
为了重新缩放一些较大的源图片(仅供查看),我们使用了
最新版 ImageMagick 的工具 convert
,可通过以下网址获取:
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