SCRY技术分享webp图片格式的应用实践

背景

随着官网进入优化阶段，目标变得简单：输入url并点击确认后，能够更快地看到内容、展开互动。

比较容易操作的，就是减小资源文件体积，例如通过按需引用代替全部引用，以及本文主要涉及的压缩资源文件大小。

那么官网需要下载的资源文件里，最大的是哪一种呢？图片（一些公司会有专门优化图片的工序，可以把图片的资源占比压缩到35%~40%，例如某米、某宝的官网，但那和我们无关，我们的png格式图片资源占比为72%）。

本文将主要介绍我们是如何减少图片体积的。

过程

减小体积，最朴素的想法就是压缩，但图片格式本身就是一种压缩存储算法，压缩图片有一定的效果，然而无法达到预期。

通过观察其他图片较多的网站（例如某米、某宝、某东等），发现它们没有局限于单一的图片格式，而是多种格式混合使用（某米、某宝首页都使用了以下四种图片格式：jpg / png / gif / webp）。我们得到了一个新的思路：修改图片格式。

简单了解所有能找到的图片格式，通过项目情况的筛选，去掉一些“相性不合”的格式：

1.???去掉不适合web应用的图片格式，如pdf、raw（专业摄影）、psd（photoshop）等

2.???去掉兼容性差的格式，如heif（所有主流浏览器均不支持）

3.???......

最后在jpg / png / webp格式中选择，发现在2020.9，ios safari支持webp之后，webp已经可以全平台兼容了（IE：？），而且google直接在文档中表示，同等质量的图片，webp格式比jpg / png格式要小25%以上（文档：https://developers.google.com/speed/webp）。至于ie以及一些浏览器的历史版本（主要指不支持webp的历史版本），拟编写兼容组件，让它们继续使用png格式图片。

理论走通了，接下来是尝试。我们将几张官网中用到的图片转成webp格式，并按照不同程度压缩，最终通过浏览器查看它们的效果。可能是我们原本使用的图片就还有压缩空间，尝试的结果是：

1.???有损压缩（参数：60）时，webp格式图片的体积为png格式的10%，但图片整体发虚，放大至150%时，出现明显的失真现象；

2.???有损压缩（参数：80）时，webp格式图片的体积为png格式的20%，图片表现良好，放大至200%也没有影响显示效果。

可以说尝试的结果意外地好，确定了兼容组件的工作过程后，我们开始换用webp格式图片。

踩坑

本节介绍webp格式实践过程中遇到的问题，附两个用到的工具：

http://www.atoolbox.net/Tool.php?Id=897：把其他格式图片转换为webp格式

/uploads/autoimage2/2021071617-missing.html”会被改成“xxx.to.webp”，多了一段“.to”，我写了一个go程序批量重命名。

总结

我们通过使用webp格式的图片，将图片的总体积减小了70% (1.6m -> 400+k)，使图片的资源占比减小至约30%。

我们通过兼容组件兼容ie和其他浏览器的历史版本（不支持webp的历史版本）。

没有找到一个简单好用的将其他格式图片批量转换成webp格式的工具，最后用了一个问题相对较小的工具辅以自行开发的小工具完成目标。

—-

编译者/作者：scry

玩币族申明：玩币族作为开放的资讯翻译/分享平台，所提供的所有资讯仅代表作者个人观点，与玩币族平台立场无关，且不构成任何投资理财建议。文章版权归原作者所有。