網站圖片在手機裡怎麼看起來是糊的？談像素比例的跨裝置實作
「像素（pixel）」是螢幕顯示的最小單位，所有的圖文都是由一點一點的像素所構成，隨著科技的進步，螢幕解析度愈來愈高，相對地像素尺寸也愈來愈小，於是出現了不同的像素比例的裝置。
在閱讀這篇文章之前，必須先澄清一個觀念：包含影片、網頁中，所有螢幕上顯示的圖片尺寸單位，都是像素！除非是印刷或列印用，會產生「實體」的圖片，才會有公分、公厘、英吋等這些用尺量得出來的單位。
像素比例（pixel ratio）
一般來說螢幕中的一個像素，就是作為「顯示一個像素」使用。不過隨著技術進步，螢幕的解析度愈來愈高、像素愈來愈小，如果「一個像素仍然作為一個像素使用」，我們看到的圖文相對就會變小。所以裝置會設定用「多個像素」來顯示一個像素。
我們用下圖來解釋「像素比例」。左邊假設像素比例為1（1個像素顯示1個像素），右邊像素比例就是2（長、寬各為原像素2倍，共用了4個像素顯示1個像素）。
簡言之，像素比例愈大者，像素會愈小，構成相同的圖形時，會用更多像素來顯示。例如下圖的兩個圓，右邊是左邊的像素比例2倍，所以右邊的圓形看起來就會較為細緻，邊緣鋸齒的程度也比較不明顯。
再看看下圖，就能更加體會像素比例影響圖片細緻度的關係了。
如果你想知道自己正在使用的裝置像素比例，或是各種常見裝置的像素比例與像素值，可以參閱這個網站：mydevice.io
不同像素比例的網頁圖片實作
假設我們的網頁中，想要放入一張 300*200px 的圖片，過去我們會在 Photoshop 或其他繪圖軟體，裁切 300*200 像素之後放入網頁中；但如果你使用像素比例超過 1 的手機閱覽時（例如：iPhone 12，像素比例為 3），就會發現圖片好像會稍微模糊了點。
這是因為，裝置解析度已經超越網頁圖片本身了，就好像你用 Full HD 的電視看 720P DVD 一樣，裝置等級超越了媒體本身，我們反而就會覺得媒體解析度是不是變差了。
不過肉眼一般被理解的最大辨識解析度約 300ppi（每英吋 300 像素），所以解析度如果超過了一定的極限，我們也不見得分辨得出來。
所以我們在製作網頁圖片的時候，就不再是要多少像素就裁切多少像素了喔！筆者建議，可以再準備一張長寬各 2 倍大的圖檔以備像素比例較高的裝置使用。也就是說，如果實際為 300*200pixels 的圖檔，我們可以再額外準備一張 600*400pixels 的給像素比例較高的裝置使用。
Illustrator CC 實作
在 Illustrator 中有一個非常實用的功能叫「轉存為螢幕適用」，其實他是原本舊功能「儲存為網頁用」的進階版。
這裡我們是用一個 300*200pixels 的圖檔作為示範。開新檔案的時候，就「實際想顯示的尺寸」設定就可以了。
當圖片繪製完成之後，就點選「檔案>轉存>轉存為螢幕適用」。接著就會出現轉存視窗，再依下圖完成轉存設定即可！
最後我們指定的路徑中，就會出現指定縮放尺寸的圖片了。
HTML 實作
接著把圖片放進 HTML 中，或許你會想說是不是只要輸出一張 2 倍大的圖，再用 width 屬性或是 CSS 將圖片寬度設定回來就好。雖然說作法是可行，但會導致不論任何像素比例的裝置，都必須讀取 2 倍大的圖檔，而圖檔尺寸愈大檔案肯定也愈大，對於節省流量來說並不是個好方法。
這裡分享一個 <img> 標籤好用的屬性： srcset 。它可以針對不同環境尋找不同的影像來源。例如下列範例，當像素比例為 1 倍的裝置，來源為：car-1.png；像素比例為 2 倍的裝置，來源為：car-1@2x.png。
<img srcset="car-1.png 1x, car-1@2x.png 2x" src="car-1.png" alt="car" /><img>中還是會有 src 屬性，避免不支援 srcset 的瀏覽器無法取得來源。
這個用法也可以設定不同的裝置尺寸，以達成響應式取得不同圖片來源的目的。例如下列作法即是：寬度 1200pixels 以上取得 car-1.png；寬度 768pixels 取得 car-1@2x.png。
<img srcset="car-1.png 1200w, car-1@2x.png 768w" src="car-1.png" alt="car" />CSS 實作
如果圖片是作為背景之類，用 CSS 取得圖片來源時，則可以用 @media 的方式取得不同的圖片來源。例如下列就是指定像素比例為 2 以上所使用的屬性。
@media screen and (min-device-pixel-ratio: 2)小結語
因應螢幕解析度的提升，將圖片儲存為更大倍數的檔案將會有助於提升使用者經驗，但開發人員也要考量網路伺服器流量問題。實務面來說，筆者通常只會額外儲存重要的 icon 或是 logo、mark 等為 2 倍或 3 倍大的圖檔，其餘如：文章配圖等，筆者則會為節省流量不特別再另存大圖。
謝謝你耐心閱讀我的文章
你可以在堯舜設計網站看到我們的案例及作品，也可以歡迎追蹤下列媒體獲得更多資訊：
堯舜設計臉書粉絲頁
堯舜設計 Instagram：各種簡單前端與網路行銷知識。
堯舜設計 YouTube 頻道：設計與網路的法律常識。
