漸進式圖片載入：提升前端使用者體驗的藝術

南玖發表於2024-11-04
前端

前言

關於前端的效能及體驗問題，圖片的載入絕對是重中之重，尤其是在一些有著許多大圖的頁面，在網路不穩定或稍慢的時候，我們經常能夠看到頁面中圖片的位置是一片空白，等圖片載入完成才開始慢慢渲染，在這段時間對使用者的體驗其實是非常不友好的。

那麼我們應該如何來進行最佳化呢？

大家想說的是不是：把圖片壓縮一下不就好了？是的，圖片壓縮是我們前端開發過程必備的一步，但是光靠圖片壓縮並不能解決所有的圖片體驗問題，有些圖片本身就比較大，內容質量都比較高，此時壓縮圖片帶來的載入效能提升似乎就沒有那麼明顯了，這時候我們就可能需要使用一些技巧來進行最佳化了。

background-image

之前在需求中有使用過background-image來進行最佳化，先來看看效果：

最佳化前：

最佳化後：

從上述對比中可以清晰看出，最佳化後的圖片載入體驗相較於最佳化前實現了顯著提升。最佳化後，使用者所經歷的白屏時間顯著縮短，取而代之的是圖片從模糊逐漸變得清晰的過程。這意味著使用者能夠更早地預覽到圖片的內容，而無需再焦急地等待白屏消失，從而大大提升了使用者的體驗感受！

原理

原理實際上很簡單，從上圖我們可以看到最佳化後的效果實際上是載入了兩張圖片，一張小圖（1.9k），一張原圖（2.8M），所有最開始看到的模糊圖片其實是這張小圖，最後變清晰看到的是原圖。

這裡使用的技術也很簡單，只需要CSS的background-image

background-image 屬性用於為一個元素設定一個或者多個背景影像。
.pic_container {
    width: 300px;
    height: 375px;
    background-image: url("../assets/origin.jpg"), url("../assets/small.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

在繪製時，影像以 z 方向堆疊的方式進行。先指定的影像會在之後指定的影像上面繪製。因此指定的第一個影像“最接近使用者”。

也就是說，原圖與縮圖是疊在一起的，並且原圖在上縮圖在下，在原圖還沒載入完成時，可以先看到下面的縮圖，也就是那張模糊的圖片，等原圖載入完成之後，瀏覽器才會開始渲染原圖，由於兩張圖是在同一個位置，所以我們可以看到一個從模糊變清晰的過程。

img + background-image

雖然background-image天生就支援設定多個背景圖，但更多時候我們還是使用img來承載圖片，但是img的src屬性可沒有這一特點。是的，如果不使用JS的話光靠img也是做不到上面的效果的。

如果想要使用img的話，可以使用img + background-image組合來實現。

<div class="pic_container">
  <img src="../assets/origin.jpg" alt="origin" />
</div>

<style lang="scss" scoped>
.pic_container {
    background-image: url("../assets/small.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    img {
        width: 300px;
        height: 375px;
    }
}
</style>

效果跟上面那種類似，實際上原理也差不多。

需要注意的是：img元素佔位時在圖片還沒開始渲染時，它在頁面上實際上是透明的，所以我們能夠在看到下面的背景圖片，等img資源載入完成開始渲染時，才會慢慢遮蓋下面的背景圖。

為了更方便的複用，我們可以把它封裝成一個通用元件用來提升使用者體驗，但該元件需要提供兩張圖片，一張原圖，一張縮圖。

這樣做有的同學可能覺得很麻煩，那麼有沒有更簡便的方法呢？

漸進式圖片

除了以上這兩種方案，我還見過另外一種方案實現的效果，但它並不依賴於background-image，只需要img元素就可以，比如：

這種效果應該圖片格式的功勞，通常網站使用的 JPEG 的內容顯示通常有兩種型別：

  • 基線 JPEG
  • 漸進式 JPEG

一般來說我們見的比較多的應該是基線JPEG

基線JPEG（Baseline JPEG）

基線 JPEG 最常見的應用之一是在 Web 瀏覽器中呈現的影像。基線 JPEG 演算法在從網路下載處理資料時逐行渲染影像。當資料從網路到達計算機的緩衝區時，資料以流的形式進行處理。基線式的編碼方式是圖片從上到下，從左到右地進行處理和編碼。這就會形成我們檢視大圖時比較常見的從上至下逐行顯示，即首先顯示影像的頂部。然後它會逐行載入到底部，直到顯示出完整的影像。

這種格式的圖片在面對越大的圖片時，往往需要我們等待越長的時間才能看到完整圖片，比較容易讓網站流失使用者

漸進式 JPEG（Progressive JPEG）

漸進式 JPEG 以特定方式壓縮照片和圖形，與基線 JPEG 不同，PJPEG 在 Web 瀏覽器中呈現時，會首先給出模糊影像的外觀。然後一點一點地開始圖片渲染，直到它顯示完全渲染的影像。瀏覽器實際上是逐行解釋影像，但在佔位符中提供了完整影像的模糊預覽。隨著 Web 瀏覽器的渲染引擎處理資料，影像的對比度開始變得更清晰、更詳細。直到最後渲染完畢，使用者將看到完整的清晰影像。

如何生成漸進式圖片

通常情況下，設計師給我們提供的切圖素材通常就是普通格式的圖片，並不支援漸進式載入，但實際上他們在匯出圖片的時候可以選擇匯出為漸進式圖片圖片的，但他們可能並不會幫你這樣幹。

那麼我們自己能不能將非漸進式圖片轉換為漸進式圖片呢，答案是可以的！

GraphicsMagick

我們可以使用該工具庫來生成漸進式圖片，我們只需要安裝node對應的版本

npm install gm
const gm = require('gm').subClass({ imageMagick: true });
const path = require('path');

function transformImage(imagePath, transform, generatePath, callback) {
  gm(imagePath)
    .interlace('Line') // 生成漸進式圖片
    .resize(transform.width, transform.height)
    .write(generatePath, callback);
}

const basePath = path.join(__dirname, '../src/assets/');

transformImage(
    path.join(basePath, 'sy.pic.jpg'), 
    { width: 500, height: 500 }, 
    path.join(basePath, 'sy.line.jpeg'), 
    (res) => {
        console.log(res);
    }
);

如何選擇

首先明確的一點，漸進式圖片的載入體驗的確是要比普通圖片的載入要好上不少，無論是我們自己模擬的漸進式載入還是透過依賴圖片本身演算法來實現的，這幾種方案在各大網站都能看到在應用。

漸進式圖片的優缺點

優點：

  1. 行動網路流量最佳化：漸進式圖片下載技術允許使用者僅初始下載圖片的一部分，有效降低影像解析度並減少資料使用量，特別適用於行動網路環境。
  2. 減少載入等待時間：漸進式圖片能夠讓使用者先快速預覽圖片的輪廓，隨後逐步載入更多圖片細節，提升使用者體驗。

缺點：

  1. 圖片格式轉換成本：由於大多數現有圖片採用普通壓縮格式，轉換為漸進式格式需要額外的處理成本。
  2. 相容性：部分老舊瀏覽器（例如IE8）對漸進式圖片格式的支援不足，儘管隨著時間推移，這些瀏覽器將逐漸被市場淘汰，但當前仍可能影響部分使用者的瀏覽體驗。

相關文章