小程序图片尺寸宽度自适应，微信小程序图片加载优化
本文首发于龙津个人博客。
过去的亮点如何评估： 门零代码平台
最近我公司正在创建一个微信小程序，而这个小程序主要显示的是高分辨率的图片，所以图片数量非常多，图片尺寸也比较大，所以小程序的加载时间非常慢。长一点。长度。那么，这里记录一下如何减少小程序图片的加载时间。
优化之前，选择项目中比较大的图片以及之前保存的一些背景图片，总共上传12张图片到阿里云OSS，并创建一个渲染图片的demo。首先，看加载时间。
pFpoHTU.png
超过1M 的文件大小通常需要超过1 秒才能加载，最慢的图像加载为2.4M，需要5.27 秒才能加载。然而，在这个小程序中，有很多瀑布流的图像需要显示，而且也有很多图像需要加载，这对于这种图像显示的小程序来说是一个非常糟糕的体验。让我们分析一下如何改善用户体验并减少加载时间。
分析与优化这里我们总结了一些常见的图像优化策略。
pFpojp9.png
下面，我们根据总结的优化策略进行优化。
优化一：使用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'清除缓存，刷新页面，加载查看时间：
pFpoqkF.png
您可以看到加载时间显着减少。转换图像格式后，图像尺寸已经很小了。最大的图像只有730kb。加载时间也显着减少。最慢的图像也比以前更短。加载速度从5.27 秒增加两倍至1.71 秒！其他图片加载基本都在500ms左右，加载速度也有了明显提升。
在这里您还应该了解WebP 图像格式的支持程度。我们将在这里使用uni-app 作为演示。我查了文档，支持范围如下：
Android4+（含）和iOS14+（含）内置了对WebP的支持。目前您可以直接使用WebP，无论是在Web 上、在小程序中、在应用程序中还是在vue/nvue/uvue 中。 iOS14及以下版本的应用程序下可以使用WebP。 -vue，不支持iOS。 app-nvue/uvue 支持iOS。从微信小程序2.9.0开始，配置属性webp为true时支持iOS。
所以我觉得如果我们考虑一些特殊情况的话，我们是可以针对一些特殊情况做出反应的。
如果您的文件直接位于服务器上，您可以使用多个第三方工具（例如convertio.co）将图像批量转换为WebP 格式。
优化二：根据需要设置合适的分辨率。阿里云OSS支持在图片后面添加参数来设置图片分辨率。我这里写的demo中，image标签中的图片宽度是小程序图片的默认宽度，即width: 320px ；所以可以在图片URL后面添加/resize,w_320 （w_320表示图片宽度为320px ）。
//原图路径：let url=' https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png x-oss-process=image/format,webp'//图片设置宽度后的路径： let url=' https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png x-oss-process=image/format,webp/resize ,w_320 '清除缓存，刷新页面，检查加载时间。
pFpoly4.jpg
图像大小显着减小，最大图像现在仅为15.4 KB，加载时间也显着缩短，最慢图像的加载速度现在提高了5 倍，从1.71 秒缩短到316 毫秒。此时所有图像的加载速度不会超过1秒，最多350毫秒，基本上是一个质的飞跃。但是，请记住，应根据您的业务需求调整图像分辨率。如果需要高分辨率，不建议将分辨率设置得太低。不过，你可以编写一个方法来检测用户的网络情况，并在不同的网络环境下加载不同分辨率的图像。稍后我会写一篇详细的文章来介绍这个功能的实现。
优化三：使用精灵图片精灵图片（又称精灵）将多张小图片组合成一张大图片，并使用background-image和background-position属性将图片显示在页面上，显示其中之一。这减少了图像加载的次数，减小了图像的大小，并加快了图像加载时间。由于您的项目中不可避免地会出现许多小图标，因此您可以使用精灵图像来减少请求数量。我不会在这里展示它。
优化4：正确使用占位符图像通常，动态显示内容需要通过网络请求从界面检索图像URL。如果您的网络速度很慢，则图像加载过程可能会非常慢。在请求完成之前，页面会变成空白，因为没有数据。这是非常糟糕的用户体验。在这里您可以使用迷你图像标签。以编程方式使用@error 和@load 事件来显示占位符图像。如果需要的话，可以封装LoadImage组件进行统一处理，也可以通过定义参数一次性添加上面的优化1和优化2，同时在组件中添加LayLoad，还可以用mini来减轻组件加载压力程式。
该组件的具体代码如下。
如何使用它：
优化后效果对比我们来看一下优化前后的加载时间对比。
优化前： 优化后： 我们用一张图片来对比一下：
图片名称大小加载时间优化前wallhaven-we3z86.jpeg 2.4MB 5.27s 优化后wallhaven-we3z86.jpeg 15.3KB 23ms
您将看到相对大小减少了99.4%，相对加载时间减少了5.25 秒，显着改善了用户体验，同时又不影响图像质量。
综上所述，在小程序的图像优化方面，您可以根据自己的业务需求和技术支持来选择不同的解决方案。我们在这里仅列出了一些最常用的解决方案。如果您的业务需求比较复杂，可以尝试更多的解决方案。解决方案。
