響應式圖片

昨天我們介紹了怎麼透過<img>元素在網頁中加上圖片。
也提到可以搭配使用<figure>和<figcaption>元素為圖片添加標題或說明。

不過有的裝置解析度比較高。
如果沒有另外設定的話，網頁中的圖片在這些高解析度的裝置看起來還是一樣。

這樣子花大錢買的高階手機或電腦，就沒有發揮它的價值了( ´•̥̥̥ω•̥̥̥` ）
也可能圖片的解析度對一般裝置來說太高。花了更多的網路用量跟時間載入，也沒有看到更多的細節。

為了不要讓大家花冤枉錢，我們可以使用<img>元素的srcset屬性，為同一張圖片提供多種版本的檔案。

這樣子瀏覽器就可以依據瀏覽裝置的像素密度，判斷哪個版本的像素密度最合適。讓我們看到圖片的更多細節，或是幫我們節省不必要的浪費。

不過在說明怎麼使用srcset屬性之前，我們要先解釋什麼是像素密度。

像素密度的定義

這裡的像素密度（Pixel Density），指的是螢幕像素與CSS像素（CSS Pixel）之間的比值。

網路發展初期，電腦螢幕通常是96 PPI（pixels per inch），於是CSS將1 px定義為1/96 inch。這時的螢幕的像素與CSS像素之間維持著1:1的對應關係。[1]

隨著時代發展，同樣大小的螢幕內的物理像素越來越多。這也代表螢幕像素的長度變短。

在CSS的世界中，像素Pixel（px）是重要的基準單位，使用相對單位時都需要回推為px來計算。[2]

如果實際以高解析度螢幕的物理像素顯示CSS的像素，可能會讓網頁的版面佈局跑掉，導致比例不符合使用習慣。

或是因為螢幕像素長度變短，但圖片總像素不變，導致同一張圖片在解析度更高的螢幕上變得更小。

於是後來就發展出一種方法，讓多個螢幕像素組成一個CSS像素。這麼一來就算解析度不同，同一個網頁在尺寸相近的兩個裝置上看起來也是差不多的，仍是使用者習慣的比例。

這種螢幕像素與CSS像素之間的對應關係，就是像素密度（Pixel Density）。也有人以DPR（Device Pixel Ratio裝置像素比）或DPPX（Dots Per Pixel）稱呼。雖然意義有些不同，但都是指螢幕像素與CSS像素之間的比值。[3]

以srcset屬性提供多種像素密度的圖片

雖然透過由多個螢幕像素組成一個CSS像素的方法，可以避免網頁的版面佈局跑掉的問題。但這樣子網頁中的圖片看起來跟一般的裝置沒什麼兩樣。

如果要讓這些裝置發揮螢幕本身的價值，我們可以透過<img>元素的srcset屬性，為同一張圖片提供多種版本的檔案。讓瀏覽器依據高解析度裝置的像素密度，選擇像素密度更高的版本。這樣子使用者就能看到更清晰的照片。

srcset語法簡介

srcset屬性類似src屬性，都是用來提供圖片的檔案路徑。但不同的是，srcset屬性能為同一張圖片提供多種版本的檔案路徑，不論是依像素密度還是圖片尺寸（寬度）來區分版本。

在srcset的屬性值中，圖片的每一種版本都會以一個字串來表示（規範稱作圖片候選字串image candidate string[4]）。如果圖片有多種版本，則會以逗號,來分隔不同版本的圖片候選字串。

代表每個版本的圖片候選字串中，會以檔案路徑開頭，接著以空格分隔，然後以像素密度描述符（pixel density descriptor）說明當前版本的像素密度，或是以寬度描述符（width descriptor）說明當前版本的寬度。[5]

像素密度描述符，由大於零的正浮點數以及後綴的英文字母x組成。比如2x，就是代表這個圖片版本的像素密度為2倍；
寬度描述符，則是由大於零的正整數以及後綴的英文字母w組成。比如800w，就是代表這個圖片版本的寬度為800px。

注意事項

• 如果圖片候選字串沒有用任何一種描述符，說明版本的像素密度或寬度，則會被視作1x，即1倍像素密度的圖片版本。
• 像素密度描述符的倍數不能重複。
• 同一個srcset屬性內只能使用一種描述符。像素密度描述符跟寬度描述符不能同時存在。
• srcset屬性通常會與src屬性搭配使用，避免有些瀏覽器不支援srcset屬性。
• 如果瀏覽器支援srcset屬性，透過src屬性提供的圖片則會被當作1倍像素密度。除非srcset另外以1x的像素密度描述符提供一個版本，或是srcset內使用的是寬度描述符。
• 瀏覽器實際在選擇圖片的檔案時，還會考慮其他因素，像是螢幕尺寸、瀏覽器的縮放比例，或是使用者的網路狀況。所以在高解析度的裝置上瀏覽網頁時，不見得會看到其他像素密度版本的圖片。[6]

範例

以下由規範提供的範例，除了透過src提供原始版本的圖片，還另外以srcset屬性提供了像素密度為1.5倍跟2倍的圖片。

如果瀏覽器支援srcset屬性，那麼總共有三種版本的圖片可以挑選；如果不支援的話，則只有由src提供的原始版本可以使用。

<h2>From today's featured article</h2>
<img src="/uploads/100-marie-lloyd.jpg"
     srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
     alt="" width="100" height="150">
<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

小結

今天我們介紹怎麼透過<img>元素的srcset屬性，為同一張圖片提供其他像素密度的版本，讓瀏覽器判斷哪一種版本最適合瀏覽裝置觀看。

如此一來，使用者就能發揮高解析度裝置的作用，看到圖片的更多細節。即便使用的是一般裝置，也能幫助使用者節省資源。

不過比起像素密度，瀏覽裝置的尺寸對使用者體驗的影響更大。

也許同一張圖片在電腦螢幕上看起來不錯，但因為以遠景拍攝，其中的人物在手機等小螢幕的裝置上看起來就太小了。

也可能因為網頁會依據螢幕尺寸更改版面佈局，同一張照片在不同裝置上顯示的尺寸差異很大。

關於這些問題，也有方法可以處理。

不過時間不多了，讓我們下集待續～

參考資料

[1]: Smashing Magazine, There Is No Such Thing As A CSS Absolute Unit — Smashing Magazine
[2]: Chris,前端新手村 CSS 的單位
[3]: Leon, 重新認識 Pixel、DPI / PPI 以及像素密度
[4]: HTML Standard, srcset attributes
[5]: MDN, <img>: The Image Embed element
[6]: Jason Grigsby, Responsive Images 101, Part 5: Sizes – Cloud Four