響應式圖片之srcset & sizes詳講

前言

關於srcset & sizes的資料其實很多，但也很少，其中詳細講解其選擇圖片的機制的文章，更是少數了，連MDN都是粗粗一筆帶過，到底哪裏文章說的是正確的，哪裏有誤導人的，其實很難找到一個參考。

因而乎本身親自去動手研究一下了，不能光看資料，可信度仍是值得考慮。

固然出於本人能力限制，也許研究不夠透徹致使帶來的錯誤之處，請多多指出，本人虛心請教。

簡介

H5中img有兩個新屬性，srcset和sizes，主要做用：

• 控制響應式圖片，根據屏幕大小來選擇顯示不一樣圖片
• 根據屏幕的不一樣（視網膜屏幕仍是普通屏），展現不一樣質量的圖片，合理控制下載資源，以及帶給用戶高質量享受。

文本有一些名詞概念，可能須要事先有了解，方能更好的理解。可先大體瀏覽此 你得知道的各類像素、分辨率等概念

srcset

（1）格式一：圖片源地址 空格 圖片像素寬度[, 圖片源地址 空格 圖片像素寬度, ...]，如

srcset="1.jpg 580w, 2.png 618w"
複製代碼

表示圖片1.jpg的像素寬度爲580px，圖片2.png的像素寬度爲618px，兩個圖片源之間用逗號隔開。

千萬注意：描述圖片的像素寬度是用'w'單位，且必定要是圖片的真實像素寬度，若是私自改動，那麼會影響瀏覽器對圖片的選擇！

其實上述例子相似給了個默認的sizes屬性（具體下面再講）

srcset="1.jpg 580w, 2.png 618w" sizes="100vw"
複製代碼

（2）格式二：圖片源地址 空格 屏幕像素密度[, 圖片源地址 空格 屏幕像素密度, ...]，如

srcset="1.jpg 1x, 2.png 2x"
複製代碼

表示圖片1.jpg爲DPR爲1時下顯示的圖片；2.png爲DPR爲2時顯示的圖片，若是沒有更大的DPR設置的圖片源，那麼當大於當前設置的DPR最高值時，會採用當前設置的最大DPR的圖片源。如這裏若是屏幕DPR爲3，那麼仍是會用2.png。

小結

在瀏覽器支持srcset的狀況下，src值就成爲了一個1x狀況下的候選圖片，在沒有符合條件的狀況下，會採用該值。

關於'x'的圖片選擇，很簡單，按照上述規則就行了。可是關於'w'的圖片選擇，就沒有那麼單純了，須要結合下述的sizes屬性一塊兒來分析。

sizes

只有當設置了srcset，且單位爲w時，sizes的設置纔會起效。瀏覽器究竟是怎麼選擇圖片的呢，是先根據sizes設定的條件下，找出此刻圖片顯示的寬度，而後根據這個寬度去srcset裏找符合條件的圖片。

什麼樣的纔是叫符合條件呢？

srcset中設置的圖片像素寬度（'w'的值），組成了相應的半開半閉區間(a, b]。 圖片的顯示寬度（sizes規定的值）看落在哪一個區間內，取區間中最大值對應的圖片。若沒有最大值（如∞），則取上個區間最大值。

如

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w,1.jpg 1000w", sizes="300px">
複製代碼

上面設置圖片要顯示成300px（sizes裏的值），在srcset裏的幾個臨界值中造成了(0, 229px]、(229px, 618px]、(618px, 1000px]、(1000px, ∞]。300px落在了(229px, 618px]中，取最大值618，所以最終選擇的圖片就是2.png

若是sizes改爲1200px，按照上述規則，最終會選取1000w的1.jpg

注意：srcset裏的順序不重要，不會受到影響。

好了，咱們知道瀏覽器的選取規則。仍是說一下sizes的語法結構：

[媒體查詢 空格 ]圖片顯示寬度[, [媒體查詢 空格 ]圖片顯示寬], ..., 其他條件寬度值]

圖片的寬度值單位不能爲%，其他正常單位可使用

舉例：

sizes="(max-width: 500px) 400px, (max-width: 900px) 700px, 1200px"
複製代碼

上面的意思就是，在屏幕小於等於500px狀況下，圖片顯示成400px寬；在屏幕小於等於900px狀況下，圖片顯示成700px寬；其他狀況顯示成1200px寬。

所以，可根據這種sizes值，判斷在哪一個屏幕大小下顯示什麼寬度的圖片，而後根據這個寬度值去srcset裏找知足條件的圖片源。

這個例子

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w,1.jpg 1000w", sizes="(max-width: 500px) 400px, (max-width: 900px) 700px, 1200px">
複製代碼

在屏幕小於等於500px狀況下，圖片顯示成400px寬，選取2.png；在屏幕小於等於900px狀況下，圖片顯示成700px寬，選取1.jpg；其他狀況顯示成1200px寬，仍是選取1.jpg。

