現代圖片性能優化及體驗優化指南 - 響應式圖片方案

本文是系列第二篇。系列文章：

1. 現代圖片性能優化及體驗優化指南 - 圖片類型及 Picture 標籤的使用

圖片資源，在我們的業務中可謂是佔據了非常大頭的一環，尤其是其對帶寬的消耗是十分巨大的。

對圖片的性能優化及體驗優化在今天就顯得尤爲重要。本文，就將從各個方面闡述，在各種新特性滿頭飛的今天，我們可以如何儘可能的對我們的圖片資源，進行性能優化及體驗優化。

適配不同的屏幕尺寸及 DPR

下一個模塊，我們來看看圖片資源如何更好的適配不同的屏幕尺寸。

這裏首先會涉及一個預備知識，屏幕的 DPR 值，那麼，什麼是 DPR 呢？要了解 DPR，又需要知道什麼是設備獨立像素 以及 物理像素。

設備獨立像素

以 iPhone6/7/8爲例，這裏我們打開 Chrome 開發者工具：

這裏的 375 * 667 表示的是什麼呢，表示的是設備獨立像素（DIP），也可以理解爲 CSS 像素，也稱爲邏輯像素：

設備獨立像素 = CSS 像素 = 邏輯像素

如何記憶呢？這裏使用 CSS 像素來記憶，也就是說。我們設定一個寬度爲 375px 的 div，剛好可以充滿這個設備的一行，配合高度 667px ，則 div 的大小剛好可以充滿整個屏幕。

物理像素

OK，那麼，什麼又是物理像素呢。我們到電商網站購買手機，都會看一看手機的參數，以 JD 上的 iPhone7 爲例：

可以看到，iPhone7 的分辨率是 1334 x 750，這裏描述的就是屏幕實際的物理像素。

物理像素，又稱爲設備像素。顯示屏是由一個個物理像素點組成的，1334 x 750 表示手機分別在垂直和水平上所具有的像素點數。通過控制每個像素點的顏色，就可以使屏幕顯示出不同的圖像，屏幕從工廠出來那天起，它上面的物理像素點就固定不變了，單位爲pt。

設備像素 = 物理像素

DPR（Device Pixel Ratio） 設備像素比

OK，有了上面兩個概念，就可以順理成章引出下一個概念。DPR（Device Pixel Ratio） 設備像素比，這個與我們通常說的視網膜屏（多倍屏，Retina屏）有關。

設備像素比描述的是未縮放狀態下，物理像素和設備獨立像素的初始比例關係。

簡單的計算公式：

DPR = 物理像素 / 設備獨立像素

我們套用一下上面 iPhone7 的數據（取設備的物理像素寬度與設備獨立像素寬度進行計算）：

iPhone7’s DPR = iPhone7’s 物理像素寬度 / iPhone7's 設備獨立像素寬度 = 2

750 / 375 = 2
或者是 1334 / 667 = 2

可以得到 iPhone7 的 dpr 爲 2。也就是我們常說的視網膜屏幕。

視網膜（Retina）屏幕是蘋果公司"發明"的一個營銷術語。 蘋果公司將 dpr > 1 的屏幕稱爲視網膜屏幕。

在視網膜屏幕中，以 dpr = 2 爲例，把 4(2x2) 個像素當 1 個像素使用，這樣讓屏幕看起來更精緻，但是元素的大小本身卻不會改變：

OK，我們再來看看 iPhone XS Max：

它的物理像素如上圖是 2688 x 1242，

它的 CSS 像素是 896 x 414，很容易得出 iPhone XS Max 的 dpr 爲 3。

爲不同 DPR 屏幕，提供恰當的圖片

那麼，DPR 和圖片適配有什麼關係呢？

舉個例子，同樣的 CSS 像素大小下，屏幕如果有不同 DPR，同樣大小的圖片渲染出來的效果不盡相同。

我們以 dpr = 3 的手機爲例子，在 300 x 389 CSS 像素大小的範圍內，渲染 1倍/2倍/3倍 圖的效果如下：

實際圖片所佔的物理像素爲 900 x 1167。

可以看到，在高 DPR 設備下提供只有 CSS 像素大小的圖片，是非常模糊的。

因此，爲了在不同的 DPR 屏幕下，讓圖片看起來都不失真，我們需要爲不同 DPR 的圖片，提供不同大小的圖片。

