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]

Pelan pengoptimuman

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.

Gunakan format imej yang sesuai

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.

Kurangkan penghantaran rangkaian

Program mini menggunakan Tencent Cloud Image Server untuk menyediakan banyak fungsi pemprosesan imej, seperti 圖片縮放、圖片降質(zhì)，格式轉(zhuǎn)換，圖片裁剪、圖片圓角 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添加縮放參數(shù)添加降質(zhì)參數(shù) Mari kita lihat dulu keupayaan pemprosesan imej Tencent Cloud melalui pelayan imej Dengan menetapkan penskalaan/degradasi/WebP , satu saiz imej添加WebP參數(shù), saiz imej ialah

Saiz imej dikecilkan cukup kepada 800x800, dan kesannya adalah ketara. 246KB25.6KB80%

Penskalaan imej

Pada masa ini, latar belakang perniagaan memuat naik imej asal dan saiz imej asal mungkin lebih besar daripada saiz sebenar dipaparkan pada klien saiz besar akan membawa kepada pemuatan imej yang perlahan di satu pihak, dan pembaziran trafik pengguna di pihak yang lain. dan menjejaskan pengalaman pengguna. Dengan menambahkan parameter penskalaan, tentukan pelayan imej untuk menyampaikan saiz imej yang lebih kecil yang lebih sepadan dengan paparan sebenar .

sizeKemerosotan gambar

Pelayan gambar menyokong kualiti gambar, julat nilai ialah , nilai lalai ialah kualiti gambar asal, dan saiz gambar boleh dikurangkan dengan mengurangkan kualiti gambar Walau bagaimanapun, pengurangan kualiti yang terlalu banyak juga akan menjejaskan kesan paparan gambar Parameter pengurangan kualiti gambar lalai rangkaian ditetapkan kepada

, 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

/**
 * 設(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;];

Menggunakan WebP

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

Petua: Memandangkan pelayan imej semasa tidak menyokong penukaran SVG、GIF kepada WebP, tiada pemprosesan dilakukan

Pengoptimuman kesan

Uji memuatkan imej daripada antara muka senarai pada halaman utama program mini kami untuk membandingkan kesan sebelum dan selepas pengoptimuman

經(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í)觀測(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)聽調(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  />

優(yōu)化效果

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

通過使用圖片懶加載的功能，減少圖片數(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)行分類，以及使用場(chǎng)景，最后確定我們方案如下：

• 較大體積的圖片，選擇上傳到 CDN 服務(wù)器
• 單色圖標(biāo)使用 iconfont 字體圖標(biāo)，多彩圖標(biāo)則使用svg格式
• 標(biāo)簽類的圖片，則生成雪碧圖之后上傳到 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ī)范的問題，當(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)檢測(cè)到大圖片時(shí)，顯示當(dāng)前圖片尺寸、以及設(shè)置圖片高亮/翻轉(zhuǎn)的方式提醒運(yùn)營同學(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ù)檢查

使用小程序開發(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)行合理壓縮?，F(xiàn)如今有很多不錯(cuò)的圖片壓縮插件工具，就不在詳情介紹了。

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

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

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!