Artikel ini akan berkongsi dengan anda aplikasi praktikal program mini untuk melihat cara mengoptimumkan imej dalam program mini saya harap ia akan membantu semua orang!
Pengoptimuman prestasi bahagian hadapan dan pengoptimuman imej adalah pautan penting dan penting Penyajian imej amat diperlukan untuk komposisi kebanyakan halaman tapak web. Terutamanya dalam projek e-dagang, selalunya terdapat sejumlah besar gambar, seperti gambar iklan banner, gambar navigasi menu, gambar senarai produk, dll. Memuatkan sejumlah besar imej dan saiz imej yang terlalu besar selalunya menjejaskan kelajuan pemuatan halaman, mengakibatkan pengalaman pengguna yang buruk. [Cadangan pembelajaran berkaitan: Tutorial pembangunan program mini]
Masalah utama berdasarkan masalah di atas ialah bilangan gambar dan saiz gambar, jadi Bagaimana untuk meningkatkan kelajuan memuatkan imej dan meningkatkan pengalaman pengguna. Sebenarnya, terdapat banyak penyelesaian yang sangat baik untuk pengoptimuman imej, dan kita semua boleh belajar daripadanya. Akhirnya, kita mengoptimumkan imej secara keseluruhan ke arah yang berbeza.
Format imej WEB yang digunakan secara meluas pada masa ini termasuk JPEG/JPG, PNG, GIF, WebP, Base64, SVG, dsb., format ini mempunyai ciri tersendiri Berikut ialah ringkasan ringkas:
Menggunakan format imej yang sesuai biasanya boleh membawa kepada saiz bait imej yang lebih kecil, melalui yang munasabah. kadar mampatan, saiz imej boleh dikecilkan tanpa menjejaskan kualiti imej.
Program mini menggunakan Tencent Cloud Image Server untuk menyediakan banyak fungsi pemprosesan imej, seperti 图片缩放、图片降质，格式转换，图片裁剪、图片圆角 dan lain-lain fungsi. Fungsi ini boleh dicapai dengan menambahkan parameter yang ditentukan pada imej URL Pelayan imej akan memproses imej terlebih dahulu mengikut tetapan parameter dan menyimpannya ke pelayan CDN, yang mengurangkan saiz penghantaran imej dengan ketara.
Pada masa ini, URL imej yang dikembalikan oleh antara muka bahagian belakang tidak ditetapkan untuk prapemprosesan parameter imej Contohnya, imej produk definisi tinggi bersaiz 800x800 , yang akan menyebabkan dengan mudah. imej untuk dimuatkan dan pemaparan adalah perlahan dan penggunaan trafik pengguna adalah besar, yang memberi kesan serius kepada pengalaman pengguna. Oleh itu, kami menggabungkan fungsi pemprosesan imej Tencent Cloud Sebelum memuatkan imej rangkaian, kami mula-mula mengesan sama ada imej itu 300k nama domain Tencent Cloud prapemprosesan termasuk URL, 域名, URL cara untuk mengurangkan saiz penghantaran rangkaian imej添加缩放参数添加降质参数 Mari kita lihat dulu keupayaan pemprosesan imej Tencent Cloud melalui pelayan imej Dengan menetapkan penskalaan/degradasi/WebP , satu saiz imej添加WebP参数, saiz imej ialah
Saiz imej dikecilkan cukup kepada 800x800, dan kesannya adalah ketara. 246KB25.6KB80%
sizeKemerosotan gambar
, 0-100 dan 85 Dapatkan jenis rangkaian pengguna semasa wx.getNetworkType, seperti rangkaian wx.onNetworkStatusChange yang sedang digunakan oleh pengguna, maka kualiti imej akan menjadi dinamik. ditetapkan kepada offNetworkStatusChange Untuk kebanyakan situasi perniagaan, dalam satu pihak, ia boleh mengurangkan saiz muat turun imej dan memastikan pengalaman pengguna , sebaliknya, ia menjimatkan penyemakan imbas pada masa ini kurangkan saiz imej networkType. 4G
/**
* 设置网络情况
*/
const setNetwork = (res: Record<string, any>) => {
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<string, number> = {
wifi: 85,
'5g': 85,
'4g': 80,
'3g': 60,
'2g': 60,
};
/**
* 获取图片质量
*/
export const getImageQuality = () => ImageQuality[getApp().globalData.networkType ?? 'wifi'];Seperti yang dinyatakan sebelum ini, format imej yang berbeza mempunyai kelebihan, kelemahan dan senario penggunaan tersendiri, antaranya WebP format imej memberikan pemampatan lossy Format imej dengan pemampatan tanpa kehilangan. Menurut Google data rasmi, berbanding dengan PNG, WebPimej tanpa rugi mempunyai kurang bait26％ dan WebPimej lossy mempunyai kurang baitJPG berbanding 25-34％imej yang serupa. Pada masa kini, produk syarikat Internet utama telah digunakan, seperti Taobao, JD.com, dan Meituan.
Letakkan pautan contoh WebP di sini (GIF, PNG, JPG ke Webp) untuk merasai kelebihan WebP secara intuitif dalam saiz imej.
Keserasian WebP pada mudah alih, kebanyakan pengguna sudah menyokongnyaBolehkah saya menggunakan... Jadual sokongan untuk HTML5, CSS3, dll,
untuk format imej png/jpg, tambah parameter WebP secara automatik dan tukarkannya kepada format imej WebP. Walaupun WebP mungkin mengambil masa lebih lama untuk menyahkod imej daripada png/jpg, kelajuan penghantaran rangkaian relatif masih dipertingkatkan dengan ketara. Pada masa ini, versi sistem ios 13 menyumbang sebahagian besar pengguna Applet memperoleh versi sistem semasa dan tidak menambah parameter WebP untuk pemprosesan turun taraf.
// 检查是否支持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格式
};Petua: Memandangkan pelayan imej semasa tidak menyokong penukaran
SVG、GIFkepadaWebP, tiada pemprosesan dilakukan
Uji memuatkan imej daripada antara muka senarai pada halaman utama program mini kami untuk membandingkan kesan sebelum dan selepas pengoptimuman
| 优化前 | 图片数 | 不支持 WebP | 支持 WebP |
|---|---|---|---|
| 2300K | 10 | 523K (降低 77% ) | 315K (降低 86% ) |
| 248M | 100 | 69M (降低 72% ) | 38M (降低 84% ) |
经过我们通过使用腾讯云图片服务器的图片处理功能，以及动态处理图片格式的方式，减少图片体积，提高图片加载速度，带来的收益比非常可观的
懒加载是一种性能优化的方式，将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载，对于页面加载性能上会有很大的提升，也提高了用户体验。
实现原理
使用小程序提供Intersection Observer API，监听某些节点是否可以被用户看见、有多大比例可以被用户看见。这样我们就能判断图片元素是否在可是范围中，进行图片加载。
我们基于小程序的Intersection Observer API，封装一个监听模块曝光 IntersectionObserver函数工具，提供以下用法
import IntersectionObserver from 'utils/observer/observer';
const ob = new IntersectionObserver({
selector: '.goods-item', // 指定监听的目标节点元素
observeAll: true, // 是否同时观测多个目标节点
context: this, // 小程序 this 对象实例
delay: 200, // 调用 onFinal 方法的间隔时间，默认 200ms
onEach: ({ dataset }) => {
// 每一次触发监听调用时，触发 onEach 方法，可以对数据进行一些过滤处理
const { key } = dataset || {};
return key;
},
onFinal: (data) => {
// 在触发监听调用一段时间 delay 后，会调用一次 onFinal 方法，可以进行埋点上报
if (!data) return;
console.log('module view data', data);
},
});
// 内置函数方法，如下：
ob.connect(); // 开始监听
ob.disconnect(); // 停止监听
ob.reconnect(); // 重置监听然后在我们的FreeImage图片组件，添加可视区域加载图片的功能，以下是部分代码
import IntersectionObserver from 'utils/observer';
Component({
properties: {
src: String,
/**
* 是否开启可视区域加载图片
*/
observer: {
type: Boolean,
value: false,
},
....
},
data: {
isObserver: false,
...
},
lifetimes: {
attached() {
// 开启可视区域加载图片
if (this.data.observer) {
this.createObserver();
}
},
},
methods: {
...
/**
* 监听图片是否进入可视区域
*/
createObserver() {
const ob = new IntersectionObserver({
selector: '.free-image',
observeAll: true,
context: this,
onFinal: (data = []) => {
data.forEach((item: any) => {
this.setData({
isObserver: true,
});
ob.disconnect(); // 取消监听
});
},
});
ob.connect(); // 开始监听
}
}
})<free-image observer src="{{ src }}" />测试我们小程序首页列表，使用图片懒加载的效果
通过使用图片懒加载的功能，减少图片数量的加载，有效提高页面加载性能。在上述我们已经对图片体积进行优化过，所以在我们小程序中，只有在网络情况较差的情况下，才会自动开启图片懒加载功能。
我们项目中有很多本地图片资源，比如一些 icon 图标、标签类切图、背景图、图片按钮等。而小程序分包大小是有限制：整个小程序所有分包大小不超过 20M，而单个分包/主包大小不能超过 2M。所以为了减轻小程序体积，本地图片资源需要进行调整，比如图片压缩、上传到 CDN 服务器。这样能减少了小程序主包大小，而大部分图片都在腾讯云 CDN 服务器中，虽然可以加速资源的请求速度，当页面打开需要同时下载大量的图片的话，就会严重影响了用户的使用体验。
针对此问题，需要找到权衡点来实现来优化请求数，首先我们把图片资源进行分类，以及使用场景，最后确定我们方案如下：
svg格式10KB，结合使用场景，则考虑base64 ，比如一张图片体积为3KB的背景图，由于小程序css background不支持本地图片引入，可以使用 base64 方式实现实现大图检测机制，及时发现图片不符合规范的问题，当发现图片尺寸太大，不符合商品图尺寸标准时会进行上报。在小程序开发版/体验版中，当我们设置开启Debug模式，图片组件FreeImage会自动检测到大图片时，显示当前图片尺寸、以及设置图片高亮/翻转的方式提醒运营同学和设计同学进行处理
使用腾讯云图片处理功能，URL预处理转换后得新 URL，可能会存在少量图片不存在的异常场景导致加载失败。遇到图片加载失败时，我们还是需要重新加载原始图片 URL, 之后会将错误图片 URL 上报到监控平台，方便之后调整 URL 预处理转换规则，同时也发现一部分错误的图片 URL 推动业务修改。
这是我们图片组件FreeImage 处理图片加载失败，以下是部分代码
onError(event: WechatMiniprogram.TouchEvent) {
const { src, useCosImage } = this.data;
this.setData({
loading: false,
error: true,
lazy: 'error',
});
// 判断是否腾讯云服务的图片
if (useCosImage) {
wx.nextTick(() => {
// 重新加载原生图片
this.setData({
formattedSrc: src, // src 是原图地址
});
});
}
// 上报图片加载失败
app.aegis.report(AegisEnum.IMAGE_LOAD_FAIL, {
src,
errMsg: event?.detail.errMsg,
});
this.triggerEvent('error', event.detail);
}使用小程序开发者工具的体验评分功能，体验评分是一项给小程序的体验好坏打分的功能，它会在小程序运行过程中实时检查，分析出一些可能导致体验不好的地方，并且定位出哪里有问题，以及给出一些优化建议。
通过体验评分的结果，可以分析我们存在短时间内发起太多的图片请求，以及存在图片太大而有效显示区域较小。所以根据分析的结果，开发需要合理控制数量，可考虑使用雪碧图技术、拆分域名或在屏幕外的图片使用懒加载等。
图片在上传前在保持可接受的清晰度范围内同时减少文件大小，进行合理压缩。现如今有很多不错的图片压缩插件工具，就不在详情介绍了。
推荐一个比较优秀的图片压缩网站：TinyPNG使用智能有损压缩技术将您的 WebP, PNG and JPEG 图片的文件大小降低
更多编程相关知识，请访问：编程入门！！
Atas ialah kandungan terperinci Mari kita bercakap secara mendalam tentang cara mengoptimumkan imej dalam program mini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
