這篇文章跟大家分享一個小程式實戰(zhàn)，看看小程式中怎麼進行圖片優(yōu)化，希望對大家有幫助！

前端的效能最佳化，圖片優(yōu)化是不可或缺的重要環(huán)節(jié)，大部分網(wǎng)站頁面的組成都少不了圖片的渲染。尤其在電商類項目，往往存在大量的圖片，如 banner 廣告圖，菜單導(dǎo)航圖，商品列表圖等。圖片載入數(shù)量多以及圖片體積過大往往會影響頁面載入速度，造成不良的使用者體驗。 【相關(guān)學(xué)習(xí)推薦：小程式開發(fā)教學(xué)】

優(yōu)化方案

基於上述問題的主要問題是圖片數(shù)量和圖片體積，所以應(yīng)該怎麼提高圖片載入速度，提升使用者體驗。其實圖片優(yōu)化有非常多且優(yōu)秀的方案，都可以從中藉鑑，最後我們將圖片進行不同方向的整體優(yōu)化。

使用適當(dāng)?shù)膱D片格式

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

使用合適的圖片格式通?？梢詭砀〉膱D片位元組大小，透過合理壓縮率，可以減少圖片大小，且不影響圖片品質(zhì)。

降低網(wǎng)路傳輸

小程式使用騰訊雲(yún)圖片伺服器，提供許多圖片處理功能，例如圖片縮放、圖片降質(zhì)，格式轉(zhuǎn)換，圖片裁切、圖片圓角等功能。這些功能可以透過在圖片URL中加入規(guī)定參數(shù)就能實現(xiàn)，圖片伺服器會根據(jù)參數(shù)設(shè)定提前將圖片處理完成並儲存到CDN伺服器，如此大大的減少圖片傳輸大小。

目前後臺介面下發(fā)回傳的圖片URL 都是未設(shè)定圖片參數(shù)預(yù)處理，例如一張800x800 尺寸高畫質(zhì)的商品圖，體積大概300k 左右，這樣就很容易導(dǎo)致圖片載入和渲染慢、使用者流量消耗大，嚴(yán)重影響了使用者體驗。所以我們結(jié)合騰訊雲(yún)的圖片處理功能，網(wǎng)路圖片載入前，先偵測是否為騰訊雲(yún)網(wǎng)域的圖片URL，如果網(wǎng)域名稱匹配，對圖片URL進行預(yù)處理，預(yù)處理包含新增縮放參數(shù)，新增降質(zhì)參數(shù)，新增WebP參數(shù)的方式減少圖片網(wǎng)路傳輸大小

我們先看一張透過圖片伺服器是騰訊雲(yún)圖片處理能力，透過設(shè)定圖片縮放/降質(zhì)/WebP，一張尺寸800x800，體積246KB圖片，最後輸出生成25.6KB，圖片體積足足減少了80%，效果顯著。

圖片縮放

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

圖片降質(zhì)

圖片伺服器支援圖片質(zhì)量，取值範(fàn)圍0-100，預(yù)設(shè)值為原圖質(zhì)量，透過降低圖片品質(zhì)可以減少圖片大小，但是品質(zhì)降低太多也會影響圖片的顯示效果，網(wǎng)路預(yù)設(shè)降圖片品質(zhì)參數(shù)設(shè)定為85，同時透過小程式提供的：wx.getNetworkType、wx.onNetworkStatusChange、offNetworkStatusChange的介面監(jiān)聽網(wǎng)路狀態(tài)變化來取得目前使用者的網(wǎng)路類型networkType##4G網(wǎng)絡(luò)，則圖片品質(zhì)會動態(tài)設(shè)定為80，對於大部分業(yè)務(wù)狀況，一方面可以大幅減少圖片下載大小和保證使用者使用體驗，另一方面節(jié)省使用者瀏覽，目前新增圖片降質(zhì)參數(shù)至少可以減少

