小程序图片体验优化的思考总结

背景

在开发小程序的时候，用户体验是一个重要的关注点。糟糕的用户体验会让用户使用小程序的意愿大大降低，甚至不再使用。优化用户体验是一门复杂的学问，涉及到产品交互设计、程序性能等等各方面的工作，很难一蹴而就，只能在各个场景下，对于不同的关注点，分别去采取对应措施进行优化，并且还要辅以对应的设计规范、防劣化措施等等，使得体验能够始终维持在设立的基线之上。
今天想要分享的体验优化以项目中的图片为切入点，针对图片加载场景，优化用户在使用小程序时浏览图片相关的体验。

如何优化

图片浏览体验的主要优化目标有两点：

1. 让图片加载更快，能够快速为用户提供内容，提升加速度，进而提高转化率；
2. 在加载过程中给用户明确的反馈和预期，如加载时的动画、加载失败的提示；

给用户带来焦虑的体验

达到以上目标，我们可以从图片资源本身以及图片加载过程这两个角度去考虑优化措施。

图片资源优化

图片资源优化的目的是减小传输内容的大小，从而减少图片下载耗时，进而加快图片展示。
改变图片资源的体积有三大方法，主要涉及压缩质量、图片资源的格式、图片分辨率。我使用了火山引擎的 veImageX 来处理图片，经过一定配置之后，只需要修改 URL 里的参数，就可以动态修改图片的格式、质量等等参数，很方便，搜索引擎，搜索关键词“火山引擎 ImageX”，可以找到他们的体验版本，不用注册就能用。

合适的图片质量

我们给用户提供的图片质量，应该与各种场景挂钩。比如，当我们检测到用户处于弱网环境时、亦或者当前图片场景（比如列表预览）并不需要高质量质量图片时，可以给用户提供小体积而质量稍差的图片，降低图片传输的成本；当用户处于wifi环境、或者是需要预览高清大图时，提供高质量的图片以强化用户的看图体验。
具体的图片加载质量应该有着各种各样的场景化策略。
veImageX 支持在 URL 中传入质量参数值来控制下发的图片质量，转换了一张 lena 的 jpeg 格式图片来对比下效果。

压缩质量	25	50	75	85	95	100
图片
体积	35KB	49KB	77KB	116KB	250KB	583KB

这几张图片分别使用了 25、50、75、85、95、100 的质量参数，体积也是随着质量参数的增大而膨胀。我们可以看到 25、50、75 这几张图片的质量差异还是相当明显的，高质量图片中的色块和噪点一样的东西明显减少了，而质量 75 以上的几张图片，说实话肉眼看区别不太大，但是体积却膨胀了不少。所以一般情况下应该选择 80 左右的质量参数就差不多了。

更优的图片格式

我放了张常见的 720*862 的图片转换了一下格式，下载下来对比文件大小。可以看到，现代图片格式（webp、avif、heic）的图片体积明显比 png、jpeg 这些格式要小不少。而且图片质量上，肉眼基本看不出差异。

压缩质量75	png（有损）