线上图片请抛弃 PNG 和 JPG:使用 WebP
副标题[/!--empirenews.page--]
为了在所有设备和用户中达到最佳加载效果,你网站上的图片文件大小不应该超过 500 KB。 与 PNG 图片相比,WebP 无损图片通常至少要比 PNG 图片小 25%。在同等的 SSIM(结构相似度)质量指标下,WebP 有损图片通常比 JPEG 图片小 25% 到 34%。 无损 WebP 也支持透明度。而在可接受有损 RGB 压缩的情况下,有损 WebP 也支持透明度,通常其大小比 PNG 文件小三倍。 Google 报告称,把动画 GIF 文件转换为有损 WebP 后文件大小减少了 64%,转换为无损 WebP 后文件大小减少了 19%。 WebP 文件格式是一种基于 RIFF(资源互换文件格式)的文档格式。你可以用 hexdump 看到文件的签名是 $ hexdump--canonical pixel.webp00000000 5249464626000000 [...] |RIFF&...WEBPVP8 |00000010 1a0000003001009d [...] |....0....*......|00000020 0e25 a4 00037000 fe [...] |.%...p...`....|0000002e 独立的 libwebp 库作为 WebP 技术规范的参考实现,可以从 Google 的 Git 仓库 或 tar 包中获得。 全球在用的 80% 的 web 浏览器兼容 WebP 格式。本文撰写时,Apple 的 Safari 浏览器还不兼容。解决这个问题的方法是将 JPG/PNG 图片与 WebP 图片一起提供,有一些方法和 WordPress 插件可以做到这一点。 为什么要这样做? 我的部分工作是设计和维护我们组织的网站。由于网站是个营销工具,而网站的速度是衡量用户体验的重要指标,我一直致力于提高网站速度,通过把图片转换为 WebP 来减少图片大小是一个很好的解决方案。 我使用了 web.dev 来检测其中一个网页,该工具是由 Lighthouse 提供服务的,遵循 Apache 2.0 许可证,可以在 https://github.com/GoogleChrome/lighthouse 找到。 据其官方描述,“LIghthouse 是一个开源的,旨在提升网页质量的自动化工具。你可以在任何公共的或需要鉴权的网页上运行它。它有性能、可用性、渐进式 web 应用、SEO 等方面的审计。你可以在 Chrome 浏览器的开发工具中运行 Lighthouse,也可以通过命令行或作为 Node 模块运行。你输入一个 URL 给 Lighthouse,它会对这个网页进行一系列的审计,然后生成这个网页的审计结果报告。从报告的失败审计条目中可以知道应该怎么优化网页。每条审计都有对应的文档解释为什么该项目是重要的,以及如何修复它。” 创建更小的 WebP 图片 我测试的页面返回了三张图片。在它生成的报告中,它提供了推荐和目标。我选择了它报告有 650 KB 的 左图:650 KB(实际大小)。右图: 44.9 KB(转换之后的目标大小)。 当然,也可以用开源图片编辑工具 GIMP 把图片导出为 WebP。它提供了几个质量和压缩的参数: 另一张图放大后: PNG(左图)和 WebP(右图),都是从 JPG 转换而来,两图对比可以看出 WebP 不仅在文件大小更小,在视觉质量上也更优秀。 把图片转换为 WebP 你也可以用 Linux 的命令行工具把图片从 JPG/PNG 转换为 WebP: 在命令行使用 cwebp -q 80 image.png -o image.webp 你还可以用 Image Magick,这个工具可能在你的发行版本软件仓库中可以找到。转换的子命令是 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 插件目录下的 Windows x64 : Mac: WordPress 上的 WebP 很多网站是用 WordPress 搭建的(我的网站就是)。因此,Wordpress 怎么上传 WebP 图片?本文撰写时,它还不支持。但是,当然已经有插件来满足这种需求,因此你可以在你的网站上同时准备 WebP 和 PNG/JPG 图片(为 Apple 用户)。 在 Marius Hosting 有下面的说明:
|