img 的 srcset、sizes 屬性
一、總結
一句話總結：
HTML 5.1 新增加了 img 元素的 srcset 、 sizes 屬性和 picture 元素，使得響應式圖片的實現更為簡單便捷，很多主流瀏覽器的新版本也對這些新增加的內容支持良好。
1、如下關於img的srcset代碼的意思是什么？
|||-begin
<img srcset=“ http://placehold.it/2500 5x, http://placehold.it/1500 3x, http://placehold.it/1000 2x, http://placehold.it/500 1x " src="http://placehold.it/500/abc" />
|||-end
a、5像素比（現在很多安卓手機比如小米、華為的所謂高清2k屏就是5像素比以上的）的設備使用2500x2500像素的圖片，其它類推
b、對於不支持 srcset 的瀏覽器，顯示 src 的圖片（這個圖片是500x500像素、RGB 顏色 abc 的）
上面代碼的意思就是：5像素比（現在很多安卓手機比如小米、華為的所謂高清2k屏就是5像素比以上的）的設備使用2500x2500像素的圖片，3像素比的設備使用1500x1500像素的圖片，2像素比的設備使用1000x1000像素的圖片，1像素比（普通的筆記本電腦顯示屏就是1像素比的）的設備使用500x500像素比的圖片。
對於不支持 srcset 的瀏覽器，顯示 src 的圖片（這個圖片是500x500像素、RGB 顏色 abc 的）。
2、如下關於img的sizes屬性的作用是什么？
|||-begin
<img srcset=“ http://placehold.it/2000 2000w, http://placehold.it/1500 1500w, http://placehold.it/1000 1000w, http://placehold.it/500 500w " sizes=“ (max-width: 500px) 500px, (max-width: 1000px) 1000px, (max-width: 1500px) 1500px, 2000px " src="http://placehold.it/500/abc" />
|||-end
不用的媒體查詢條件下，圖片的寬度是不一樣的，以做響應式的響應
二、img 的 srcset、sizes 屬性和 picture 元素
轉自或參考：img 的 srcset、sizes 屬性和 picture 元素 - 簡書
https://www.jianshu.com/p/607567e488fc
HTML 5.1 新增加了 img 元素的 srcset 、 sizes 屬性和 picture 元素，使得響應式圖片的實現更為簡單便捷，很多主流瀏覽器的新版本也對這些新增加的內容支持良好。
下面通過一些例子來簡要說下用法，例子里用 PLACEHOLD.IT 來獲取不同像素的圖片。
srcset 和 sizes 屬性
srcset 是一個包含一個或多個源圖的源圖容器，不同源圖用逗號分隔，每一個源圖由下面兩部分組成：
1、圖片 URL
2、 x （像素比描述）或 w （圖片像素寬度描述）描述符（與圖片 URL 相隔一個空格）， w 描述符的加載策略是通過 sizes 屬性里的聲明來計算選擇的
上述第2點如果沒有給出，則是默認的 1x 。
以下情況是不正確的：
- 在同一個
srcset里的不同圖片出現有的用x描述符有的用w描述符 - 同一個圖片既使用了
x描述符也使用了w描述符
對於不正確的情況，不同的瀏覽器使用不同的處理方法。
sizes 寫法與 srcset 差不多，也是用逗號分隔的一個或多個 string ，每個 string 由下面兩部分組成：
1、媒體查詢。最后一個 string 不能有這個，作為 fallback
2、圖片 size （大小）信息。需要注意的是這里不能使用 % 來描述圖片大小，如果要用百分比來表示，要使用類似於 vw （100vw = 100%設備寬度(viewport)）這樣的單位來描述，其它的像是 px 、 em 等可以正常使用。
sizes 里給出的不同媒體查詢選擇圖片大小的建議只對 w 描述符起作用，也就是說，如果 srcset 里用的是 x 描述符或根本沒有定義 srcset ，這個 sizes 是沒有意義的。
x 描述符
<img
srcset=“
http://placehold.it/2500 5x,
http://placehold.it/1500 3x,
http://placehold.it/1000 2x,
http://placehold.it/500 1x
"
src="http://placehold.it/500/abc"
/>
上面代碼的意思就是：5像素比（現在很多安卓手機比如小米、華為的所謂高清2k屏就是5像素比以上的）的設備使用2500x2500像素的圖片，3像素比的設備使用1500x1500像素的圖片，2像素比的設備使用1000x1000像素的圖片，1像素比（普通的筆記本電腦顯示屏就是1像素比的）的設備使用500x500像素比的圖片。
對於不支持 srcset 的瀏覽器，顯示 src 的圖片（這個圖片是500x500像素、RGB 顏色 abc 的）。
而對於 srcset 里沒有給出像素比的設備，不同瀏覽器的選擇策略不同。比如例子中沒有給出1.5像素比的設備要使用哪張圖，瀏覽器可以選擇2像素比的也可以選擇1像素比的（當然也可以選擇5像素比或者使用 src 的圖片，但是這顯然不是一個好的選擇）。
w 描述符和 sizes
w 描述符可以簡單理解為描述源圖的像素大小（無關寬度還是高度，大部分情況下可以理解為寬度）。
<img
srcset=“
http://placehold.it/2000 2000w,
http://placehold.it/1500 1500w,
http://placehold.it/1000 1000w,
http://placehold.it/500 500w
"
sizes=“
(max-width: 500px) 500px,
(max-width: 1000px) 1000px,
(max-width: 1500px) 1500px,
2000px
"
src="http://placehold.it/500/abc"
/>
上述例子的意思是：對於 viewport 在 500px 及以下的使用 500w 的圖片，以此類推，最后一個是前面的媒體查詢都不符合的情況下使用 2000w 的圖片。
這里如果沒有相對應的 w 描述，一般選擇第一個大於它的。如上述例子中如果有一個媒體查詢是 700px 的，一般加載 1000w 對應的源圖。（這里之所以用“一般”這個詞，是因為文檔里沒有規定是這樣的，而根據參考和我的嘗試——mac Safari 10.0.1、windows Chrome 55.0、android Chrome 55.0、windows Firefox 50.1選擇加載第一個大於它的，Microsoft Edge 38選擇加載的是 500w ，可能是第一個小於它的也可能是最接近的——我認為一般是選擇加載第一個大於它的。）
下面說一個使用百分比的例子：
<img
srcset=“
http://placehold.it/2000 2000w,
http://placehold.it/1500 1500w,
http://placehold.it/1000 1000w,
http://placehold.it/500 500w
"
sizes=“
(max-width: 500px) 100vw,
(max-width: 1000px) 80vw,
(max-width: 1500px) 50vw,
2000px
"
src="http://placehold.it/500/abc"
/>
這里圖片的選擇就是： viewport 寬度乘以1或0.8或0.5得到的像素來選擇不同的 w 。比如 viewport 為 800px ，對應 size 80vw ，就是 800*0.8=640 像素，應該加載一個 640w 的源圖，但是沒有找到 640w ，這時候一般選擇第一個大於 640w 的，也就是 1000w 。
對於沒有給出 sizes 的，一般是按照 100vw 來選擇加載圖片。當然這里也是沒有規定的、看瀏覽器的選擇的。
picture 元素
picture 元素內部的 source 與 img 的關系像是相片與相框的關系，相框帶有一個底圖，我很有多不同尺寸（風格）相片，我試圖找到第一個合適尺寸（合適風格）的相片放到相框里，如果沒有找到就不放相片而用相框本身的底圖，當然如果沒有相框那就不能掛到牆上去，而 picture 告訴你這個相框只能在這些圖片里找合適的。
picture 支持尺寸（媒體查詢）和格式選擇。
下面是尺寸選擇的例子：
<picture> <source media="(max-width: 500px)" srcset="http://placehold.it/500” /> <source media="(max-width: 1000px)" srcset="http://placehold.it/1000” /> <source media="(max-width: 1500px)" srcset="http://placehold.it/1500” /> <img src="http://placehold.it/500/abc” /> </picture> 每個 source 是一個選擇，媒體查詢對應 media ，瀏覽器找到一個適用的就使用對應的 srcset 里給出的圖片，對於不支持 picture 元素的瀏覽器可以正確的加載 img 。顯然，各種 img 的屬性、樣式什么的也都應該寫在 img 里面。
下面是格式選擇的例子：
<picture> <source type="image/vnd.ms-photo" srcset="http://placehold.it/500” /> <source type="image/jp2" srcset="http://placehold.it/1000” /> <source type="image/webp" srcset="http://placehold.it/1500” /> <img src="http://placehold.it/500/abc” /> </picture> vnd.ms-photo 、jp2 、 webp 等是一些新的圖片格式，不像 png 、 jpg 等格式獲得廣泛支持，但它們又有很多優點，這時候要使用的話就要進行格式支持性判斷，瀏覽器也是選擇第一個支持的格式加載對應的 srcset 里給的圖片，當然對 type 判斷以后不管你給的是什么格式的圖片都選擇加載它，如果給了不符合的另外一個格式的圖片也不能再加載后面可能支持的格式了。
對於 picture 有有一點要注意的是， img 的位置會影響最終加載結果。
像下面這樣寫：
<picture> <img src="http://placehold.it/500/abc” /> <source media="(max-width: 500px)" srcset="http://placehold.it/500” /> <source media="(max-width: 1000px)" srcset="http://placehold.it/1000” /> <source media="(max-width: 1500px)" srcset="http://placehold.it/1500” /> </picture> 上面這個例子在我之前提到的瀏覽器里，我發現它們始終選擇加載 img 里的 src 圖片，即使 src 的圖片不能用。也就是說，相框里的底圖和相片的地位同等。
picture 元素也是向后兼容的，不支持該元素的瀏覽器相當於只看到了 img 。
參考：
HTML 文檔（這個我是在 Dash for macOS 里看的）
[ISUX譯]響應式圖像