/**
 * 設(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)缺點和使用場景，其中WebP 圖片格式提供有損壓縮與無損壓縮的圖片格式。依照Google官方的數(shù)據(jù)，與PNG相比，WebP無損圖像的位元組數(shù)要少26％， WebP有損圖像比同類JPG圖像位元組數(shù)少25-34％?，F(xiàn)如今各大網(wǎng)路公司的產(chǎn)品都已經(jīng)使用了，如淘寶、京東和美團等。

這裡放一個 WebP 範(fàn)例連結(jié)（GIF、PNG、JPG 轉(zhuǎn) Webp），直覺感受 WebP 在圖片大小上的優(yōu)點。

在行動端中WebP的相容性，大部分?jǐn)?shù)位用戶都已經(jīng)支援了Can I use... Support tables for HTML5, CSS3, etc，

針對png/jpg圖片格式，自動新增WebP參數(shù)，轉(zhuǎn)成WebP圖片格式。雖然WebP比較png/jpg圖片解碼可能需要更長時間，但相對網(wǎng)路傳輸速度提升還是很大。目前 ios 13系統(tǒng)版本有不少用戶量的佔比，小程式端取得目前系統(tǒng)版本，降級處理不加入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格式
};

提示：由於目前圖片伺服器不支援、SVG、GIF轉(zhuǎn)WebP，並沒有做處理

優(yōu)化效果

測試我們小程式首頁清單介面載入圖片，來比較優(yōu)化前後的效果

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

圖片懶加載

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

實現(xiàn)原理

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

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

import IntersectionObserver from 'utils/observer/observer';

const ob = new IntersectionObserver({
  selector: '.goods-item', // 指定監(jiān)聽的目標(biāo)節(jié)點元素
  observeAll: true, // 是否同時觀測多個目標(biāo)節(jié)點
  context: this, // 小程序 this 對象實例
  delay: 200, // 調(diào)用 onFinal 方法的間隔時間，默認(rèn) 200ms
  onEach: ({ dataset }) => {
    // 每一次觸發(fā)監(jiān)聽調(diào)用時，觸發(fā) onEach 方法，可以對數(shù)據(jù)進行一些過濾處理
    const { key } = dataset || {};
    return key;
  },
  onFinal: (data) => {
    // 在觸發(fā)監(jiān)聽調(diào)用一段時間 delay 后，會調(diào)用一次 onFinal 方法，可以進行埋點上報
    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)聽圖片是否進入可視區(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)對圖片體積進行優(yōu)化過，所以在我們小程序中，只有在網(wǎng)絡(luò)情況較差的情況下，才會自動開啟圖片懶加載功能。

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

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

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

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

其他策略

大圖檢測

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

加載失敗處理

使用騰訊云圖片處理功能，URL預(yù)處理轉(zhuǎn)換后得新 URL，可能會存在少量圖片不存在的異常場景導(dǎo)致加載失敗。遇到圖片加載失敗時，我們還是需要重新加載原始圖片 URL, 之后會將錯誤圖片 URL 上報到監(jiān)控平臺，方便之后調(diào)整 URL 預(yù)處理轉(zhuǎn)換規(guī)則，同時也發(fā)現(xiàn)一部分錯誤的圖片 URL 推動業(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 是原圖地址
      });
    });
  }

  // 上報圖片加載失敗
  app.aegis.report(AegisEnum.IMAGE_LOAD_FAIL, {
    src,
    errMsg: event?.detail.errMsg,
  });

  this.triggerEvent('error', event.detail);
}

圖片請求數(shù)檢查

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

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

上傳壓縮

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

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

更多編程相關(guān)知識，請訪問：編程入門??！

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

熱AI工具

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

人工智慧驅(qū)動的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

如何修復(fù)KB5060533無法在Windows 10中安裝？

4 週前 By DDD

沙丘：覺醒 - 在哪裡獲得絕緣織物

4 週前 By Jack chen

Gmail登錄：如何註冊，登錄或登錄Gmail -Minitool

1 個月前 By Jack chen

如何修復(fù)KB5060999無法在Windows 11中安裝？

3 週前 By DDD

污染的公會指南：阿瓦隆的淪陷

4 週前 By Jack chen

顯示更多

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6

視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡

8518

17

Java教學(xué)

1744

16

CakePHP 教程

1598

56

Laravel 教程

1538

28

PHP教程

1397

31

顯示更多

Related knowledge

使用Python開發(fā)微信小程式 Jun 17, 2023 pm 06:34 PM

隨著行動互聯(lián)網(wǎng)技術(shù)和智慧型手機的普及，微信成為了人們生活中不可或缺的一個應(yīng)用。而微信小程式則讓人們可以在不需要下載安裝應(yīng)用程式的情況下，直接使用小程式來解決一些簡單的需求。本文將介紹如何使用Python來開發(fā)微信小程式。一、準(zhǔn)備工作在使用Python開發(fā)微信小程式之前，需要先安裝相關(guān)的Python函式庫。這裡推薦使用wxpy和itchat這兩個函式庫。 wxpy是一個微信機器

實作微信小程式中的卡片翻轉(zhuǎn)特效 Nov 21, 2023 am 10:55 AM

實作微信小程式中的卡片翻轉(zhuǎn)特效在微信小程式中，實現(xiàn)卡片翻轉(zhuǎn)特效是一種常見的動畫效果，可以提升使用者體驗和介面互動的吸引力。以下將具體介紹如何在微信小程式中實現(xiàn)卡片翻轉(zhuǎn)的特效，並提供相關(guān)程式碼範(fàn)例。首先，需要在小程式的頁面佈局檔案中定義兩個卡片元素，一個用於顯示正面內(nèi)容，一個用於顯示背面內(nèi)容，具體範(fàn)例程式碼如下：<!--index.wxml-->&l

支付寶上線「漢字拾光-生僻字」小程序，用於徵集、補充生僻字庫 Oct 31, 2023 pm 09:25 PM

本站10月31日消息，今年5月27日，螞蟻集團宣布啟動“漢字拾光計劃”，最近又迎來新進展：支付寶上線“漢字拾光-生僻字”小程序，用於向社會徵集生僻字，補充生僻字庫，同時提供不同的生僻字輸入體驗，以幫助完善支付寶內(nèi)的生僻字輸入方法。目前，用戶搜尋「漢字拾光」、「生僻字」等關(guān)鍵字就可以進入「生僻字」小程式。在小程式裡，使用者可以提交尚未被系統(tǒng)辨識輸入的生僻字圖片，支付寶工程師確認(rèn)後，將會對字庫進行補錄入。本站注意到，使用者也可以在小程式體驗最新的拆字輸入法，這項輸入法針對讀音不明確的生僻字設(shè)計。用戶拆

小程式能用react嗎 Dec 29, 2022 am 11:06 AM

小程式能用react，其使用方法：1、基於「react-reconciler」實作一個渲染器，產(chǎn)生一個DSL；2、建立一個小程式元件，去解析和渲染DSL；3、安裝npm，並執(zhí)行開發(fā)者工具中的建構(gòu)npm；4、在自己的頁面中引入包，再利用api即可完成開發(fā)。

uniapp如何實現(xiàn)小程式和H5的快速轉(zhuǎn)換 Oct 20, 2023 pm 02:12 PM

uniapp如何實現(xiàn)小程式和H5的快速轉(zhuǎn)換，需要具體程式碼範(fàn)例近年來，隨著行動網(wǎng)路的發(fā)展和智慧型手機的普及，小程式和H5成為了不可或缺的應(yīng)用形式。而uniapp作為一個跨平臺的開發(fā)框架，可以在一套程式碼的基礎(chǔ)上，快速實現(xiàn)小程式和H5的轉(zhuǎn)換，大大提高了開發(fā)效率。本文將介紹uniapp如何實現(xiàn)小程式和H5的快速轉(zhuǎn)換，並給出具體的程式碼範(fàn)例。一、uniapp簡介unia

教你如何在小程式中用公眾號範(fàn)本訊息（附詳細(xì)想法） Nov 04, 2022 pm 04:53 PM

這篇文章給大家?guī)砹岁P(guān)於微信小程式的相關(guān)問題，其中主要介紹瞭如何在小程式中用公眾號範(fàn)本訊息，下面一起來看一下，希望對大家有幫助。

用Python編寫簡單的聊天程式教程 May 08, 2023 pm 06:37 PM

實現(xiàn)思路x01服務(wù)端的建立首先,在服務(wù)端,使用socket進行訊息的接受,每接受一個socket的請求,就開啟一個新的線程來管理訊息的分發(fā)與接受,同時,又存在一個handler來管理所有的線程,從而實現(xiàn)對聊天室的各種功能的處理x02客戶端的建立客戶端的建立就要比服務(wù)端簡單多了,客戶端的作用只是對消息的發(fā)送以及接受,以及按照特定的規(guī)則去輸入特定的字符從而實現(xiàn)不同的功能的使用,因此,在客戶端這裡,只需要去使用兩個線程,一個是專門用於接受消息,一個是專門用於發(fā)送消息的至於為什麼不用一個呢,那是因為,只

PHP與小程式的地理位置定位與地圖顯示 Jul 04, 2023 pm 04:01 PM

PHP與小程式的地理位置定位與地圖顯示地理位置定位與地圖顯示在現(xiàn)代科技中已經(jīng)成為了必備的功能之一。隨著行動裝置的普及，人們對於定位和地圖顯示的需求也越來越高。在開發(fā)過程中，PHP和小程式是常見的兩種技術(shù)選擇。本文將為大家介紹PHP與小程式中的地理位置定位與地圖顯示的實作方法，並附上對應(yīng)的程式碼範(fàn)例。一、PHP中的地理位置定位在PHP中，我們可以使用第三方地理位

See all articles