为什么移动端需要@2x或者@3x的图片

上篇文章 讲到了我对设备像素比的理解，但在写文章的过程中，也一直有一个疑惑的地方：为什么在 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 个物理像素将采用填充的方法来显示图片。
所谓填充，就是就近取色，这也是造成图片模糊的原因。下面这张图片解释的十分形象：

就近取色

图片来源： https://div.io/topic/1092

解决之道：使位图像素个数和物理像素个数一致

前面已经知道，造成图片模糊的原因是位图的像素总数和对应的物理像素个数不一致，那么只需要增加图片的位图像素数目，使其接近于设备物理像素就解决了这个问题。
因此我们采用 @2x 或者 @3x 的图片，就是为了使图片的位图像素和设备位图像素的数目接近于 1:1，就能使图片清晰显示不模糊。

位图像素数目大于物理像素的情况

前面讲到了图片在移动设备上预览时变得模糊是因为图片的位图像素总数小于物理像素的总数，而设备采用填充算法进行填充的原因。如果位图像素的数目大于物理像素，又是怎样的情况呢？
举个例子，我们将一张 750px * 400px 的图片在 PC（设备像素比为1）上设置为 375px * 200px 显示，由于位图的像素数目大于物理像素的数目，这样一来即使使用全部的物理像素也无法完整显示这张图片，因此浏览器也会经过一定的算法，将图片进行压缩，使得压缩后图片的位图像素等于物理像素。
对于这个过程，下面这张图片解释的十分形象：

图片压缩

图片来源： https://div.io/topic/1092
这样处理的结果是：图片清晰度不会发生变化，但是会有一些色差及锐利度的减少。

适配不同的设备

我们已经知道，不管是图片的位图像素数目大于物理像素，还是图片的位图像素数目小于物理像素都会造成显示上的差异，要么是图片变模糊了，要么是色差和锐利度减少了。因此，要想完美的适配多种设备，就需要针对不同设备采用相应的图片，使得图片的位图像素数目等于物理像素。
通常情况下，设备像素比为 1 的设备上使用 @1x 的图片，在设备像素比为 2 的设备上采用 @2x 的图片，在设备像素比为 3 的设备上采用 @3x 的图片。如果对于移动端适配要求完美，就采用上述的方案，如果要求一般，提供 @1x 和 @2x 的图片也是可以的。要求再低一点，可以统一使用 @2x 的图片，这样对于低分屏会增加一些流量消耗，但是显示效果也是不错的。

总结

本文解答了为什么在高清屏下需要使用 @2x 或者 @3x 的图片，这是由于位图的像素数目小于物理像素数目的原因，对应的，在后面也分析了位图像素数目大于物理像素数目的情况。

附：参考资料
移动端高清、多屏适配方案
使用Flexible实现手淘H5页面的终端适配

完。