WebP 文件格式是一种基于 RIFF(资源互换文件格式)的文档格式。
WebP 是 2010 年 Google 开发的一种图片格式,它为网页上的图片提供了卓越的无损和有损压缩。网站开发者们可以使用 WebP 来创建尺寸更小、细节更丰富的图片,以此来提高网站的速度。更快的加载速度对于网站的用户体验和网站的营销效果是至关重要的。
为了在所有设备和用户中达到最佳加载效果,网站上的图片文件大小最好不超过 500 KB。
与 PNG 图片相比,WebP 无损图片通常至少要比 PNG 图片小 25%。在同等的 SSIM(结构相似度)质量指标下,WebP 有损图片通常比 JPEG 图片小 25% 到 34%。
无损 WebP 也支持透明度。而在可接受有损 RGB 压缩的情况下,有损 WebP 也支持透明度,通常其大小比 PNG 文件小三倍。
Google 报告称,把动画 GIF 文件转换为有损 WebP 后文件大小减少了 64%,转换为无损 WebP 后文件大小减少了 19%。
现在全球在用的 80% 的 web 浏览器兼容 WebP 格式。目前,Apple 的 Safari 浏览器还不兼容。
创建更小的 WebP 图片
测试的页面返回了三张图片。在它生成的报告中,它提供了推荐和目标。我选择了它报告有 650 KB 的 app-graphic 图片。通过把它转换为 WebP 格式,预计可以把图片大小降到 61 KB,节省 589 KB。我在 Photoshop 中把它转换了,用默认的 WebP 设置参数保存它,它的文件大小为 44.9 KB。比预期的还要好!从下面的 Photoshop 截图中可以看出,两张图在视觉质量上完全一样。
把图片转换为 WebP
你也可以用 Linux 的命令行工具把图片从 JPG/PNG 转换为 WebP:
在命令行使用 cwebp 把 PNG 或 JPG 图片文件转换为 WebP 格式。你可以用下面的命令把 PNG 图片文件转换为质量参数为 80 的 WebP 图片。
cwebp -q 80 image.png -o image.webp
你还可以用 Image Magick,这个工具可能在你的发行版本软件仓库中可以找到。转换的子命令是 convert,它需要的所有参数就是输入和输出文件:
convert pixel.png pixel.webp
使用编辑器把图片转换为 WebP
要在图片编辑器中来把图片转换为 WebP,可以使用 GIMP。从 2.10 版本开始,它原生地支持 WebP。
如果你是 Photoshop 用户,由于 Photoshop 默认不包含 WebP 支持,因此你需要一个转换插件。遵循 Apache License 2.0 许可证发布的 WebPShop 0.2.1 是一个用于打开和保存包括动画图在内的 WebP 图片的 Photoshop 模块,在 https://github.com/webmproject/WebPShop 可以找到。
为了能正常使用它,你需要把它放进 Photoshop 插件目录下的 bin 文件夹:
Windows x64 :C:Program FilesAdobeAdobe PhotoshopPlug-insWebPShop.8bi
Mac:Applications/Adobe Photoshop/Plug-ins/WebPShop.plugin
WebP 和未来
WebP 是一个健壮而优化的格式。它看起来更好,压缩率更高,并具有其他大部分常见图片格式的所有特性。