白話文解說響應式圖片(responsive images)
由於現代螢幕尺寸相當多元，為了讓網頁能夠在各式各樣尺寸的螢幕上能夠正常顯示，所以網頁設計越來越講求響應式網頁設計(responsive web design)。
但這個議題目前各種前端 CSS 框架都有實作各自的響應式設計方案（不外乎 Grid, Column 等等），所以實作響應式網頁設計的門檻也降低很多。
可是，你有沒有想過網頁上的圖片怎麼做到響應式設計呢？畢竟不管任何尺寸都用同一張大圖的話，對於小螢幕的裝置來說，肯定是一種流量的浪費。
仔細一查，還真的有相關的解決方案。
也就是 <img> 標籤的 2 個屬性 srcset 與 sizes 。
先講講 srcset 屬性，這個屬性是告訴瀏覽器可以根據情況自己決定要載入哪一張圖，而非預設的 src 。
先簡單以 pixel density 為 1 的螢幕舉例，例如 <img src="1600x200.png" srcset="800x100.png 800w, 1600x200.png 1600w" /> 就是告訴瀏覽器如果螢幕寬度在 800 px 以下，可以下載 800x100.png 來用，如果是在 800 px 以上，可以改用 1600x200.png ，而預設的 src="1600x200.png" 則是給不支援 srcset 屬性的瀏覽器使用的（是的，就是 IE …）
另一種 srcset 的方式則是根據螢幕的 pixel density 來決定，也就是我們常常看到視覺設計師會針對手機特別出 1x, 2x, 3x 的圖，這個也可以在 srcset 中指定，例如 <img src="600x600.png" srcset="400x400.png 2x, 600x600.png 3x" /> 。
srcset 中的圖下載好之後，這時不管螢幕再怎麼縮小，都還是顯示已經下載好的那張圖（因為瀏覽器不需要再為小螢幕下載圖，它已經有一張大圖可以用了），這時可以進一步搭配 sizes 屬性，在裡面寫好 media query, 讓它根據螢幕大小調整圖片尺寸，例如 <img src="600x600.png" srcset="400x400.png 400w, 600x600.png 600w" sizes="(max-width: 520px) 400px" /> 讓螢幕尺寸在 520px 以下都自動改用 400px 呈現 。
以上就是響應式圖片的簡單說明！
