深度谈如何在小程序中优化图片（微信小程序图片处理）

本文将与您分享一个小程序，看看如何在小程序中优化图片。希望对你有帮助！

前端性能优化中，图片优化是不可或缺的重要环节，而大多数网站页面都是由图片渲染而成。尤其是在电商项目中，往往会出现大量的图片，比如横幅广告图、菜单导航图、商品列表图等等。图片数量多、图片体积大往往会影响页面加载速度，造成不好的用户体验。【相关学习推荐:小程序开发教程】

基于上述问题的优化方案的主要问题是图片的数量和体积，因此如何提高图片的加载速度并增强用户体验。其实图像优化有很多优秀的方案，可以借鉴。最后，我们从整体上对图像进行不同方向的优化。

使用适当的图像格式。目前，广泛使用的网络图像格式有JPEG/JPG、PNG、GIF、WebP、Base64、SVG等。这些格式都有各自的特点，总结如下:

使用合适的图片格式通常可以带来较小的图片字节大小，并且通过合理的压缩比，可以在不影响图片质量的情况下减小图片大小。

减少网络传输小程序使用腾讯云图像服务器，该服务器提供了许多图像处理功能，如图像缩放，图像降级，格式转换，图像裁剪，图像舍入等。这些功能可以通过在图像URL中添加指定参数来实现，图像服务器将根据参数设置提前完成图像处理并保存到CDN服务器中，从而大大减少图像传输大小。

目前后台接口发回的图片URL没有经过图片参数的预处理，例如一张800x800的高清产品图，体积约300k，这将容易导致图片加载和渲染速度缓慢，用户流量消耗高，严重影响用户体验。因此，我们结合了腾讯云的图像处理功能。在加载网络图像之前，我们首先检测它是否是腾讯云域名的图像URL。如果域名匹配，我们预处理图像URL。预处理包括添加缩放参数、添加降级参数和添加WebP参数以减小图像网络传输大小。

我们先来看一张由腾讯云通过图片服务器处理的图片。通过设置图片缩放/降级/WebP，最终输出一张大小为800x800、体积为246KB的图片生成25.6KB，图片体积足足缩小了80%，效果显著。

图像缩放目前，原始图像在业务后台上传，原始图像的大小可能大于客户端实际显示的大小。一方面导致图片加载缓慢，另一方面导致用户流量浪费。其中，如果加载大型图像，还会影响渲染性能，从而使用户感到卡住，影响用户体验。通过添加缩放参数，图像服务器被指定发布与实际显示尺寸更匹配的较小图像尺寸。

图像降级图像服务器支持图像质量，取值范围为0-100，默认值为原始图像质量。通过降低图像质量，可以缩小图像尺寸，但如果图像质量降低太多，图像的显示效果也会受到影响。网络默认图像降级参数设置为85。同时，通过小程序提供的接口:wx.getNetworkType、wx.onNetworkStatusChange和offNetworkStatusChange，可以获取当前用户的网络类型，例如用户当前使用的4G网络，并且画质将动态设置为80。对于大多数业务情况，一方面可以大大减少图片下载大小并保证用户体验，另一方面可以节省用户浏览。目前，添加图像降级参数可以将图像大小至少缩小30-40%。

