深入聊聊小程序中怎么進(jìn)行圖片優(yōu)化

本篇文章給大家分享一個(gè)小程序?qū)崙?zhàn)，看看小程序中怎么進(jìn)行圖片優(yōu)化，希望對(duì)大家有所幫助！

前端的性能優(yōu)化，圖片優(yōu)化是必不可少的重要環(huán)節(jié)，大部分網(wǎng)站頁(yè)面的構(gòu)成都少不了圖片的渲染。尤其在電商類(lèi)項(xiàng)目，往往存在大量的圖片，如 banner 廣告圖，菜單導(dǎo)航圖，商品列表圖等。圖片加載數(shù)量多以及圖片體積過(guò)大往往會(huì)影響頁(yè)面加載速度，造成不良的用戶(hù)體驗(yàn)?！鞠嚓P(guān)學(xué)習(xí)推薦：小程序開(kāi)發(fā)教程】

優(yōu)化方案

基于上述問(wèn)題的主要問(wèn)題是圖片數(shù)量和圖片體積，所以應(yīng)該怎么提高圖片加載速度，提升用戶(hù)體驗(yàn)。其實(shí)圖片優(yōu)化有非常多且優(yōu)秀的方案，都可以從中借鑒，最后我們對(duì)圖片進(jìn)行不同方向的整體優(yōu)化。

使用合適的圖片格式

目前廣泛應(yīng)用的 WEB 圖片格式有 JPEG/JPG、PNG、GIF、WebP、Base64、SVG 等，這些格式都有各自的特點(diǎn)，以下大概簡(jiǎn)單總結(jié)如下：

使用合適的圖片格式通?？梢詭?lái)更小的圖片字節(jié)大小，通過(guò)合理壓縮率，可以減少圖片大小，且不影響圖片質(zhì)量。

降低網(wǎng)絡(luò)傳輸

小程序使用騰訊云圖片服務(wù)器，提供很多圖片處理功能，比如圖片縮放、圖片降質(zhì)，格式轉(zhuǎn)換，圖片裁剪、圖片圓角等功能。這些功能可以通過(guò)在圖片URL中添加規(guī)定參數(shù)就能實(shí)現(xiàn)，圖片服務(wù)器會(huì)根據(jù)參數(shù)設(shè)置提前將圖片處理完成并保存到CDN服務(wù)器，這樣大大的減少圖片傳輸大小。

目前后臺(tái)接口下發(fā)返回的圖片 URL 都是未設(shè)置圖片參數(shù)預(yù)處理，比如一張 800x800 尺寸高清的商品圖，體積大概300k 左右，這樣就很容易導(dǎo)致圖片加載和渲染慢、用戶(hù)流量消耗大，嚴(yán)重影響了用戶(hù)體驗(yàn)。所以我們結(jié)合騰訊云的圖片處理功能，網(wǎng)絡(luò)圖片加載前，先檢測(cè)是否是騰訊云域名的圖片URL，如果域名匹配，對(duì)圖片URL進(jìn)行預(yù)處理，預(yù)處理包括添加縮放參數(shù)，添加降質(zhì)參數(shù)，添加WebP參數(shù)的方式減少圖片網(wǎng)絡(luò)傳輸大小

我們先看一張通過(guò)圖片服務(wù)器是騰訊云圖片處理能力，通過(guò)設(shè)置圖片縮放/降質(zhì)/WebP，一張尺寸800x800，體積246KB圖片，最后輸出生成25.6KB，圖片體積足足減少了80%，效果顯著。

圖片縮放

目前業(yè)務(wù)后臺(tái)都是原圖上傳，原始圖尺寸可能比客戶(hù)端實(shí)際顯示的尺寸要大，一方面導(dǎo)致圖片加載慢，另一方面導(dǎo)致用戶(hù)流量的浪費(fèi)，其中如果是一張很大尺寸圖片加載也會(huì)影響渲染性能，會(huì)讓用戶(hù)感覺(jué)卡頓，影響用戶(hù)體驗(yàn)。通過(guò)添加縮放參數(shù)的方式，指定圖片服務(wù)器下發(fā)更小和更匹配實(shí)際顯示size的圖片尺寸。

圖片降質(zhì)

