前言

關(guān)于前端的性能及體驗(yàn)問題，圖片的加載絕對(duì)是重中之重，尤其是在一些有著許多大圖的頁(yè)面，在網(wǎng)絡(luò)不穩(wěn)定或稍慢的時(shí)候，我們經(jīng)常能夠看到頁(yè)面中圖片的位置是一片空白，等圖片加載完成才開始慢慢渲染，在這段時(shí)間對(duì)用戶的體驗(yàn)其實(shí)是非常不友好的。

那么我們應(yīng)該如何來進(jìn)行優(yōu)化呢？

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

background-image

之前在需求中有使用過background-image來進(jìn)行優(yōu)化，先來看看效果：

優(yōu)化前：

優(yōu)化后：

從上述對(duì)比中可以清晰看出，優(yōu)化后的圖片加載體驗(yàn)相較于優(yōu)化前實(shí)現(xiàn)了顯著提升。優(yōu)化后，用戶所經(jīng)歷的白屏?xí)r間顯著縮短，取而代之的是圖片從模糊逐漸變得清晰的過程。這意味著用戶能夠更早地預(yù)覽到圖片的內(nèi)容，而無需再焦急地等待白屏消失，從而大大提升了用戶的體驗(yàn)感受！

原理

原理實(shí)際上很簡(jiǎn)單，從上圖我們可以看到優(yōu)化后的效果實(shí)際上是加載了兩張圖片，一張小圖（1.9k），一張?jiān)瓐D（2.8M），所有最開始看到的模糊圖片其實(shí)是這張小圖，最后變清晰看到的是原圖。

這里使用的技術(shù)也很簡(jiǎn)單，只需要CSS的background-image

?

background-image 屬性用于為一個(gè)元素設(shè)置一個(gè)或者多個(gè)背景圖像。

.pic_container {
    width: 300px;
    height: 375px;
    background-image: url("../assets/origin.jpg"), url("../assets/small.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

在繪制時(shí)，圖像以 z 方向堆疊的方式進(jìn)行。先指定的圖像會(huì)在之后指定的圖像上面繪制。因此指定的第一個(gè)圖像“最接近用戶”。

也就是說，原圖與縮略圖是疊在一起的，并且原圖在上縮略圖在下，在原圖還沒加載完成時(shí)，可以先看到下面的縮略圖，也就是那張模糊的圖片，等原圖加載完成之后，瀏覽器才會(huì)開始渲染原圖，由于兩張圖是在同一個(gè)位置，所以我們可以看到一個(gè)從模糊變清晰的過程。

img + background-image

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

如果想要使用img的話，可以使用img + background-image組合來實(shí)現(xiàn)。

<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>

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

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

為了更方便的復(fù)用，我們可以把它封裝成一個(gè)通用組件用來提升用戶體驗(yàn)，但該組件需要提供兩張圖片，一張?jiān)瓐D，一張縮略圖。

這樣做有的同學(xué)可能覺得很麻煩，那么有沒有更簡(jiǎn)便的方法呢？

漸進(jìn)式圖片

除了以上這兩種方案，我還見過另外一種方案實(shí)現(xiàn)的效果，但它并不依賴于background-image，只需要img元素就可以，比如：

這種效果應(yīng)該圖片格式的功勞，通常網(wǎng)站使用的 JPEG 的內(nèi)容顯示通常有兩種類型：

• 基線 JPEG
• 漸進(jìn)式 JPEG

一般來說我們見的比較多的應(yīng)該是基線JPEG

基線JPEG（Baseline JPEG）

基線 JPEG 最常見的應(yīng)用之一是在 Web 瀏覽器中呈現(xiàn)的圖像。基線 JPEG 算法在從網(wǎng)絡(luò)下載處理數(shù)據(jù)時(shí)逐行渲染圖像。當(dāng)數(shù)據(jù)從網(wǎng)絡(luò)到達(dá)計(jì)算機(jī)的緩沖區(qū)時(shí)，數(shù)據(jù)以流的形式進(jìn)行處理?；€式的編碼方式是圖片從上到下，從左到右地進(jìn)行處理和編碼。這就會(huì)形成我們查看大圖時(shí)比較常見的從上至下逐行顯示，即首先顯示圖像的頂部。然后它會(huì)逐行加載到底部，直到顯示出完整的圖像。

這種格式的圖片在面對(duì)越大的圖片時(shí)，往往需要我們等待越長(zhǎng)的時(shí)間才能看到完整圖片，比較容易讓網(wǎng)站流失用戶

漸進(jìn)式 JPEG（Progressive JPEG）

漸進(jìn)式 JPEG 以特定方式壓縮照片和圖形，與基線 JPEG 不同，PJPEG 在 Web 瀏覽器中呈現(xiàn)時(shí)，會(huì)首先給出模糊圖像的外觀。然后一點(diǎn)一點(diǎn)地開始圖片渲染，直到它顯示完全渲染的圖像。瀏覽器實(shí)際上是逐行解釋圖像，但在占位符中提供了完整圖像的模糊預(yù)覽。隨著 Web 瀏覽器的渲染引擎處理數(shù)據(jù)，圖像的對(duì)比度開始變得更清晰、更詳細(xì)。直到最后渲染完畢，用戶將看到完整的清晰圖像。

如何生成漸進(jìn)式圖片

通常情況下，設(shè)計(jì)師給我們提供的切圖素材通常就是普通格式的圖片，并不支持漸進(jìn)式加載，但實(shí)際上他們?cè)趯?dǎo)出圖片的時(shí)候可以選擇導(dǎo)出為漸進(jìn)式圖片圖片的，但他們可能并不會(huì)幫你這樣干。

那么我們自己能不能將非漸進(jìn)式圖片轉(zhuǎn)換為漸進(jìn)式圖片呢，答案是可以的！

GraphicsMagick

我們可以使用該工具庫(kù)來生成漸進(jìn)式圖片，我們只需要安裝node對(duì)應(yīng)的版本

npm install gm

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

function transformImage(imagePath, transform, generatePath, callback) {
  gm(imagePath)
    .interlace('Line') // 生成漸進(jìn)式圖片
    .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);
    }
);

如何選擇

首先明確的一點(diǎn)，漸進(jìn)式圖片的加載體驗(yàn)的確是要比普通圖片的加載要好上不少，無論是我們自己模擬的漸進(jìn)式加載還是通過依賴圖片本身算法來實(shí)現(xiàn)的，這幾種方案在各大網(wǎng)站都能看到在應(yīng)用。

漸進(jìn)式圖片的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

1. 移動(dòng)網(wǎng)絡(luò)流量?jī)?yōu)化：漸進(jìn)式圖片下載技術(shù)允許用戶僅初始下載圖片的一部分，有效降低圖像分辨率并減少數(shù)據(jù)使用量，特別適用于移動(dòng)網(wǎng)絡(luò)環(huán)境。
2. 減少加載等待時(shí)間：漸進(jìn)式圖片能夠讓用戶先快速預(yù)覽圖片的輪廓，隨后逐步加載更多圖片細(xì)節(jié)，提升用戶體驗(yàn)。

缺點(diǎn)：

1. 圖片格式轉(zhuǎn)換成本：由于大多數(shù)現(xiàn)有圖片采用普通壓縮格式，轉(zhuǎn)換為漸進(jìn)式格式需要額外的處理成本。
2. 兼容性：部分老舊瀏覽器（例如IE8）對(duì)漸進(jìn)式圖片格式的支持不足，盡管隨著時(shí)間推移，這些瀏覽器將逐漸被市場(chǎng)淘汰，但當(dāng)前仍可能影響部分用戶的瀏覽體驗(yàn)。