Retina屏下的圖片優化

zimo發表於2018-07-11
優化

前言

這篇文章的目的是講解二倍圖和三倍圖使用時的問題的。之前在開發過程中，總是會遇到一些加粗的圖案，無法使用css語法來實現效果。因此，只能夠新增圖片來展示。但是，單純的新增圖片，會導致圖片在部分手機上面看上去模糊不清。因此，我們往往會使用到二倍圖和三倍圖。同時，還有其外在的原理需要我們去明確。如果你喜歡我的文章，歡迎評論，歡迎Star~github部落格

正文

使用了圖片，最主要關注的就是圖片的展示效果和優化問題。雖然，在這個需求中，似乎並沒有體現的這麼重要。但是，優化問題也是需要做的(每解決一個問題，就是在為一堵牆添磚加瓦，加固)。

圖片展示效果

展示效果，通常來說，就是整個螢幕的清晰度。整體螢幕的清晰度主要和三個因素有關係：

  1. 圖片本身畫素點是否精細
  2. 螢幕的解析度
  3. 螢幕大小

如果是圖片本身的問題，那自然不需要多進行優化，直接換圖就可以了；而其他的兩個因素，我們就需要來好好聊聊了。

螢幕解析度，即裝置解析度，裝置的物理畫素。圖片大小，從側面反映，就是圖片畫素點的多少。熟悉影像處理的人，都知道圖片是由一個個的畫素點組成的，而畫素點中就包含了圖片的資訊，再由我們經常使用的rgb值進行表示。當然，這只是其中的一個方式。

瞭解了圖片和解析度，我們可以思考一個問題：一張1080*1920的圖片，可以在PC端正常的展示，但是，手機上為啥也可以如此的清晰？畢竟，手機尺寸是遠遠小於PC的尺寸的。還有何種方式來增加螢幕的解析度呢？

所以，這其中摻雜著另一個變數——螢幕密度(PPI)。

螢幕密度

通常來說，尺寸越大的螢幕，解析度往往也會越高。這樣，顯示出來的圖片也會越來越大，就像06年那種老式的桌上型電腦一樣。

通過固定螢幕尺寸的話，我們可以通過螢幕密度來增加解析度。螢幕密度，顧名思義，就是與畫素點相關的單位。具體介紹是每英寸中的單位畫素點數，即為螢幕密度。一般而言，螢幕密度超過300PPI的話，人眼已經無法辨識出顆粒感了，我們可以通過以下兩張圖片進行對比一下：

螢幕密度

同樣的，自從螢幕密度增加之後，我們就可以在手機上看到大解析度的東西了。但是，由於螢幕尺寸的問題，所以本身很大的圖片，在高密度屏中，顯示的非常之小，無法達到人為想要的效果。所以，接下來，蘋果推出的Retina螢幕才真正解決了這個問題。

Retina屏

在談論Retina屏之前，我們需要來看看，作為前端開發，我們在CSS中使用的px單位代表著什麼？CSS畫素是一個抽象概念，裝置無關畫素，簡稱"DIPS"，device-independent畫素。主要使用在瀏覽器上，來度量頁面中元素的長度。

在標準情況下一個css畫素對應著一個裝置畫素。

但是，回到Retina螢幕來說，情況就發生了一些變化。我們之前說，在小螢幕高密度的情況下，一張正常的圖片會變得很小，影響著使用者體驗。Retina屏，在使用中，往往也被稱為“雙密度屏”。它將原先在標準螢幕下展示的200x300的盒子，展示稱為400x600的盒子，保持了相同的物理尺寸。如圖所示：

Retina屏

這種方式，就像是PS中的放大功能，將原有的部分按照自有演算法進行了放大，增強了使用者體驗。但是，導致的一個問題就是，原先的畫素點被放大成4個之後，自然而然的變得模糊了，無法達到原先清晰的效果，出現了顆粒感。所以，這將導致我們在後續使用中需要對圖片進行一定的處理。

Retina屏下圖片優化

我們需要引入一個概念——devicePixelRadio，從語意上來說明就是裝置畫素比。它是裝置上物理畫素和裝置獨立畫素的比例。

一般而言，目前的螢幕可以分成以下幾類：

  1. 普通高密度桌面螢幕：dpr為1
  2. 高密度Retina桌面螢幕(Mac系列)：dpr為2
  3. 主流的手機螢幕：dpr為2或者3

經過了這些區分，我們就可以根據dpr來匹配圖片。

就如之前所說的，在Retina螢幕下，圖片很容易出現模糊，原因就是它將原來的一個css畫素點放大成了多個裝置畫素點。為了保證圖片不出現模糊。我們需要對圖片進行處理，來消除模糊現象。這就是傳統意義上的二倍圖，三倍圖的產生。

之後，我們就可以在程式碼中使用媒體查詢的方式來改變使用的圖片。舉個例子:

#el {bakcground-image: url('photo.png')}

@media only screen and (min-device-pixel-radio: 2) {
	#el {background-image: url('photo.png@2x.png')}
}

@media only screen and (min-device-pixel-radio: 3) {
	#el {background-image: url('photo.png@2x.png')}
}
複製程式碼

這樣之後，才能保證我們的圖片在螢幕上不出現模糊的情況。畢竟，我們的UI小姐姐們對於圖片的質量要求還是蠻高的。

總結

正文中我們從二倍圖和三倍圖的使用中引出了對於螢幕尺寸，解析度和Retina屏等概念的研究。我們也知道了，為啥需要使用二倍圖和三倍圖，在何時使用二倍圖和三倍圖。上述文章總結以下幾點：

  1. 圖片的展示效果
  2. 螢幕密度
  3. Retina屏
  4. Retina屏下的圖片優化

如果你對我寫的有疑問，可以評論，如我寫的有錯誤，歡迎指正。你喜歡我的部落格，請給我關注Star~呦github部落格

歡迎訂閱微信公眾號

微信公眾號

相關文章