注意：sizes裏的媒體查詢條件順序是很重要的，只要知足了越靠前的某個條件，那麼後面的條件會被忽略的

還有，若是sizes屬性沒有值，或者在有媒體條件下，其他條件寬度沒有設值，那麼默認是100vw

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w">

<!--等同於-->

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w" sizes="100vw">
複製代碼

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w", sizes="(max-width: 500px) 400px">

<!--等同於-->

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w", sizes="(max-width: 500px) 400px, 100vw">
複製代碼

這種時候，就是直接根據屏幕的寬度來決定選取哪一個圖片源了。

DPR的影響

上述內容，都是在DPR爲1的狀況下說明的，主要針對PC端吧。那若是是手機端，DPR不僅僅是1，還有2，3的狀況。這時候其實上述內容的規則仍是不會變的，可是咱們須要作一些值的轉化才能套用上述規則。這裏主要是說'w'的狀況下瀏覽器如何去選擇

以該例子說明

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w" sizes="(max-width: 600px) 114px">
複製代碼

首先咱們要知道，srcset裏的'w'符號，是表明的是圖像的寬度像素，是個物理像素；sizes裏的114px是表示邏輯像素！

而瀏覽器對圖片的選擇，是要轉化爲同一律念上的像素才能進行對比的，總不能拿着邏輯像素值去物理像素區間裏作比較吧？

所以，在DPR不爲1時，要轉化一下像素值才能去區間裏比較，套用上述規則。

如在DPR=2時，把114px轉化爲物理像素，即114px * 2 = 228px，用228px去(0, 229px]、(229px, 618px]、(618px, ∞]裏作比較，落在了(0, 229px]中，取229px對應的3.jpg

規範

若是你想用這兩個屬性好好控制圖片，那你得遵循好如下規範，否則不少效果是你難以預測獲得的，畢竟那麼多瀏覽器，兼容性也各自不一樣。

都是關於srcset的值的規範：

• 不一樣圖片源，要都是同一個類型的，如都是'x'的描述，或都是'w'的描述。
• 不一樣圖片源，不能是同一個值，如同'1x' 或 同 '900w'
• 同個圖片源，不能既有'w'又有'x'
• 用'w'描述時，必定必定要是圖片真實的寬度值，你能夠右鍵圖片查看屬性，看到其寬多少像素，就是這個像素值了。若是你不填寫真實的狀況，那麼會影響瀏覽器對圖片的選擇，以及顯示在瀏覽器上的圖片的寬度也會進行必定比例縮放，比例爲真實寬度:私自改動寬。

若是你不信這個規範，畢竟不少其餘文章沒這麼要求限制，你不免會產生懷疑，雖然打破這些規範，瀏覽器可能也會顯示某種規律，可是，考慮到瀏覽器的兼容性問題，實在不建議不按照上述要求寫。

【這塊內容無關重要】 如下是我親測的一些狀況。感興趣的你本身也能夠試試看，固然我這裏測試的瀏覽器有限

1. srcset值有不符合當前屏幕的'x'時，還有'w'時，會按照'w'的條件顯示圖片，其他狀況會顯示這個最小的不符合的'x'下的圖片；但360會一直用這個最小的不符合的'w'值。
2. 有符合的'w'又有符合的'x'，'x'的優先級最高。不管怎樣都會顯示'x'的條件下的圖片
3. 同個圖片源，既有'w'又有'x'是無效的
4. 不一樣圖片源，同一個值，如同'1x' 或 同 '900w'，最前面的那個優先

兼容性

這裏能夠看到一個大致的狀況： 兼容性

但還有一些值得一說的內容，畢竟上面的連接裏是沒有的

srcset值僅有'w'時

在chrome屏幕變化時（如你拖動瀏覽器窗口），圖片能從設置的小屏到大屏進行圖像替換，但大屏往小屏變化，不會進行圖片替換。

以下述例子，從低於500px寬度的屏幕上是1.jgp，屏幕變化到500px-900px時，圖片會替換爲2.png，到900px以上的屏幕時，替換爲3.jpg；但從900px上 -> 500px-900px -> 500px下，圖片卻不會進行替換。

<img src="4.jpg" srcset="1.jpg 400w,2.png 600w,3.jpg 900w">
複製代碼

但Firefox不存在chrome的從大屏到小屏圖片不替換的問題。

360瀏覽器支持很差，只會顯示srcset中的最大屏的圖片，如上述例子中的3.jpg

其餘狀況

1. srcset值都是'x'時，且是不符合當前屏幕的條件，會採用src的值，但360會仍是用這個不符合的srcset值。

<img src="4.jpg" srcset="3.jpg 3x,1.jpg 2x">
複製代碼

2. srcset值都是'x'時，有一個符合的，就採用符合的。可是360的表現很奇怪，找不出規律。

未經容許，請勿私自轉載