網頁前端優化 — 響應式圖片實作
近期轉職到了 Pinkoi 擔任前端工程師，在經過一兩個月開發合作以及被退好幾次 code review ，才知道前端開發藏著許多重要細節卻很容易被忽視，除了工作筆記，想再藉著寫文章在把工作筆記思緒整理，也希望分享給大家一起討論跟學習，此篇適合前端 Junior 工程師或是會合作到的團隊成員。
以下是我遇到問題改成問句會是
Ｑ：為什麼不同裝置看一樣大的圖，在有些裝置會失真（變模糊）？
Ｑ：如何設定響應式圖片
Ｑ：網頁圖片該出多大尺寸，出幾張
討論一：圖片尺寸應該出多大才不會模糊
一般來說圖片只要出到會顯示最大的尺寸就不會模糊了，如頁面第一屏的視覺背景圖最大尺寸是 1440(px) x 900(px)，這樣的話圖應該只要出剛剛好就沒問題了，我們稱這種剛剛大小的圖為 1 倍圖。
但問題總發生在細節，很快的 PM 就會告訴你「為什麼我的 iphone 上看圖片會模糊」、「我的 mac 看圖片會模糊」，如以下的畫面
原因出在「Retina HD 螢幕」與「瀏覽器的渲染解析度」
在手機畫素密度越來越高的狀況，已經無法透過單純的 px 來完全代表實際上看到的視覺大小，或區分此裝置是電腦或是手機，常常可以在 RWD 網站中應該常會看到以下 meta 設定
<meta name="viewport" content="width=device-width, initial-scale=1" >此設定意思就是將畫面寬度計算不要以預設的「裝置 px 單位」，改以「CSS指定渲染尺寸」為寬度，因為通常視覺尺寸跟 px 數通常會呈現一個倍數，比如 1倍、2倍、3倍，這樣就可以統一網站上的樣式可以對應到同樣的視覺大小，以下舉個例子。
iPhone5 為例子
實際裝置尺寸： 640px 寬 1136px 高
CSS渲染尺寸：320px 寬 568 px 高
pixel ratio：2x
而因為這種渲染設定，實際上只要寫 320px 的一個元件就可以實際填滿水平的畫面了，但也因為這種設定讓開發時可能遺忘有許多手機 pixel 密度是很高的，如果只出剛好元件大小的 1x 圖，在像是 iPhone5 這種 pixel rate 是 2 的裝置上雖然顯是 100px ，但實際是用了 2倍 200 來渲染圖片，進而造成失真，所以圖片常說要出 1x、2x、3x 的圖，就是為了適應不同 pixel rate 的渲染。
討論二：那是不是所有用圖都直接使用 3x 圖片就好了嗎
這樣圖片確實不會模糊，但最常見問題就會發生在第一屏幕的視覺圖，這張圖通常會有 1920 x 800 ，如果直接替換成 2、3倍大的圖，雖然解決了這些 retina 螢幕使用者圖片模糊的問題，但也會誤傷許多只需要 1倍圖就可以繪製清晰的裝置。
依照 pixel rate 切換圖片的方法
Media Query 中的 min-device-pixel-ratio 條件
討論三：近一步討論圖片的優化
除了針對 pixel-rate 2倍、3倍的圖外，尚可優化的是桌機與手機使用的圖片是否尺寸相差過大造成的浪費，以下分享一些實作上的切割方法
- 手機裝置，出當在 414px 手機時該圖片最大尺寸的 1x、2x、3x圖
- 平板裝置，出當在 1024px 平板時該圖片最大尺寸的 1x、2x、3x圖
- 筆電桌機，出當在 1960px 時該圖片最大尺寸的 1x、2x 圖
小結論
- pixel rate 會影響畫面圖片是以幾倍尺寸被渲染，會造成小尺寸需大圖片的情況，如果只剛好給予尺寸圖片會造成失真
- css media query 參數 min-device-pixel-ratio 可以在判斷當前裝置的 pixel rate 進而響應式切換圖片路徑，更精確的指定最符合尺寸的圖片
參考資料
如果喜歡這篇文章
如果喜歡我這篇文，可以幫我拍手 1-10 下
如果覺得這文章對你有幫助，可以幫我拍手 10–30 下
如果覺得想看到更多關於學習筆記的文章，可以幫我拍手 30–50 下
讓我知道也記得 Follow我 陳建宇
更歡迎你在下方留言，我很樂意與你討論聊天或回答問題！