圖片服務(wù)器支持圖片質(zhì)量，取值范圍 0-100，默認(rèn)值為原圖質(zhì)量，通過(guò)降低圖片質(zhì)量可以減少圖片大小，但是質(zhì)量降低太多也會(huì)影響圖片的顯示效果，網(wǎng)絡(luò)默認(rèn)降圖片質(zhì)量參數(shù)設(shè)置為85，同時(shí)通過(guò)小程序提供的：wx.getNetworkType、wx.onNetworkStatusChange、offNetworkStatusChange的接口監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)變化來(lái)獲取當(dāng)前用戶(hù)的網(wǎng)絡(luò)類(lèi)型networkType，比如用戶(hù)當(dāng)前使用的4G網(wǎng)絡(luò)，則圖片質(zhì)量會(huì)動(dòng)態(tài)設(shè)置為80，對(duì)于大部分業(yè)務(wù)情況，一方面可以大幅減少圖片下載大小和保證用戶(hù)使用體驗(yàn)，另一方面節(jié)省用戶(hù)瀏覽 ，目前添加圖片降質(zhì)參數(shù)至少可以減少30-40%的圖片大小。

/**  * 設(shè)置網(wǎng)絡(luò)情況  */ 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));

/**  * 根據(jù)網(wǎng)絡(luò)環(huán)境設(shè)置不同質(zhì)量圖片  */ const ImageQuality: Record<string, number> = {   wifi: 85,   '5g': 85,   '4g': 80,   '3g': 60,   '2g': 60, };  /**  * 獲取圖片質(zhì)量  */ export const getImageQuality = () => ImageQuality[getApp().globalData.networkType ?? 'wifi'];

使用 WebP

前面簡(jiǎn)單介紹不同的圖片格式都有各自的優(yōu)缺點(diǎn)和使用場(chǎng)景，其中 WebP 圖片格式提供有損壓縮與無(wú)損壓縮的圖片格式。按照Google官方的數(shù)據(jù)，與PNG相比，WebP無(wú)損圖像的字節(jié)數(shù)要少26％，WebP有損圖像比同類(lèi)JPG圖像字節(jié)數(shù)少25-34％?，F(xiàn)如今各大互聯(lián)網(wǎng)公司的產(chǎn)品都已經(jīng)使用了，如淘寶、京東和美團(tuán)等。

這里放一個(gè) WebP 示例鏈接（GIF、PNG、JPG 轉(zhuǎn) Webp），直觀感受 WebP 在圖片大小上的優(yōu)勢(shì)。

在移動(dòng)端中 WebP的兼容性，大部分?jǐn)?shù)用戶(hù)都已經(jīng)支持了 Can I use… Support tables for HTML5, CSS3, etc，

針對(duì)png/jpg圖片格式，自動(dòng)添加WebP參數(shù)，轉(zhuǎn)成WebP圖片格式。雖然WebP相比png/jpg圖片解碼可能需要更長(zhǎng)時(shí)間，但相對(duì)網(wǎng)絡(luò)傳輸速度提升還是很大。目前 ios 13系統(tǒng)版本有不少用戶(hù)量的占比，小程序端獲取當(dāng)前系統(tǒng)版本，降級(jí)處理不添加WebP參數(shù)。

// 檢查是否支持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; // 默認(rèn)支持webp格式 };

提示：由于目前圖片服務(wù)器并不支持、SVG、GIF轉(zhuǎn)WebP，并沒(méi)有做處理

優(yōu)化效果

測(cè)試我們小程序首頁(yè)列表接口加載圖片，來(lái)對(duì)比優(yōu)化前后的效果

經(jīng)過(guò)我們通過(guò)使用騰訊云圖片服務(wù)器的圖片處理功能，以及動(dòng)態(tài)處理圖片格式的方式，減少圖片體積，提高圖片加載速度，帶來(lái)的收益比非?？捎^的

圖片懶加載

懶加載是一種性能優(yōu)化的方式，將頁(yè)面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先不做加載， 等到滾動(dòng)到可視區(qū)域后再去加載，對(duì)于頁(yè)面加載性能上會(huì)有很大的提升，也提高了用戶(hù)體驗(yàn)。

實(shí)現(xiàn)原理

使用小程序提供Intersection Observer API，監(jiān)聽(tīng)某些節(jié)點(diǎn)是否可以被用戶(hù)看見(jiàn)、有多大比例可以被用戶(hù)看見(jiàn)。這樣我們就能判斷圖片元素是否在可是范圍中，進(jìn)行圖片加載。

