Posts match “ srcset ” tag:

用 srcset 屬性做簡單的 Responsive Image

在 HTML5 的 Living Standard 中,為 <img> 增加了 srcset 的屬性。這個屬性允許你在不同條件下,為一張圖片指定不同版本的原始檔,以便讓支援的瀏覽器可以自動選擇最適合的版本,下載來顯示。適合的時機是「我有同一張圖片、但是幾個不同尺寸的版本想要替換使用」,例如在下圖中,如果我可以根據圖片顯示的實際需要,給他剛好大小的版本,就可以節省在行動裝置上的資源跟頻寬。

一張圖片、多種尺寸版本示意圖

srcset 並不是很新的東西,在 2012 年就被提出來了。Othree 這篇文章有蠻清楚的介紹。不過當時提出來的草稿經過翻修、並且併入 HTML 規格之後,現在已經簡化到剩下兩種用法:以裝置像素密度 (device pixel ratio) 為基準、或是以 Viewport 為基準。

Read on