最近在公司写微信小程序，该小程序主要展示一些高清图片，所以图片数量非常多，而且图片尺寸也比较大，导致小程序的加载时间非常长。所以这里记录一下如何减少小程序图片的加载时间。

优化前

这里我挑选了一些项目里面比较大的图片，还有我之前保存的一些背景图，共计12张，上传到阿里云oss，然后写了一个demo去渲染图片，这里我们先看看加载时间。

可以看到，一旦文件大小到了1M以上，加载基本都在1秒以上了，而且加载最慢的一张图片大小为2.4M；加载耗时5.27秒。然而在这个小程序中，有非常多的瀑布流图片展示，需要加载的图片也非常多，这对于这种图片展示类的小程序来说，简直是非常糟糕的体验。下面我们就分析一下，如何提升用户体验，缩短加载时间。

分析优化

这里我总结了一些常见图片优化策略，方法如下：

图片

下面我们就根据总结的优化策略进行优化，具体如下：

优化1：使用webp格式的图片

首先我们知道，在小程序中是支持webp格式的图片的，所以我们可以将图片转换为webp格式，这样可以减少图片体积，提升加载速度。 公司使用的阿里云oss进行图片存储，阿里云oss是支持格式转换的，只需要在图片url后面加一定的参数即可，我们可以给图片后面加上?x-oss-process=image/format,webp即可。

// 原本图片路径：
let url =' https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png'

// 转化为webp格式的图片路径：
let url =' https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png?x-oss-process=image/format,webp'