/* * *设置网络情况*/const Set network =（RES:record）=》{ const { is connected = true，network type = & # 39wifi & # 39} = resthis . global data . is connected = is connected；this . global data . network type = network type . tolowercase（）；this . events . emit（events enum。UPDATE_NETWORK，NETWORK type）；};wx . getnetworktype（{ success:（RES）=》set network（RES）}）；wx . offnetworkstatuschange（（RES）=》set network（RES））；wx . onnetworkstatuschange（（RES）=》set network（RES））；/* * *根据网络环境设置不同质量的图片*/const图像质量:record = {wifi: 85，& # 39；5g & # 39: 85, '4g & # 39: 80, '3g & # 39: 60, '2g & # 39: 60,};/* * *获取图像质量*/export const getimage quality =（）=》图像质量

在兼容WebP的移动终端中，大多数用户已经支持我可以使用...支持HTML 5、CSS3等的表格。

对于png/jpg图像格式，会自动添加WebP参数并转换为WebP图像格式。尽管WebP解码图像的时间可能比png/jpg长，但相对的网络传输速度仍有很大提高。目前ios 13系统版本用户占比大，小程序端获取当前系统版本，降级过程中不添加WebP参数。

//检查是否支持webp格式const checksupportwebp =（）=》{ const { system } = wx . getsysteminfosync（）；常数

通过使用腾讯云图像服务器的图像处理功能并动态处理图像格式，可以减少图像体积并提高图像加载速度，从而带来可观的利润比例。

图片的延迟加载是性能优化的一种方式。页面中未出现在可视区域的图片不会先加载，滚动到可视区域后再加载，这将大大提高页面加载性能，改善用户体验。

实现原则

使用applet提供交叉点观察者API来监控某些节点是否可以被用户看到以及用户可以看到的比例。这样，我们就可以判断像素是否在可能性范围内并加载图片。

基于小程序的路口观察器API，我们封装了一个监控模块来暴露拦截观察器功能工具，并提供以下用法。

从& # 39；utils/observer/观察者& # 39；；const ob = new intersection observer（{ selector:& # 39；。goods -item & # 39；，//指定被监控的目标节点元素observeAll: true，//是否观察多个目标节点context: this，//Delay:applet的这个对象实例的200，//调用onFinal方法的间隔，默认为200 ms onEach:（{ dataset }）=》{//每次触发监控调用时，都会触发onEach方法，可以对数据进行一些过滤处理；const { key } = dataset | | { }回车键；}，onFinal:（delay）=》{//监控调用触发一段时间后，会调用一次on final方法，可以向if（！数据）返回；console . log（& # 39；模块视图数据& # 39；、数据）；},});//内置函数方法，如下:ob . connect（）；//开始监听ob . disconnect（）；//停止侦听ob . reconnect（）；//重置监视器，然后在我们的FreeImage图片组件中添加在可视区域加载图片的功能。以下是部分代码。

从& # 39；utils/observer & # 39；；component（{ properties:{ src:string，/* * *是否打开可视区域加载图片*/observer: {type: Boolean，value: false，}，...}，数据:{isobserver: false，...}，生存期:{ attached（）{//打开可视区域加载图片if（this . data . observer）{ this . create observer（）；}}，}，方法:{.../* *监控图片是否进入可视区域*/create observer（）{ constob = new intersection observer（{ selector:& # 39；。free -image & # 39；，observer all:true，context: this，on final:（data =

通过使用图片的惰性加载功能，减少了图片数量，有效提高了页面加载性能。在上面，我们已经优化了图像体积，因此在我们的小程序中，只有在网络条件差的情况下才会自动打开图像的懒人加载功能。

我们的项目中有许多本地图像资源，例如一些图标图标、标签类剪切、背景图像、图像按钮等。但是，小程序的子包大小受到限制:整个小程序的所有子包不得超过20M，单个子包/主包的大小不得超过2M。因此，为了减少小程序的大小，需要调整本地图像资源，例如图像压缩和上传到CDN服务器。这样可以缩小小程序主包的大小，大部分图片都在腾讯云CDN服务器中。虽然它可以加快资源的请求速度，但当页面打开并需要同时下载大量图片时，会严重影响用户体验。

为了解决这个问题，我们需要找到一个平衡点来优化请求的数量。首先，我们对图像资源和使用场景进行分类，并最终确定我们的计划如下:

对于大容量图片，为上传到CDN服务器的单色图标选择iconfont字体图标，为彩色图标选择svg格式的类似标签的图片，然后生成精灵图并上传到CDN服务器，图片容量小于10KB。考虑到使用场景，可以考虑base64，例如图片体积为3KB的背景图像。由于小程序css后台不支持本地图片的引入，我们可以使用base64实现大图检测的其他策略并实现大图检测机制，以便及时发现图片不符合规范的问题，并在发现图片尺寸过大且不符合商品图片尺寸标准时进行报告。在小程序开发版/体验版中，当我们将Debug模式设置为on时，图片组件FreeImage会自动检测大图，显示当前图片大小，并设置高亮/翻转图片的方式，以提醒操作学生和设计学生进行处理。

加载失败的处理使用腾讯云的图像处理功能，对URL进行预处理并转换为新的URL，这可能会导致少量图像不存在的异常场景导致加载失败。当图像加载失败时，我们仍然需要重新加载原始图像URL，然后将错误的图像URL报告给监控平台，以调整URL预处理和转换规则，同时我们还会发现一些错误的图像URL以促进业务修改。

这是我们的图片组件FreeImage，它无法加载图片。以下是部分代码。

onError（事件:微信迷你程序。touch event）{ const { src，useCosImage } = this.datathis . setdata（{ loading:false，error: true，lazy:& # 39；错误& # 39；, });//判断腾讯云服务的图片if（useco image）{ wx。next tick（（）=》{//重新加载原生图片this。setdata（{ Formatted src:src，//src是原图的地址}）；});}//报告镜像加载失败app . aegis . Report（aegis enum . image _ load _ fail，{src，errmsg: event？。detail.errMsg，}）；this . triggerevent（& # 39；错误& # 39；，event . detail）；}检查图片请求的数量。使用小程序开发者工具的体验评分功能。体验评分是对小程序的体验进行评分的功能。它会在小程序运行过程中实时检查，分析一些可能导致体验不佳的地方，定位问题并给出一些优化建议。

通过体验评分结果，我们可以分析出短时间内对图片的请求过多，图片过多且有效显示区域较小。因此，根据分析结果，需要合理控制开发数量，可以考虑使用sprite map技术、域名拆分或屏幕外图片的惰性加载。

上传压缩图片前，在保持可接受的清晰度的同时减小文件大小，并合理压缩。现在有很多好的图像压缩插件工具，我就不详细介绍了。

推荐一个优秀的图像压缩网站:TinyPNG使用智能有损压缩技术来减小您的WebP、PNG和JPEG图像的文件大小。

更多编程相关知识请访问:编程入门！！

以上就是小程序中如何优化画面的细节。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：深度谈如何在小程序中优化图片（微信小程序图片处理） https://zhujicankao.com/106001.html