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

背景

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

如何优化

图片浏览体验的次要优化指标有两点：

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

给用户带来焦虑的体验

达到以上指标，咱们能够从图片资源自身以及图片加载过程这两个角度去思考优化措施。

图片资源优化

图片资源优化的目标是减小传输内容的大小，从而缩小图片下载耗时，进而放慢图片展现。
扭转图片资源的体积有三大办法，次要波及压缩品质、图片资源的格局、图片分辨率。我应用了火山引擎的 veImageX 来解决图片，通过肯定配置之后，只须要批改 URL 里的参数，就能够动静批改图片的格局、品质等等参数，很不便，搜索引擎，搜寻关键词“火山引擎 ImageX”，能够找到他们的体验版本，不必注册就能用。

适合的图片品质

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

这几张图片别离应用了 25、50、75、85、95、100 的品质参数，体积也是随着品质参数的增大而收缩。咱们能够看到 25、50、75 这几张图片的品质差别还是相当显著的，高质量图片中的色块和噪点一样的货色显著缩小了，而品质 75 以上的几张图片，说实话肉眼看区别不太大，然而体积却收缩了不少。所以个别状况下应该抉择 80 左右的品质参数就差不多了。

更优的图片格式

我放了张常见的 720*862 的图片转换了一下格局，下载下来比照文件大小。能够看到，古代图片格式（webp、avif、heic）的图片体积显著比 png、jpeg 这些格局要小不少。而且图片品质上，肉眼根本看不出差别。

解决的图片，分辨率不变的前提下最多比 png 格局图片缩小了 88% 的大小（heic 格局），并且肉眼看不出品质的显著差别。
如果可能用上这些高压缩率的图片格式，必定可能节俭图片下载的网络耗时。

编解码性能

除了关注图片的体积之外也依然须要关注不同图片格式在终端的性能，这里编码和解码都用开发机进行测试了，咱们找了几千张图片在服务端的测试后果，测试图片以分辨率 400×300、1200×700 为界，在三个区间内取雷同图片样本量。
测试环境：开发机，8C16G，Intel(R) Xeon(R) Platinum 8260 CPU @ 2.40GHz

所以从表格上来看，在解码性能上抉择：jpeg<webp<HEIC<AVIF
从编码性能上抉择，在编码性能上抉择：HEIC>>jpeg >webp>AVIF，（图片加载应用云服务的状况下每次都是同步解决的，这个指标十分影响用户首次加载的耗时）；最初在决策抉择上，咱们优选体积小、解码耗时和编码耗时尽可能短的格局。

自适应的图片分辨率

一张分辨率为 3648*2736 的壁纸，体积为 8M

除了格局之外，图片分辨率也是一个能够优化的点。如果咱们想要在利用中展现下面这张图片，在大多数状况下 3648 × 2736 的分辨率都是过剩的。咱们能够依据不同的场景，去对图片进行缩放，以提供适合的分辨率。在缩放后，能够进一步减小图片的体积。

加载过程优化

除了被加载的图片资源自身进行优化之外，保障用户体验的另一个点在于优化加载过程。

图片懒加载

图片懒加载指的是在图片进入可视区域之前不进行图片的理论加载，这样可能保障首先加载首屏图片，缩小并发的图片申请。在 Web 端，咱们通常应用 IntersectionObserver 来实现对应的性能，目前在小程序上，不论是抖音小程序还是微信小程序，其提供的 image 组件（抖音和微信 WebView 模式）都反对了 lazy-load 属性，加载边界为上下左右三屏范畴，即仅当页面滑动到图片高低三屏幕时才开始收回网络申请加载图片。
对于大量展现图片的列表场景、照片墙场景等，启用懒加载该当对页面加载性能有显著的晋升。

以 Web 为例，启用懒加载的场景下，首屏只加载了 5 张图片，只有向下滚动到肯定范畴内才会发动后续图片申请

加载动画与反馈

应用原生 image 组件，不进行任何额定解决的状况下，不论是在图片加载过程中，亦或是图片 URL 有误、下载失败的状况下，图片区域都是一片空白。

尼尔森提出的 [十条可用性准则] 的第一条就是 Visibility Of System Status（零碎状态的可见性），即让用户晓得以后在产生什么，利用的状态如何须要及时给用户反馈。因而，在以上两种状态中（加载中、加载失败），咱们都冀望可能体现得足够显著，给予用户肯定的反馈。
在弱网状况下，图片下载的耗时可能会被拉长。此时，无论是骨架屏还是一段 loading 动画，都能够无效缓解用户的焦虑；

loading 成果

而在图片加载失败之后，一张占位图加上一段加载出错的提醒，无疑远远胜过一片空白。

Chrome 系浏览器默认的成果

只管不难看，但有比没有好

<img
  style="border: 1px solid black; margin: 20px; width: 300px; height: 300px"
  alt="This is alt text."
  src="wrong_url"