那麼，有哪些可行的解決方案呢？

方案一：無腦多倍圖

假設，在移動端假設我們需要一張 CSS 像素爲 300 x 200 的圖像，考慮到現在已經有了 dpr = 3 的設備，那麼要保證圖片在 dpr = 3 的設備下也正常高清展示，我們最大可能需要一張 900 x 600 的原圖。

這樣，不管設備的 dpr 是否爲 3，我們統一都使用 3 倍圖。這樣即使在 dpr = 1，dpr = 2 的設備上，也能非常好的展示圖片。

當然這樣並不可取，會造成大量帶寬的浪費。

現代瀏覽器，提供了更好的方式，讓我們能夠根據設備 dpr 的不同，提供不同尺寸的圖片。

方案二：媒體查詢

方案二，我們可以考慮使用媒體查詢。到今天，我們可以通過相應的媒體查詢，得知當前的設備的 DPR 值，這樣，我們就可以在對應的媒體查詢中，使用對應的圖片。

像是這樣：

#id { 
    background: url([email protected]) 
}
@media (device-pixel-ratio: 2) {
    #id { 
        background: url([email protected]) 
    }
}
@media (device-pixel-ratio: 3) {
    #id { 
        background: url([email protected]) 
    }
}

這個方案的缺點在於：

1. 要寫的代碼可能太多了，而且，可能存在一些介於 1_2，23 之間的 DPR 值，不好窮舉出所有場景
2. 需要注意語法需要的兼容性，需要添加前綴，譬如 -webkit-min-device-pixel-ratio，當然這個可以由 autoprefixer 輔助解決

方案三：CSS 配合 image-set 語法

image-set 屬於 CSS background 中的一種語法，image-set() 函數爲設備提供最合適的圖像分辨率，它提供一組圖像選項，每個選項都有一個相關的 DPR 聲明，瀏覽器將從中選擇最適合設備的圖像進行設置。

什麼意思呢，來看看代碼：

.img {
    /* 不支持 image-set 的瀏覽器*/
    background-image: url('../[email protected]');

    /* 支持 image-set 的瀏覽器*/
    background-image: image-set(
        url('./[email protected]') 2x,
        url('./[email protected]') 3x
    );
}

這樣一看，作用應該很清晰了。對於支持 image-set 語法的瀏覽器：

1. 如果其設備對應的 DPR 爲 2，會選取這條 url('./[email protected]') 2x 記錄，也就是最終生效的 URL 是 './[email protected]'；
2. 如果其設備對應的 DPR 爲 3，會選取這條 url('./[email protected]') 3x 記錄，也就是最終生效的 URL 是 './[email protected]'；

其中的 2x，3x 就是用於匹配 DRP的。

使用 image-set 的一些痛點與媒體查詢方案類似。代碼量與兼容性語法，而且難以匹配所有情況。

方案四：srcset 配合 1x 2x 像素密度描述符

簡單來說，srcset 可以根據不同的 dpr 拉取對應尺寸的圖片：

<div class='illustration'>
   <img src='illustration-small.png'
       srcset='images/illustration-small.png 1x,
               images/illustration-big.png 2x'
   >
</div>

上面 srcset 裏的 1x，2x 表示 像素密度描述符，表示

• 當屏幕的 dpr = 1 時，使用 images/illustration-small.png 這張圖
• 當屏幕的 dpr = 2 時，使用 images/illustration-big.png 這張圖
• 如果不支持 srcset 語法，src='illustration-small.png' 將會是最終的兜底方案

方案五：srcset 屬性配合 sizes 屬性 w 寬度描述符

上面 1x，2x 的寫法比較容易接受易於理解。

但是，上述 3 種方案都存在統一的問題，只考慮了 DPR，但是忽略了響應性佈局的複雜性與屏幕的多樣性。

因此，規範還推出了一種方案 -- srcset 屬性配合 sizes 屬性 w 寬度描述符。

srcset 屬性還有一個 w 寬度描述符，配合 sizes 屬性一起使用，可以覆蓋更多的面。

sizes 屬性怎麼理解呢？它定義圖像元素在不同的視口寬度時，可能的大小值。

以下面這段代碼爲例子：

<img 
        sizes = “(min-width: 600px) 600px, 300px" 
        src = "photo.png" 
        srcset = “[email protected] 300w,
                       [email protected] 600w,
                       [email protected] 1200w,
