深入聊聊小程序中怎么进行图片优化

深入聊聊小程序中怎么进行图片优化
本篇文章给大家分享一个小程序实战，看看小程序中怎么进行图片优化，希望对大家有所帮助！

本篇文章给大家分享一个小程序实战，看看小程序中怎么进行图片优化，希望对大家有所帮助！

前端的性能优化，图片优化是必不可少的重要环节，大部分网站页面的构成都少不了图片的渲染。尤其在电商类项目，往往存在大量的图片，如 banner 广告图，菜单导航图，商品列表图等。图片加载数量多以及图片体积过大往往会影响页面加载速度，造成不良的用户体验。【相关学习推荐：小程序开发教程】

优化方案

基于上述问题的主要问题是图片数量和图片体积，所以应该怎么提高图片加载速度，提升用户体验。其实图片优化有非常多且优秀的方案，都可以从中借鉴，最后我们对图片进行不同方向的整体优化。

使用合适的图片格式

目前广泛应用的 WEB 图片格式有 JPEG/JPG、PNG、GIF、WebP、Base64、SVG 等，这些格式都有各自的特点，以下大概简单总结如下：

使用合适的图片格式通常可以带来更小的图片字节大小，通过合理压缩率，可以减少图片大小，且不影响图片质量。

降低网络传输

小程序使用腾讯云图片服务器，提供很多图片处理功能，比如图片缩放、图片降质，格式转换，图片裁剪、图片圆角等功能。这些功能可以通过在图片URL中添加规定参数就能实现，图片服务器会根据参数设置提前将图片处理完成并保存到CDN服务器，这样大大的减少图片传输大小。

目前后台接口下发返回的图片 URL 都是未设置图片参数预处理，比如一张 800x800 尺寸高清的商品图，体积大概300k 左右，这样就很容易导致图片加载和渲染慢、用户流量消耗大，严重影响了用户体验。所以我们结合腾讯云的图片处理功能，网络图片加载前，先检测是否是腾讯云域名的图片URL，如果域名匹配，对图片URL进行预处理，预处理包括添加缩放参数，添加降质参数，添加WebP参数的方式减少图片网络传输大小

我们先看一张通过图片服务器是腾讯云图片处理能力，通过设置图片缩放/降质/WebP，一张尺寸800x800，体积246KB图片，最后输出生成25.6KB，图片体积足足减少了80%，效果显著。

图片缩放

目前业务后台都是原图上传，原始图尺寸可能比客户端实际显示的尺寸要大，一方面导致图片加载慢，另一方面导致用户流量的浪费，其中如果是一张很大尺寸图片加载也会影响渲染性能，会让用户感觉卡顿，影响用户体验。通过添加缩放参数的方式，指定图片服务器下发更小和更匹配实际显示size的图片尺寸。

图片降质

图片服务器支持图片质量，取值范围 0-100，默认值为原图质量，通过降低图片质量可以减少图片大小，但是质量降低太多也会影响图片的显示效果，网络默认降图片质量参数设置为85，同时通过小程序提供的：wx.getNetworkType、wx.onNetworkStatusChange、offNetworkStatusChange的接口监听网络状态变化来获取当前用户的网络类型networkType，比如用户当前使用的4G网络，则图片质量会动态设置为80，对于大部分业务情况，一方面可以大幅减少图片下载大小和保证用户使用体验，另一方面节省用户浏览 ，目前添加图片降质参数至少可以减少30-40%的图片大小。

/** * 设置网络情况 */const setNetwork = (res: Record<string, any>) => { const { isConnected = true, networkType = &#39;wifi&#39; } = res; this.globalData.isConnected = isConnected; this.globalData.networkType = networkType.toLowerCase(); this.events.emit(EventsEnum.UPDATE_NETWORK, networkType);};wx.getNetworkType({ success: (res) => setNetwork(res) });wx.offNetworkStatusChange((res) => setNetwork(res));wx.onNetworkStatusChange((res) => setNetwork(res));