/>

以 B 站的个人空间页面举例，对于不同的含意的图片，其应用了不同的占位图片，能够取得更好的成果。须要联合具体场景来抉择适合的占位提醒图。

联合场景应用不同兜底占位图

入手革新

理论的我的项目革新也打算依照下面提到的这两个角度来进行。首先就打算把目前利用的最多的图片格式 jpeg 都换成高压缩率的格局。依据抖音小程序开发者文档中属性形容，应该可能反对 webp 图片的加载。

抖音小程序 image 阐明

实际上通过测试，间接应用 image 组件加载多种格局的图片。安卓上抖音小程序里 heif、avif、webp 这几种格局都可能加载，而 iOS 上却只可能加载 avif、webp 的图片。（iOS 不反对加载 avif 动图）

依据下面的测试论断，在安卓上能够应用 heif 格局图片，而 iOS 在静图场景能够应用 avif 格局图片，而动图场景下，只能退而求其次，应用 webp。
如此一来，对于不同的零碎、平台，要达成选用最优的格局的目标，咱们须要别离进行测试。而且对于不同版本的抖音宿主，咱们也须要去回归其对于不同图片格式的兼容性，开发测试老本明显提高了。

图片加载

在搜寻解决方案的时候，发现 veImageX 这边提供了一个抖音小程序的 sdk，号称通过“格局探测”的伎俩解决了这个问题，可能在不同的环境下，抉择最合适的图片格式进行加载。

我依照文档指引，理论写了个 demo 接入尝试了下格局自适应能力。

    <imagex-viewer
        loader="{{loader}}"
        layout="fill"
        src="xxxxxx/tos-cn-i-*/infinity-9056491.jpg"
        mode="scaleToFill"
        formats="{{["heic","avif","webp"]}}"
        placeholder="skeleton"
        quality="{{75}}"
        width="{{width}}"
        height="{{height}}"
        alt="error desc"
    ></imagex-viewer>

依照文档阐明，formats 配置是逐级 fallback 的，那安卓机型反对 heif 的状况下该当加载 heif 图，iOS 则应该加载 webp 图片。应用真机测试，的确合乎预期。安卓下加载了 heif 图，iOS 加载了 webp 图片。

Android 加载 heif

iOS 加载 webp

图片后缀 ~tplv-2ulrpbhhis-resize:480:q75.heif，别离对应了缩放的尺寸、图片压缩品质和图片转码指标格局，也就是说理论加载的图片曾经通过了服务端的解决，缩放为了 480px 宽度、品质 75 的对应格局图片，这张 heif 图片的体积减小到了 16 KB，比起解决前的超大图，节俭了巨多体积，加载当然也快了很多。
此外，依据文档介绍，这个 sdk 中也提供了诸如懒加载、占位图还有图片监控等的能力。

如果默认的加载时的动画成果以及谬误占位图不能满足需要，也能够通过 placeholder 和 errorDataUrl 属性配置其它图片。我试了下，这两个属性都能够配置任意无效的图片地址，然而对于这两个场景（极有可能弱网 / 无网），咱们该当配置不须要网络也能胜利加载的图片，即应用 base64 data url 或者 svg data url 等等。这样能力起到应有的成果。

图片监控

文章结尾提到，优化用户体验除了优化措施自身，防劣化也是一个重要的组成部分。防劣化的前提就是须要可能设定一个基线，而设定基线则要求咱们可能将以后的用户体验用适合的指标量化进去。这个组件外部就提供了图片加载品质上报的能力，可能上报图片加载网络各阶段（DNS 查找、http 建连、下载等等）的耗时、图片加载是否胜利、图片尺寸等等。
接入形式也比较简单，只须要在我的项目入口的中央，前置调用个函数初始化一下，而后在小程序后盾把对应的数据上报域名加到白名单里就能够。

App({onLaunch: function () {console.log('App Launched');
    
    // ... 各种逻辑
    
    initLoggerInstance(logger) // <-- 只有初始化一下就能够，具体配置能够看看文档
  }
});

接入了图片监控之后，就能在 veImageX 的控制台下来查看相干的指标，还有一些聚合指标，比方总加载次数、错误率之类的，还能够设置一些监控报警策略。

小结

事实上，这个图片组件的性能基本上可能满足图片优化的诉求了，配置自由度也比拟高，可能定制出各种不同的款式和成果，适配不同的场景。
by the way，veImageX 不仅提供小程序图片优化 SDK，也提供蕴含素材托管、资源散发、图像智能解决的一整套解决方案。而且他们最近有个流量包促销流动（可戳👉链接理解），说是小程序开发者能够享受 6 折的流量包优惠，然而我理论购买时发现其实没有限度，只有依照文档指引去注册账号、开明服务时填个邀请码就能买到优惠流量包了，这么香的价格，大家连忙去薅羊毛吧～