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博客

欢迎订阅微信公众号