背景
昨天突然i想起來前兩年嘗試過的img-srcset這個屬性，當時趕著完成課程設計，在firebox發現有效果，在chrome上半點用都沒，但是這玩意的相容性如下：
其實相容性我覺得挺好的，所以我還是要再嘗試嘗試！
介紹
srcsert具有兩個版本：
-
舊版
複製程式碼 -
新版
<img src="./img/x-pc.png" srcset="./img/x-pc.png 300w, ./img/x-pc@2x.png 500w" sizes="(min-width: 300px) 400px, calc(100vw - 2rem)">複製程式碼
emm…..舊版不想說了，反正不好用也已經被淘汰了，新版的，其實很簡單：
srcset這個屬性定義圖片然後告訴瀏覽器你圖片的寬度sizes這個屬性定義在不同情況下，對於圖片寬度的定義，單位除了不能使用%（很費解，不過可以用vw代替），calc()也可以
看一看
- 寬度250px情況下
- 寬度300px情況下
懶得錄gif，當你寬度慢慢增大一個臨界點時瀏覽器會去載入二倍圖並且替換，sizes規定了圖片的大小，比如第一個例子上圖片大小恆定500px，注意sizes的合理設定，否則會產生圖片大小的跳動，得到兩個結論：
- 優先適配高質量圖片原則
- 存在快取時優先載入快取圖片
進階
我們來探究一下w這個單位，先從sizes這個屬性說起。
sizes相當於動態定義圖片的width和height，然後我們把上面的例子做一些修改：
<img src="./img/x-pc.png"
srcset="./img/x-pc.png 150w, ./img/x-pc@2x.png 250w"
sizes="(min-width: 200px) 400px, calc(100vw - 20px)">複製程式碼圖1： 2 （150px – 20px）
圖2： 2 （171px – 20px）
我個人的理解是：w只是告訴瀏覽器，我認為這張圖是什麼大小，瀏覽器會根據你給的值取計算出一個比值，比如上面這個比值是2，然後去乘下面的sizes，公式就是：
實際渲染大小 = （原圖大小 / 宣告大小） * 對應的sizes
為什麼這麼做呢？
我猜測，如果按w等於圖片寬度的話，在高質量的圖片下並不合適，所以w只是起到一個描述圖片尺寸作用，就和你爸媽一樣，我覺得XXXXXX。
結論
我瞎寫，你隨便看看就好，覺得哪裡不對可以留言