一、问题概述

在新用户初次进入小程序时，在页面的图片内容加载得十分缓慢，影响用户体验，为此需优化图片加载。

二、解决方案

1.压缩图片

压缩图片总的来说就是，降低图片大小，减少请求时间

压缩图片分为有损压缩和无损压缩，两者都有多种方式能够实现，以下介绍两种压缩常见多用的方式。

1.1无损压缩，转换为webp格式

webP是一种支持有损压缩和无损压缩的图片文件格式，根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小。在小程序中是支持webp格式的图片的，所以我们可以将图片转换为webp格式，这样可以减少图片体积，提升加载速度。

1.2有损压缩，降低图片分辨率

通过减低图片分辨率可图将片大小大幅度减少，随之加载时间也会大幅缩短，但业务需求要求必须高清，那就不要调节图片的分辨率。

2.网络加载优化

2.1使用 CDN 加速

使用CDN来加速图像的加载，将图片上传到CDN中，CDN 缓存资源到离用户最近的节点，减少用户请求延迟

2.2懒加载图片

未使用懒加载时，进入新页面会一次性加载页面所有的图片，会增加带宽压力；而采用懒加载后，只有出现在用户可视区域的图片才会被加载，从而有效减少网络请求，提升页面响应速度。

3.缓存或本地资源化

当加载图片之后，将图片缓存起来，从而避免每次进页面反复请求，直接从缓存里面拿，更加快，需结合其他方式一起用。

3.2将一些图片放到小程序包中

将图片放到本地，上传小程序时一起上传，直接访问图片资源。但是这个弊端很明显，一是会占空间，可能会超过小程序包上传限制，其次灵活性很差，如果要更换图片，就很麻烦。

4.其他方式

先加载一张缩略图，该缩略图通过样式设置为和原图一样的宽高，这样用户首先能很快速地看到一张模糊的图片，此时再去对原图做预加载，加载完成之后对缩略图进行替换，因为此时图片已经下载过了，所以界面上能无缝地切换为原图显示

参考文献

https://developers.weixin.qq.com/community/develop/article/doc/0006ae5c7fcc88ee89e0a4e1c63413

https://jelly.jd.com/article/6006b1045b6c6a01506c87d4

https://cloud.tencent.com/developer/article/2032314

最终方案

多种方式结合

首先在满足要的的前提下，将图片进行压缩。其次将压缩后的图片放到CDN，并在程序中实现懒加载，再将加载后的图片放到缓存中，下次就可以直接访问缓存。