上篇文章 講到了我對設備像素比的理解，但在寫文章的過程中，也一直有一個疑惑的地方：為什么在 Retina 屏下需要使用 @2x（兩倍）甚至是 @3x（三倍）的圖片呢？這樣的用法跟設備像素比之間有什么關系呢？
為了明白這個問題，也看了一些文章，本文就是我對這個知識點的一些總結。

位圖像素

前面我們介紹了設備物理像素和 CSS 像素，這兩個像素一個是實體的，一個是抽象的單位。關于圖片，還有一個像素需要我們引起注意：位圖像素。
一般我們在頁面上使用的圖片都是位圖，位圖的最小單位也是像素，叫做位圖像素。位圖像素是圖片本身的特性，在圖片產出時就已經確定了，和 CSS 像素以及設備物理像素沒有任何關系。
位圖像素是位圖最小的單位，其不可以再被拆分。

為什么 Retina 上使用 @1x 的圖片會模糊

以 IPhone6 為例，IPhone6 手機的尺寸為 375px * 667px，如果我們在 PC（非 Retina 屏）上制作出一個寬度為 375px 的圖片，該圖片在電腦上顯示正常，但在手機上顯示就模糊了。這是為什么呢？不是分辨率越高，圖片顯示越清晰嗎，為什么圖片反而變得模糊了呢？
這個問題需要從以下幾個方面來解釋：

• 像素是顯示的最小單位，不可拆分
• 由于設備像素比的原因，CSS 的 1px 或位圖的 1px 不一定等于物理像素的 1px

前面的文章提到過：設備像素比的意義在于規定設備以多少個物理像素來顯示 1px 的 CSS 像素也是如此。
此外，該結論對于位圖一樣適用：設備像素比規定了設備以多少個物理像素來顯示 1px 的位圖像素。
舉個例子，一張 375px * 200px 的位圖，其擁有 375 * 200 = 75000 個位圖像素，如果我們在 PC（設備像素比為1） 上看這張圖片，將會以 375 * 200 = 75000 個物理像素來顯示，因此在 PC 上圖片的清晰度不變。如果我們在 IPhone6 上預覽這張圖片，將會以 375 * 200 *4 = 300000 個物理像素來顯示這張圖片。
當我們在 IPhone6 上預覽圖片時，其用來顯示圖片的物理像素個數為圖片像素的 4 倍（300000 個物理像素），而圖片實際上只有 75000 個有效像素，我們知道像素是最基本的單位，無法再進行拆分，因此剩下的 300000 - 75000 = 225000 個物理像素將采用填充的方法來顯示圖片。
所謂填充，就是就近取色，這也是造成圖片模糊的原因。下面這張圖片解釋的十分形象：

就近取色

解決之道：使位圖像素個數和物理像素個數一致

前面已經知道，造成圖片模糊的原因是位圖的像素總數和對應的物理像素個數不一致，那么只需要增加圖片的位圖像素數目，使其接近于設備物理像素就解決了這個問題。
因此我們采用 @2x 或者 @3x 的圖片，就是為了使圖片的位圖像素和設備位圖像素的數目接近于 1:1，就能使圖片清晰顯示不模糊。

位圖像素數目大于物理像素的情況

前面講到了圖片在移動設備上預覽時變得模糊是因為圖片的位圖像素總數小于物理像素的總數，而設備采用填充算法進行填充的原因。如果位圖像素的數目大于物理像素，又是怎樣的情況呢？
舉個例子，我們將一張 750px * 400px 的圖片在 PC（設備像素比為1）上設置為 375px * 200px 顯示，由于位圖的像素數目大于物理像素的數目，這樣一來即使使用全部的物理像素也無法完整顯示這張圖片，因此瀏覽器也會經過一定的算法，將圖片進行壓縮，使得壓縮后圖片的位圖像素等于物理像素。
對于這個過程，下面這張圖片解釋的十分形象：

圖片壓縮

適配不同的設備

我們已經知道，不管是圖片的位圖像素數目大于物理像素，還是圖片的位圖像素數目小于物理像素都會造成顯示上的差異，要么是圖片變模糊了，要么是色差和銳利度減少了。因此，要想完美的適配多種設備，就需要針對不同設備采用相應的圖片，使得圖片的位圖像素數目等于物理像素。
通常情況下，設備像素比為 1 的設備上使用 @1x 的圖片，在設備像素比為 2 的設備上采用 @2x 的圖片，在設備像素比為 3 的設備上采用 @3x 的圖片。如果對于移動端適配要求完美，就采用上述的方案，如果要求一般，提供 @1x 和 @2x 的圖片也是可以的。要求再低一點，可以統一使用 @2x 的圖片，這樣對于低分屏會增加一些流量消耗，但是顯示效果也是不錯的。

總結

本文解答了為什么在高清屏下需要使用 @2x 或者 @3x 的圖片，這是由于位圖的像素數目小于物理像素數目的原因，對應的，在后面也分析了位圖像素數目大于物理像素數目的情況。

附：參考資料
移動端高清、多屏適配方案
使用Flexible實現手淘H5頁面的終端適配

完。