我們基于小程序的Intersection Observer API，封裝一個(gè)監(jiān)聽(tīng)模塊曝光 IntersectionObserver函數(shù)工具，提供以下用法

import IntersectionObserver from 'utils/observer/observer';  const ob = new IntersectionObserver({   selector: '.goods-item', // 指定監(jiān)聽(tīng)的目標(biāo)節(jié)點(diǎn)元素   observeAll: true, // 是否同時(shí)觀測(cè)多個(gè)目標(biāo)節(jié)點(diǎn)   context: this, // 小程序 this 對(duì)象實(shí)例   delay: 200, // 調(diào)用 onFinal 方法的間隔時(shí)間，默認(rèn) 200ms   onEach: ({ dataset }) => {     // 每一次觸發(fā)監(jiān)聽(tīng)調(diào)用時(shí)，觸發(fā) onEach 方法，可以對(duì)數(shù)據(jù)進(jìn)行一些過(guò)濾處理     const { key } = dataset || {};     return key;   },   onFinal: (data) => {     // 在觸發(fā)監(jiān)聽(tīng)調(diào)用一段時(shí)間 delay 后，會(huì)調(diào)用一次 onFinal 方法，可以進(jìn)行埋點(diǎn)上報(bào)     if (!data) return;     console.log('module view data', data);   }, });  // 內(nèi)置函數(shù)方法，如下： ob.connect(); // 開(kāi)始監(jiān)聽(tīng) ob.disconnect(); // 停止監(jiān)聽(tīng) ob.reconnect(); // 重置監(jiān)聽(tīng)

然后在我們的FreeImage圖片組件，添加可視區(qū)域加載圖片的功能，以下是部分代碼

import IntersectionObserver from 'utils/observer';  Component({   properties: {     src: String,     /**      * 是否開(kāi)啟可視區(qū)域加載圖片      */     observer: {       type: Boolean,       value: false,     },     ....   },    data: {     isObserver: false,     ...   },    lifetimes: {     attached() {       // 開(kāi)啟可視區(qū)域加載圖片       if (this.data.observer) {         this.createObserver();       }     },   },   methods: {     ...      /**      * 監(jiān)聽(tīng)圖片是否進(jìn)入可視區(qū)域      */     createObserver() {       const ob = new IntersectionObserver({         selector: '.free-image',         observeAll: true,         context: this,         onFinal: (data = []) => {           data.forEach((item: any) => {             this.setData({               isObserver: true,             });             ob.disconnect(); // 取消監(jiān)聽(tīng)           });         },       });        ob.connect(); // 開(kāi)始監(jiān)聽(tīng)     }   } })

<free-image observer src="{{ src }}" />

優(yōu)化效果

測(cè)試我們小程序首頁(yè)列表，使用圖片懶加載的效果

通過(guò)使用圖片懶加載的功能，減少圖片數(shù)量的加載，有效提高頁(yè)面加載性能。在上述我們已經(jīng)對(duì)圖片體積進(jìn)行優(yōu)化過(guò)，所以在我們小程序中，只有在網(wǎng)絡(luò)情況較差的情況下，才會(huì)自動(dòng)開(kāi)啟圖片懶加載功能。

優(yōu)化請(qǐng)求數(shù)

我們項(xiàng)目中有很多本地圖片資源，比如一些 icon 圖標(biāo)、標(biāo)簽類(lèi)切圖、背景圖、圖片按鈕等。而小程序分包大小是有限制：整個(gè)小程序所有分包大小不超過(guò) 20M，而單個(gè)分包/主包大小不能超過(guò) 2M。所以為了減輕小程序體積，本地圖片資源需要進(jìn)行調(diào)整，比如圖片壓縮、上傳到 CDN 服務(wù)器。這樣能減少了小程序主包大小，而大部分圖片都在騰訊云 CDN 服務(wù)器中，雖然可以加速資源的請(qǐng)求速度，當(dāng)頁(yè)面打開(kāi)需要同時(shí)下載大量的圖片的話(huà)，就會(huì)嚴(yán)重影響了用戶(hù)的使用體驗(yàn)。

針對(duì)此問(wèn)題，需要找到權(quán)衡點(diǎn)來(lái)實(shí)現(xiàn)來(lái)優(yōu)化請(qǐng)求數(shù)，首先我們把圖片資源進(jìn)行分類(lèi)，以及使用場(chǎng)景，最后確定我們方案如下：

• 較大體積的圖片，選擇上傳到 CDN 服務(wù)器
• 單色圖標(biāo)使用 iconfont 字體圖標(biāo)，多彩圖標(biāo)則使用svg格式
• 標(biāo)簽類(lèi)的圖片，則生成雪碧圖之后上傳到 CDN 服務(wù)器
• 圖片體積小于10KB，結(jié)合使用場(chǎng)景，則考慮base64 ，比如一張圖片體積為3KB的背景圖，由于小程序css background不支持本地圖片引入，可以使用 base64 方式實(shí)現(xiàn)

其他策略

大圖檢測(cè)

實(shí)現(xiàn)大圖檢測(cè)機(jī)制，及時(shí)發(fā)現(xiàn)圖片不符合規(guī)范的問(wèn)題，當(dāng)發(fā)現(xiàn)圖片尺寸太大，不符合商品圖尺寸標(biāo)準(zhǔn)時(shí)會(huì)進(jìn)行上報(bào)。在小程序開(kāi)發(fā)版/體驗(yàn)版中，當(dāng)我們?cè)O(shè)置開(kāi)啟Debug模式，圖片組件FreeImage會(huì)自動(dòng)檢測(cè)到大圖片時(shí)，顯示當(dāng)前圖片尺寸、以及設(shè)置圖片高亮/翻轉(zhuǎn)的方式提醒運(yùn)營(yíng)同學(xué)和設(shè)計(jì)同學(xué)進(jìn)行處理

加載失敗處理

使用騰訊云圖片處理功能，URL預(yù)處理轉(zhuǎn)換后得新 URL，可能會(huì)存在少量圖片不存在的異常場(chǎng)景導(dǎo)致加載失敗。遇到圖片加載失敗時(shí)，我們還是需要重新加載原始圖片 URL, 之后會(huì)將錯(cuò)誤圖片 URL 上報(bào)到監(jiān)控平臺(tái)，方便之后調(diào)整 URL 預(yù)處理轉(zhuǎn)換規(guī)則，同時(shí)也發(fā)現(xiàn)一部分錯(cuò)誤的圖片 URL 推動(dòng)業(yè)務(wù)修改。

這是我們圖片組件FreeImage 處理圖片加載失敗，以下是部分代碼

onError(event: WechatMiniprogram.TouchEvent) {   const { src, useCosImage } = this.data;    this.setData({     loading: false,     error: true,     lazy: 'error',   });    // 判斷是否騰訊云服務(wù)的圖片   if (useCosImage) {     wx.nextTick(() => {       // 重新加載原生圖片       this.setData({         formattedSrc: src, // src 是原圖地址       });     });   }    // 上報(bào)圖片加載失敗   app.aegis.report(AegisEnum.IMAGE_LOAD_FAIL, {     src,     errMsg: event?.detail.errMsg,   });    this.triggerEvent('error', event.detail); }

圖片請(qǐng)求數(shù)檢查

使用小程序開(kāi)發(fā)者工具的體驗(yàn)評(píng)分功能，體驗(yàn)評(píng)分是一項(xiàng)給小程序的體驗(yàn)好壞打分的功能，它會(huì)在小程序運(yùn)行過(guò)程中實(shí)時(shí)檢查，分析出一些可能導(dǎo)致體驗(yàn)不好的地方，并且定位出哪里有問(wèn)題，以及給出一些優(yōu)化建議。

通過(guò)體驗(yàn)評(píng)分的結(jié)果，可以分析我們存在短時(shí)間內(nèi)發(fā)起太多的圖片請(qǐng)求，以及存在圖片太大而有效顯示區(qū)域較小。所以根據(jù)分析的結(jié)果，開(kāi)發(fā)需要合理控制數(shù)量，可考慮使用雪碧圖技術(shù)、拆分域名或在屏幕外的圖片使用懶加載等。

上傳壓縮

圖片在上傳前在保持可接受的清晰度范圍內(nèi)同時(shí)減少文件大小，進(jìn)行合理壓縮?，F(xiàn)如今有很多不錯(cuò)的圖片壓縮插件工具，就不在詳情介紹了。

推薦一個(gè)比較優(yōu)秀的圖片壓縮網(wǎng)站：TinyPNG使用智能有損壓縮技術(shù)將您的 WebP, PNG and JPEG 圖片的文件大小降低