前言

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

那么我們應該如何來進行優化呢？

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

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）對漸進式圖片格式的支持不足，盡管隨著時間推移，這些瀏覽器將逐漸被市場淘汰，但當前仍可能影響部分用戶的瀏覽體驗。