為什么要面向Retina屏進行圖片優化？
+ 查看更多

發布日期：2020-05-29

瀏覽次數：3061

之前我一直以為網站上的圖片只需滿足加載迅速、視覺效果呈現良好這兩點就夠了，而當我花了一段時間研究Retina圖片后，我發現Retina圖片較普通圖片真的有很大優勢，它們能給訪客提供更佳的瀏覽體驗。

在今天這篇文章中，我將簡要介紹一下Retina圖片制作的必要性，以及怎樣將普通圖片……

優化成Retina圖片……

PS.如果你覺得上面的兩張圖片看上去完全一樣，這可能是因為你的手機（或其他設備）并不支持Retina圖片。目前市場上的Retina設備有很多，如Surface平板、安卓手機、iPhone等。

設備屏幕是由成千上萬個名為"piexl（像素）"的小方格組成的，如果你的設備屏幕很大，這些小方格可能會有數百萬之多。為了渲染出一張圖片，圖片文件會對屏幕上的每個像素都作說明，比如以何種顏色、位置呈現。也就是說，像素的顏色和位置決定了該圖像的呈現效果。

而圖像分辨率也在很大程度上影響著圖像在設備屏幕上的呈現效果，但這種影響可能跟你想的并不一樣。我們通常認為圖片在顯示設備上的分辨率和它在紙上的是一樣的，但事實卻并非如此。

下面是兩個簡單問答，有興趣的不妨來自測一下：

1.哪種分辨率產生的圖像文件尺寸最小？

A.72 DPI B.150 DPI C.300DPI D.以上3種都可以

2.在網頁中以哪種分辨率保存圖像，看上去質量比較高？

A.72 DPI B.150 DPI C.300DPI D.以上3種都可以

這兩個問題的正確答案都是D。你選對了嗎？

一直以來，我了解的是：72 DPI是網頁的標準分辨率。所以我想，如果要讓圖片在Retina屏幕上呈現良好，我應該把這個數字翻倍，所以我選擇了以150 DPI保存網站上的所有圖片。而現在，我知道錯了，大錯特錯！

DPI 并不會影響圖片在網站上的呈現效果---因為DPI（Dots Per Inch，每英寸點數）是打印機、鼠標等設備分辨率的度量單位。看看下面三張以不同DPI保存的圖片在顯示設備上的呈現效果：

72DPI 149KB

150DPI 149KB

300DPI 149KB

它們看上去完全一樣，文件大小也一樣。如果你不相信的話，你可以下載它們，并在Photoshop中打開。這三張圖片的文件尺寸相同，是因為同樣數量的像素遵循著同樣的指令。

換句話說，無論圖片的DPI是多少，它在顯示設備屏幕上完全不會有任何變化。但打印設備就不同了，下面是當我打印圖片時，它們的呈現方式：

所有圖片打印在一張紙上

從這我們可以看出，分辨率表示的是圖像數據的密集程度，它并不會影響圖像的數據總量。這也引出了另一個概念---PPI（也叫像素密度）。不少人經常會把它和DPI混用，但其實它們的應用領域還是有區別的。PPI（Pixels per inch，每英寸像素），它是顯示設備分辨率的度量單位。也就是說，PPI數值越高，則表示顯示屏能以越高的密度顯示圖像。

什么是Retina？

所謂"Retina"是一種顯示標準，是把更多的像素點壓縮至一塊屏幕里，從而達到更高的分辨率并提高屏幕顯示的細膩程度（參考下面兩張圖片）。它是在iPhone4發布時開始進入大眾視野的。這種分辨率在正常觀看距離下足以使人肉眼無法分辨其中的單獨像素。也被稱為視網膜顯示屏。

為什么要面向Retina屏幕進行圖片優化？

與普通顯示屏不同，Retina屏不會通過增加屏幕尺寸來提高分辨率，而是通過提升屏單位面積內的像素數量（即PPI）來提升分辨率。而Retina設備在水平和垂直方向比普通設備多兩倍的像素，這意味著過去容納1個像素的空間，現在需要容納4個像素了。1個分成4個，顯然不夠分啊，那些沒有自己數據的像素，會嘗試使用它們周圍像素的數據，來判定它們應該顯示什么顏色（顏色近似選取），于是，在普通設備上正常顯示的圖片在Retina設備上會給人一種模糊的感覺。為了提高Retina屏幕用戶的瀏覽體驗，我們需要面向Retina設備進行圖片優化。

Retina 398KB

Not Retina obvi

如何面向Retina屏幕進行圖片優化？

為網站生成二倍像素尺寸的圖片。以1600*400px的主頁Banner圖為例，如果你想讓這張圖片在Retina屏幕下達到應有的顯示分辨率，你只需使用該圖片的源文件導出一張清晰的3200px*800px圖片（Retina圖片的像素橫向和縱向上皆是原圖的2倍），并以原名@2x來命名（如果原圖名為"image.png"，二倍命名為"[email protected]"）。由于使用了Retina.js，在Retina設備上瀏覽網頁時，它會自動搜索圖片當前目錄下是否存在命名為"[email protected]"并替換原圖。這樣一來，訪客就可以看到清晰的圖片了。