>

解析一下：

sizes = “(min-width: 600px) 600px, 300px" 的意思是：

1. 如果屏幕當前的 CSS 像素寬度大於或者等於 600px，則圖片的 CSS 寬度爲 600px
2. 反之，則圖片的 CSS 寬度爲 300px

也就是 sizes 屬性聲明瞭在不同寬度下圖片的 CSS 寬度表現。這裏可以理解爲，大屏幕下圖片寬度爲 600px，小屏幕下圖片寬度爲 300px。

需要注意的是，這裏大屏、小屏下圖片具體的寬度表現，還是需要藉助媒體查詢代碼，經由 CSS 實現的

srcset = “[email protected] 300w, [email protected] 600w, [email protected] 1200w 裏面的 300w，600w，900w 叫寬度描述符。

那麼，怎麼確定當前場景會選取哪張圖片呢？

當前屏幕 dpr = 2 ，CSS 寬度爲 375px。

當前屏幕 CSS 寬度爲 375px，則圖片 CSS 寬度爲 300px。分別用上述 3 個寬度描述符的數值除以 300。

1. 300 / 300 = 1
2. 600 / 300 = 2
3. 1200 / 300 = 4

上面計算得到的 1、 2、 4 即是算出的有效的像素密度，換算成和 x 描述符等價的值 。這裏 600w 算出的 2 即滿足 dpr = 2 的情況，選擇此張圖。

當前屏幕 dpr = 3 ，CSS 寬度爲 414px。

當前屏幕 CSS 寬度爲 414px，則圖片 CSS 寬度仍爲 300px。再計算一次：

1. 300 / 300 = 1
2. 600 / 300 = 2
3. 1200 / 300 = 4

因爲 dpr = 3，2 已經不滿足了，則此時會選擇 1200w 這張圖。

當前屏幕 dpr = 1 ，CSS 寬度爲 1920px。

當前屏幕 CSS 寬度爲 1920px，則圖片 CSS 寬度變爲了 600px。再計算一次：

1. 300 / 600 = .5
2. 600 / 600 = 1
3. 1200 / 600 = 2

因爲 dpr = 1，所以此時會選擇 600w 對應的圖片。

具體的可以試下這個 Demo：CodePen Demo -- srcset屬性配合w寬度描述符配合sizes屬性

此方案的意義在於考慮到了響應性佈局的複雜性與屏幕的多樣性，利用上述規則，可以一次適配 PC 端大屏幕和移動端高清屏，一箭多雕。

嗯，總結一下，在實現響應式圖像時，我們同時使用 srcset 和 sizes 屬性。它們的作用是：

• srcset：定義多個不同寬度的圖像源，讓瀏覽器在 HTML 解析期間選擇最合適的圖像源
• sizes：定義圖像元素在不同的視口寬度時，可能的大小值

有了這些屬性後，瀏覽器就會根據 srcset/size 來創建一個分辨率切換器的響應式圖片，可以在不同的分辨率的情況下，提供相同尺寸的圖像，或者在不同的視圖大小的情況下，提供不同尺寸大小的圖像。

本章總結

本章節一共列舉了 5 種實現響應式圖片，適配不同屏幕大小，不同 DPR 的方式，它們分別是：

1. 無腦多倍圖的方式
2. DRP 媒體查詢
3. CSS Background 中的使用 image-set
4. srcset 配合 1x 2x 像素密度描述符
5. srcset 屬性配合 sizes 屬性 w 寬度描述符

合理使用它們，可以有效的爲不同屏幕，提供最爲恰當的圖片資源，在保證用戶體驗的同時，儘可能節省帶寬。

它們各有優缺點，可以根據自己實際的業務場景，選取合適相對成本最低的方案，並且適當的配合 Autoprefixer 以及一些 PostCSS 等工具，簡化代碼量。

當然，本文只是現代圖片性能優化及體驗優化指南的第二篇，後續將給大家帶來圖片在：

• 圖片的寬高比、裁剪與縮放展示
• 懶加載/異步圖像解碼方案
• 可訪問性以及圖片資源的容錯及錯誤處理

等相關知識的介紹，感興趣的可以提前關注。

最後

OK，本文到此結束，希望本文對你有所幫助 😃

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。