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

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

優(yōu)化方案

基于上述問題的主要問題是圖片數(shù)量和圖片體積，所以應(yīng)該怎么提高圖片加載速度，提升用戶體驗(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é)如下：

使用合適的圖片格式通常可以帶來更小的圖片字節(jié)大小，通過合理壓縮率，可以減少圖片大小，且不影響圖片質(zhì)量。

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

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

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

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

圖片縮放

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

圖片降質(zhì)

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

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

/**
 * 根據(jù)網(wǎng)絡(luò)環(huán)境設(shè)置不同質(zhì)量圖片
 */
const ImageQuality: Record<string, number> = {
  wifi: 85,
  &#39;5g&#39;: 85,
  &#39;4g&#39;: 80,
  &#39;3g&#39;: 60,
  &#39;2g&#39;: 60,
};

/**
 * 獲取圖片質(zhì)量
 */
export const getImageQuality = () => ImageQuality[getApp().globalData.networkType ?? &#39;wifi&#39;];

使用 WebP

前面簡單介紹不同的圖片格式都有各自的優(yōu)缺點(diǎn)和使用場景，其中 WebP 圖片格式提供有損壓縮與無損壓縮的圖片格式。按照Google官方的數(shù)據(jù)，與PNG相比，WebP無損圖像的字節(jié)數(shù)要少26％，WebP有損圖像比同類JPG圖像字節(jié)數(shù)少25-34％。現(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ù)用戶都已經(jīng)支持了 Can I use... Support tables for HTML5, CSS3, etc，

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

優(yōu)化效果

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

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

圖片懶加載

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

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

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

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

import IntersectionObserver from 'utils/observer/observer';

const ob = new IntersectionObserver({
  selector: '.goods-item', // 指定監(jiān)聽的目標(biāo)節(jié)點(diǎn)元素
  observeAll: true, // 是否同時(shí)觀測多個(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)聽調(diào)用時(shí)，觸發(fā) onEach 方法，可以對(duì)數(shù)據(jù)進(jìn)行一些過濾處理
    const { key } = dataset || {};
    return key;
  },
  onFinal: (data) => {
    // 在觸發(fā)監(jiān)聽調(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(); // 開始監(jiān)聽
ob.disconnect(); // 停止監(jiān)聽
ob.reconnect(); // 重置監(jiān)聽

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

import IntersectionObserver from 'utils/observer';

Component({
  properties: {
    src: String,
    /**
     * 是否開啟可視區(qū)域加載圖片
     */
    observer: {
      type: Boolean,
      value: false,
    },
    ....
  },

  data: {
    isObserver: false,
    ...
  },

  lifetimes: {
    attached() {
      // 開啟可視區(qū)域加載圖片
      if (this.data.observer) {
        this.createObserver();
      }
    },
  },
  methods: {
    ...

    /**
     * 監(jiān)聽圖片是否進(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)聽
          });
        },
      });

      ob.connect(); // 開始監(jiān)聽
    }
  }
})

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

優(yōu)化效果

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

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

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

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

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

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

其他策略

大圖檢測

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

加載失敗處理

使用騰訊云圖片處理功能，URL預(yù)處理轉(zhuǎn)換后得新 URL，可能會(huì)存在少量圖片不存在的異常場景導(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ù)檢查

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

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

上傳壓縮

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

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

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問：編程入門！！

以上是深入聊聊小程序中怎么進(jìn)行圖片優(yōu)化的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！