Retina屏下的圖片優化

前言

這篇文章的目的是講解二倍圖和三倍圖使用時的問題的。以前在開發過程當中，老是會遇到一些加粗的圖案，沒法使用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的盒子，保持了相同的物理尺寸。如圖所示：

這種方式，就像是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博客

歡迎訂閱微信公衆號