Cet article partagera avec vous une application pratique d'un mini programme pour voir comment optimiser les images dans le mini programme. J'espère qu'il sera utile à tout le monde !

L'optimisation des performances front-end et l'optimisation des images sont des liens essentiels et importants Le rendu des images est indispensable à la composition de la plupart des pages d'un site Web. Surtout dans les projets de commerce électronique, il y a souvent un grand nombre d'images, telles que des images de bannières publicitaires, des images de navigation dans les menus, des images de liste de produits, etc. Le chargement d'un grand nombre d'images et de tailles d'image excessivement grandes affectent souvent la vitesse de chargement des pages, ce qui entra?ne une mauvaise expérience utilisateur. [Recommandations d'apprentissage associées?: Tutoriel de développement de mini-programmes]

Solution d'optimisation

Sur la base des problèmes ci-dessus, le problème principal est le nombre d'images et la taille des images, alors comment améliorer la vitesse de chargement des images et améliorer l'expérience utilisateur. En fait, il existe de nombreuses excellentes solutions d’optimisation d’image, et nous pouvons tous en tirer des le?ons. Enfin, nous optimisons l’image dans son ensemble dans différentes directions.

Utilisez les formats d'image appropriés

Les formats d'image WEB actuellement largement utilisés incluent JPEG/JPG, PNG, GIF, WebP, Base64, SVG, etc. Ces formats ont leurs propres caractéristiques. :

L'utilisation d'un format d'image approprié peut généralement entra?ner une taille d'octet d'image plus petite. Avec un taux de compression raisonnable, la taille de l'image peut être réduite sans affecter la qualité de l'image.

Réduire la transmission réseau

L'applet utilise Tencent Cloud Image Server, qui fournit de nombreuses fonctions de traitement d'image, telles que la mise à l'échelle de l'image, la dégradation de l'image, la conversion de format, le recadrage de l'image, l'arrondi de l'image, etc. Fonction. Ces fonctions peuvent être obtenues en ajoutant des paramètres spécifiés à l'image URL. Le serveur d'images traitera l'image à l'avance en fonction des paramètres définis et l'enregistrera sur le serveur CDN, ce qui réduit considérablement la taille du transfert d'image. 圖片縮放、圖片降質(zhì)，格式轉(zhuǎn)換，圖片裁剪、圖片圓角等功能。這些功能可以通過在圖片URL中添加規(guī)定參數(shù)就能實現(xiàn)，圖片服務(wù)器會根據(jù)參數(shù)設(shè)置提前將圖片處理完成并保存到CDN服務(wù)器，這樣大大的減少圖片傳輸大小。

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

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

圖片縮放

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

圖片降質(zhì)

圖片服務(wù)器支持圖片質(zhì)量，取值范圍 0-100，默認值為原圖質(zhì)量，通過降低圖片質(zhì)量可以減少圖片大小，但是質(zhì)量降低太多也會影響圖片的顯示效果，網(wǎng)絡(luò)默認降圖片質(zhì)量參數(shù)設(shè)置為85，同時通過小程序提供的：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ì)量會動態(tài)設(shè)置為80，對于大部分業(yè)務(wù)情況，一方面可以大幅減少圖片下載大小和保證用戶使用體驗，另一方面節(jié)省用戶瀏覽 ，目前添加圖片降質(zhì)參數(shù)至少可以減少30-40%

Actuellement, les URL d'image renvoyées par l'interface backend sont toutes sans prétraitement des paramètres d'image. Par exemple, une image de produit haute définition de taille 800x800 a un volume d'environ 300k. , cela peut donc facilement entra?ner un chargement et un rendu lents des images, une consommation élevée de trafic utilisateur et affecter sérieusement l'expérience utilisateur. Par conséquent, nous combinons la fonction de traitement d'image de Tencent Cloud. Avant de charger l'image réseau, nous détectons d'abord s'il s'agit de l'image URL du nom de domaine Tencent Cloud si le nom de domainecode> correspond, l'image <code>URL effectue un prétraitement, qui comprend Ajouter des paramètres de mise à l'échelle, Ajouter des paramètres de dégradation et Ajouter des paramètres WebP code> pour réduire la transmission de l'image sur le réseau. Taille ???? Examinons d'abord une image qui utilise les capacités de traitement d'image de Tencent Cloud via le serveur d'image. En définissant la mise à l'échelle/la dégradation/WebP, une image a une taille de <code>800x800<.> et un volume de <code>246 Ko , la sortie finale est de 25,6 Ko, la taille de l'image est réduite de 80 % et l'effet est remarquable. ??????

??Mise à l'échelle de l'image??

??Actuellement, le backend de l'entreprise télécharge les images originales, et la taille de l'image originale peut être plus grande que la taille réelle affichée sur le client. le chargement de l'image est lent et, d'un autre c?té, l'image originale est téléchargée. D'une part, cela entra?ne un gaspillage du trafic utilisateur. Si une image de grande taille est chargée, cela affectera également les performances de rendu. l'utilisateur se sent coincé et affecte l'expérience utilisateur. En ajoutant un paramètre de mise à l'échelle, spécifiez le serveur d'images pour fournir une taille d'image plus petite et plus cohérente avec la taille d'affichage réelle. ??

