WebP Gallery

建议使用支持 WebP 的浏览器(例如 Google Chrome、Opera )浏览此图库页面。

如果您无权访问 Google Chrome,则可以将图片下载到本地驱动器上,以用于支持 WebP 的其他产品。

JPEG、WebP 和 PNG 源格式的示例图片文件

下表并排显示了缩放后的 JPEG(左侧)和 WebP 图片(右侧)以进行比较。由于浏览器本身就支持 WebP,因此我们不再像发布时那样将 WebP 图片放在 PNG 容器中。图片文件大小准确无误。点击 JPEG 和 WebP 缩略图 即可在新标签页中打开大图片

缩略图下方的文件大小与点击缩略图时所查看的图片的文件大小相对应。WebP 图片比 JPEG 图片小 30% 以上。

JPEG

WEBP

“Nærøyfjorden, Norway - 取自 Breiskrednosi。联合国教科文组织世界遗产”1

JPEG 文件大小:43.84 KB
WebP 图片
WebP 文件大小:29.61 KB
“Kayaker at Ekstremsportveko 2010, Voss”。 22

JPEG 文件大小:86.25 KB
WebP 图片
WebP 文件大小:59.18 KB
“Parkrun”序列的第 10 帧 3

JPEG 文件大小:297.05 KB
WebP 图片
WebP 文件大小:198.38 KB
图片:“A Wild Cherry (Prunus avium) in flower” 4

JPEG 文件大小:251.03 KB
WebP 图片
WebP 文件大小:172.82 KB
图片:火焰呼吸 "Jaipur Maharaja Brass Band" Chassepierre 比利时 5

JPEG 文件大小:120.78 KB
WebP 图片
WebP 文件大小:80.76 KB

图片来源

此页面上的图片来自多个不同的来源。我们选择了一些赏心悦目且内容丰富的图片来展示 WebP 的特性。不幸的是,Lena、Baboon 等著名的经典图像通常在进行压缩比较时使用,它们并不受版权保护。

上方图片来源按顺序列出。

1 “Nærøyfjorden, Norway - 取自 Breiskrednosi。联合国教科文组织世界遗产”
图片作者:Kjetil Birkeland Moe
经作者许可翻版。
PNG 来源
作者的 博文,对比了 JPEG 和 WebP。鼠标悬停可激活示例。
2 “Kayaker at Ekstremsportveko 2010, Voss”
图片作者:Kjetil Birkeland Moe
经作者许可后转作。
PNG 来源
作者的 博文,对比了 JPEG 和 WebP。鼠标悬停可激活示例。
3 “Parkrun”序列的第 10 帧
图片制作人:Lars Haglund、SVT Sveriges Television AB
经制作者许可再制作
PNG 来源
4 图片:“A Wild Cherry (Prunus avium) in flower”
图片作者:Benjamin Gimmel
PNG 来源
照片已获得 知识共享许可 署名-相同方式共享 3.0 未移植许可。
5 图片:Fire 这家休闲酒店“Jaipur Maharaja Brass Band” Chassepierre 比利时
作者:Luc Viatour
PNG 来源
照片已获得 知识共享许可 署名-相同方式共享 3.0 未移植许可。
作者网站:www.lucnix.be

重现映像

为了重现问题并演示如何使用某些 WebP 压缩参数,我们在此介绍生成此图库中的图片时所涉及的确切步骤。

工具

为了转换和重新缩放源图片,我们使用了名为 convert 的 ImageMagick 工具的最新版本,该工具位于 https://www.imagemagick.org。版本信息如下所示:

Version: ImageMagick 6.5.7-8 2010-12-02 Q16 https://www.imagemagick.org

对于 JPEG 压缩,我们使用了版本 8b 的 IJG 参考编码器,该编码器位于 https://www.ijg.org/files/jpegsrc.v8b.tar.gz

版本信息如下所示:

Independent JPEG Group's CJPEG, version 8b  16-May-2010
Copyright (C) 2010, Thomas G. Lane, Guido Vollbeding

生成源 PNG 图片

首先,只需使用以下代码,即可将 JPEG 源无损转换为 PNG 格式:

convert in.jpg out.png

然后,系统会使用以下命令将大型源图片重新缩放为较短宽度(1024 像素):

convert in.png -depth 16 -gamma 0.454545 -filter lanczos -resize 1024 -gamma 2.2 -depth 8 out.png

来生成最终一组源 PNG 图像。

压缩为 JPEG 格式

JPEG 的编码器 (cjpeg) 采用 PPM 格式的输入图片。我们使用 convert 来生成它们。完整的转换序列如下:

convert in.png tmp.ppm
cjpeg -optimize -quality 80 -outfile out.jpg tmp.ppm

可生成质量系数为 80 的经过优化的 JPEG 文件。

压缩为 WebP 格式

我们的目标是与经过优化的 JPEG 文件相比,将文件大小缩减 30%。 因此,我们明确指定了每张图片的目标尺寸。此外,借助 cwebp 工具的 -f 选项,我们还可以为每张照片的过滤强度设置临时值。使用 -sns 选项,还可以增强某些照片的空间噪声形状的振幅。所使用的具体命令行为:

cwebp -m 6 -f 50 -size 31500 1.png -o 1.webp
cwebp -m 6 -f 20 -sns 100 -size 62000 2.png -o 2.webp
cwebp -m 6 -sns 90 -size 213000 3.png -o 3.webp
cwebp -m 6 -f 40 -size 181000 4.png -o 4.webp
cwebp -m 6 -f 40 -size 89000 5.png -o 5.webp

总体而言,与 JPEG 文件大小相比,生成的 WebP 文件在全球范围内节省了 32%。

请注意,与等效的 JPEG 相比,本页使用的 WebP 缩略图也要小 26%。