本篇文章将向大家分享一个小程序实战案例，探讨如何在小程序中进行图片优化。我们希望通过这篇文章，能够帮助到大家提高前端性能优化的技巧。
在前端性能优化的过程中，图片优化是一个非常重要的环节。几乎所有网站页面都离不开图片的渲染。尤其是在电商类项目中，往往需要大量的图片，如横幅广告图、菜单导航图、商品列表图等。如果图片数量过多或者图片体积过大，很可能会拖慢页面加载速度，给用户带来不良的体验。【相关学习推荐：小程序开发教程】
为了解决这个问题，我们需要从以下几个方面对图片进行优化：使用合适的图片格式、降低网络传输、图片裁剪和缩放等。下面我们详细介绍一下这些方面的优化方法。
1. 使用合适的图片格式
目前广泛应用的 WEB 图片格式有 JPEG/JPG、PNG、GIF、WebP、Base64、SVG 等。这些格式各有特点，使用合适的图片格式可以有效地减小图片字节大小，从而降低图片资源占用，减轻服务器压力。同时，合理压缩率不会影响图片质量。
2. 降低网络传输
为了进一步减少图片资源占用和提高加载速度，我们还可以从以下几个方面进行优化：
- 图片缩放：将大尺寸的图片缩小到合适的尺寸，可以减少图片传输所需的时间和带宽。
- 图片降质：适度降低图片质量，以减少图片大小和传输时间。需要注意的是，过度降质会影响用户体验。
- URL 重写：通过修改 URL 中的参数，例如添加缩放参数、降质参数和 WebP 参数等，可以让浏览器根据不同的设备和网络环境选择合适的图片版本进行加载。
- CDN 加速：使用 CDN(内容分发网络)可以将静态资源缓存到离用户较近的服务器上，从而加快图片加载速度。
3. 图片裁剪和圆角处理
对于一些特殊场景，可能还需要对图片进行裁剪或者圆角处理。这样可以减少图片边缘的空白区域，提高页面布局的紧凑度。在小程序中，可以使用相应的 API 实现这些功能。
综上所述，通过对小程序中图片进行综合优化，我们可以有效提高其加载速度和用户体验。希望本文能为大家在小程序开发过程中提供一些有益的参考。【相关学习推荐：小程序开发教程】
```javascript/**
* 设置网络情况
*/
const setNetwork = (res: Record
const { isConnected = true, networkType = 'wifi' } = 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));
/**
* 根据网络环境设置不同质量图片
*/
const ImageQuality: Record
wifi: 85,
'5g': 85,
'4g': 80,
'3g': 60,
'2g': 60,
};
/**
* 获取图片质量
*/
export const getImageQuality = () => ImageQuality[getApp().globalData.networkType || 'wifi'];
```
// 检查是否支持webp格式
const checkSupportWebp = () => {
const { system } = wx.getSystemInfoSync();
const [platform, version] = system.split(' ');
if (platform.toLocaleUpperCase() === PlatformEnum.IOS) {
return Number(version.split('.')[0]) > IOS_VERSION_13;
}
return true; // 默认支持webp格式
};
// SVG、GIF、WebP优化效果
测试我们小程序首页列表接口加载图片，来对比优化前后的效果(降低77%+)(降低86%+)(降低72%+)(降低84%)。经过我们通过使用腾讯云图片服务器的图片处理功能，以及动态处理图片格式的方式，减少图片体积，提高图片加载速度，带来的收益比非常可观的。
// 图片懒加载
懒加载是一种性能优化的方式，将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载，对于页面加载性能上会有很大的提升，也提高了用户体验。
实现原理：Intersection Observer API
Intersection Observer API是W3C提出的一种新的API,用于监听元素与视图的交叉状态。通过这种方式，可以实现对页面中元素的高效监控，从而实现懒加载等功能。
这段代码是使用了小程序的 IntersectionObserver API,其目的是通过监听元素是否进入或离开视窗(viewport),来进行相应的操作。
解析：
1. 首先导入了 `IntersectionObserver` 类，该类是小程序框架提供的用于观察目标节点与视窗交集状态的工具。
2. 然后创建了一个 `IntersectionObserver` 实例 `ob`,并配置了相关参数和回调方法。
- `selector` 属性指定了需要被监视的目标元素的选择器，这里是 '.goods-item'。
- `observeAll` 属性为 true 时，表示同时观测多个目标节点；否则只观测首个目标节点。
- `context` 属性是小程序的 this 对象实例，用于获取当前环境的上下文。
- `delay` 属性定义了调用 onFinal 方法的间隔时间，默认为 200ms。
- `onEach` 是每次目标元素发生变化时都会调用的方法，它接收一个包含 `dataset` 属性的对象作为参数，我们可以通过这个对象来获取目标元素的一些信息。这里的示例只是简单地返回了目标元素的 key。
- `onFinal` 是当触发监听调用一段时间 delay 后会调用的方法，可以在这个方法里进行一些处理或者数据上报的操作。示例中只是简单地将数据打印出来。
3. 最后，通过 `ob.connect()` 开始监听目标元素的状态变化，当不再需要监听时，可以使用 `ob.disconnect()` 停止监听。如果希望重置监听状态，可以使用 `ob.reconnect()`。
```html
```
使用小程序开发者工具的体验评分功能，体验评分是一项给小程序的体验好坏打分的功能，它会在小程序运行过程中实时检查，分析出一些可能导致体验不好的地方，并且定位出哪里有问题，以及给出一些优化建议。通过体验评分的结果，可以分析我们存在短时间内发起太多的图片请求，以及存在图片太大而有效显示区域较小。所以根据分析的结果，开发需要合理控制数量，可考虑使用雪碧图技术、拆分域名或在屏幕外的图片使用懒加载等。此外，还可以上传压缩图片来减少请求数和减小体积。
以下是一些推荐的图片压缩网站：
- OnlineImage.org
- SmallPNG
- Pix Fix