??Dégradation de l'image??

??Le serveur d'images prend en charge la qualité d'image, la plage de valeurs est 0-100, la valeur par défaut est l'original qualité de l'image, la taille de l'image peut être réduite en réduisant la qualité de l'image, mais une réduction trop importante de la qualité affectera également l'effet d'affichage de l'image. Le paramètre de réduction de la qualité de l'image par défaut du réseau est défini sur 85, et il est fourni via le mini programme?: wx Les interfaces de .getNetworkType, wx.onNetworkStatusChange et offNetworkStatusChange surveillent les changements d'état du réseau pour obtenir le le type de réseau de l'utilisateur actuel networkType, tel que user. Pour le réseau 4G actuellement utilisé, la qualité de l'image sera définie dynamiquement sur 80. Pour la plupart des entreprises. Dans certaines situations, d'une part, cela peut réduire considérablement la taille du téléchargement de l'image et garantir l'expérience utilisateur. D'autre part, cela peut réduire considérablement la taille du téléchargement de l'image et garantir l'expérience utilisateur. D'une part, cela permet aux utilisateurs de naviguer. Actuellement, l'ajout de paramètres de dégradation d'image peut réduire la taille de l'image d'au moins 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;];

Utilisation de WebP

Les différents formats d'image ont leurs propres avantages, inconvénients et scénarios d'utilisation. Le format d'image WebP fournit une compression avec perte et des formats d'image de compression sans perte. Selon les données officielles de Google, par rapport au PNG, les images WebP sans perte contiennent 26?% d'octets en moins , Les images WebP avec perte contiennent 25 à 34?% d'octets en moins que les images JPG similaires. De nos jours, les produits des grandes sociétés Internet, telles que Taobao, JD.com et Meituan, sont utilisés.

WebP 圖片格式提供有損壓縮與無損壓縮的圖片格式。按照Google官方的數(shù)據(jù)，與PNG相比，WebP無損圖像的字節(jié)數(shù)要少26％，WebP有損圖像比同類JPG圖像字節(jié)數(shù)少25-34％?，F(xiàn)如今各大互聯(lián)網(wǎng)公司的產(chǎn)品都已經(jīng)使用了，如淘寶、京東和美團等。

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

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

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

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

優(yōu)化效果

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

Exemple de lien WebP (GIF, PNG, JPG vers Webp), ressentez intuitivement l'avantage de WebP en termes de taille d'image.

優(yōu)化前	圖片數(shù)	不支持 WebP	支持 WebP
2300K	10	523K (降低 77%+)	315K (降低 86%+)
248M	100	69M (降低 72%+)	38M (降低 84%+)Mettez-en un ici

Dans la compatibilité de WebP sur le terminal mobile, la plupart des utilisateurs le supportent déjàPuis-je utiliser... Tableaux de support pour HTML5, CSS3, etc,

??

?? Pour le format d'image png/jpg, ajoutez automatiquement le paramètre WebP et convertissez-le au format d'image WebP. Bien que WebP puisse prendre plus de temps à décoder que les images png/jpg, la vitesse relative de transmission du réseau est toujours grandement améliorée. Actuellement, la version du système ios 13 représente une grande proportion d'utilisateurs. L'applet obtient la version actuelle du système et n'ajoute pas le paramètre WebP pour le traitement de la rétrogradation.

import IntersectionObserver from 'utils/observer/observer';

const ob = new IntersectionObserver({
  selector: '.goods-item', // 指定監(jiān)聽的目標節(jié)點元素
  observeAll: true, // 是否同時觀測多個目標節(jié)點
  context: this, // 小程序 this 對象實例
  delay: 200, // 調(diào)用 onFinal 方法的間隔時間，默認 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)聽

??Conseils?: étant donné que le serveur d'images actuel ne prend pas en charge la conversion de SVG, GIF en WebP, aucun traitement n'est effectué

??Effet d'optimisation??

??Testez le chargement des images depuis l'interface de liste sur la page d'accueil de notre mini programme pour comparer l'effet avant et après optimisation

< table>Avant optimisationNombre d'images Ne prend pas en charge WebP< th align="left">Support WebP??2300K??10??523K (réduit de 77%+)??315K (réduit de 86%+) ????248M??100??69M (réduit de 72%+)??< td align="left">38M ( Réduit de 84%+)????????

經(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)聽的目標節(jié)點元素
  observeAll: true, // 是否同時觀測多個目標節(jié)點
  context: this, // 小程序 this 對象實例
  delay: 200, // 調(diào)用 onFinal 方法的間隔時間，默認 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  />

優(yōu)化效果

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

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

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

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

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

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

其他策略

大圖檢測

實現(xiàn)大圖檢測機制，及時發(fā)現(xiàn)圖片不符合規(guī)范的問題，當(dāng)發(fā)現(xià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)同時減少文件大小，進行合理壓縮?，F(xiàn)如今有很多不錯的圖片壓縮插件工具，就不在詳情介紹了。

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!