Retina屏下的图片优化

2,547 阅读5分钟

前言

这篇文章的目的是讲解二倍图和三倍图使用时的问题的。之前在开发过程中,总是会遇到一些加粗的图案,无法使用css语法来实现效果。因此,只能够添加图片来展示。但是,单纯的添加图片,会导致图片在部分手机上面看上去模糊不清。因此,我们往往会使用到二倍图和三倍图。同时,还有其外在的原理需要我们去明确。

正文

使用了图片,最主要关注的就是图片的展示效果优化问题。虽然,在这个需求中,似乎并没有体现的这么重要。但是,优化问题也是需要做的(每解决一个问题,就是在为一堵墙添砖加瓦,加固)。

图片展示效果

展示效果,通常来说,就是整个屏幕的清晰度。整体屏幕的清晰度主要和三个因素有关系:

  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的盒子,保持了相同的物理尺寸。如图所示:

Retina屏

这种方式,就像是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博客

如果你对我的文章感兴趣的话,欢迎关注我的微信公众号。

微信公众号