Retina屏下的图片优化

[Roe-Tian]

前言

这篇文章的目的是讲解二倍图和三倍图使用时的问题的。之前在开发过程中，总是会遇到一些字符类的图案，无法使用css语法来实现效果。因此，只能够添加图片来展示。但是，单纯的添加图片，会导致图片在部分手机上面看上去模糊不清。因此，我们往往会使用到二倍图和三倍图。同时，还有其外在的原理需要我们去明确。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
4. 经过了这些区分，我们就可以根据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屏下的图片优化