前言

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

正文

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

图片展示效果

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

图片本身像素点是否精细
屏幕的分辨率
屏幕大小

如果是图片本身的问题，那自然不需要多进行优化，直接换图就可以了；而其他的两个因素，我们就需要来好好聊聊了。

屏幕分辨率，即设备分辨率，设备的物理像素。图片大小，从侧面反映，就是图片像素点的多少。熟悉图像处理的人，都知道图片是由一个个的像素点组成的，而像素点中就包含了图片的信息，再由我们经常使用的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，从语意上来说明就是设备像素比。它是设备上物理像素和设备独立像素的比例。

一般而言，目前的屏幕可以分成以下几类：

普通高密度桌面显示屏：dpr为1
高密度Retina桌面显示屏(Mac系列)：dpr为2
主流的手机屏幕：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屏等概念的研究。我们也知道了，为啥需要使用二倍图和三倍图，在何时使用二倍图和三倍图。上述文章总结以下几点：

图片的展示效果
屏幕密度
Retina屏
Retina屏下的图片优化

如果你对我写的有疑问，可以评论，如我写的有错误，欢迎指正。你喜欢我的博客，请给我关注Star~呦github博客

欢迎订阅微信公众号

更多专业前端知识，请上【猿2048】www.mk2048.com

Retina屏下的图片优化相关推荐

关于canvas在retina屏下绘制文字或图像模糊的解决方案
一.问题描述最近在鼓捣canvas的时候,发现绘制在canvas上的文字(或图片)在retina屏幕上会出现显示模糊的问题,感觉很不爽,于是就Google了一番,还真发现了一个解决方案.有兴趣的同学 ...
canvas 实现图片局部模糊_Canvas 在高清屏下绘制图片变模糊的解决方法
前提条件假设我们要在 canvas 中绘制一张 300 x 90 的图片,并且要保证它在高清屏中不模糊.那么我们首先要准备一张 600 x 180的图片,处理过高清屏的同学应该会有这方面的经验. 问 ...
[转]retina屏下支持0.5px边框的情况
2014-12-31更新: 截至到IOS8.1,safari仍不支持@supports 待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新: 1. 修正dpr = ...
emiya-canvas.js 解决ios下拍照倾斜与canvas高清屏下绘图模糊问题
场景解决在移动端拍照,用 canvas 绘图出现图片逆时针旋转 90 度的问题. canvas 在高清屏与retina屏下绘图模糊的问题. 如下图: 就用我老婆来做模特了~ 下图是拍照过后渲染在画布 ...
emiya-canvas.js 解决ios下拍照倾斜与canvas高清屏下绘图模糊问题 1
场景解决在移动端拍照,用 canvas 绘图出现图片逆时针旋转 90 度的问题. canvas 在高清屏与retina屏下绘图模糊的问题. 如下图: 就用我老婆来做模特了~ 下图是拍照过后渲染在画布 ...
Retina时代的前端视觉优化
随着New iPad的发布,平板也将逐渐进入Retina时代,在高分辨率设备里图片的显示效果通常不尽人意,为了达到最佳的显示效果就需要对图片进行优化,这里介绍一些优化方法: 一.用CSS替代图片这一 ...
前端项目分析：我是如何做图片优化的（预加载、懒加载和延迟加载）
众所周知:前端页面上的图片是优化时最重要也是最令人头疼的部分,花费了几个月的时间才优化到令自己满意的一半程度,,,唉,一言难尽啊! 在此将几种方法总结一下,希望能帮到不少人吧- 图片的优化有两种方式: ...
@程序员，一文掌握 Web 应用中的图片优化技巧！
作者 | fecoder 责编 | 郭芮这篇文章,我们将一起探讨,Web应用中能对图片进行什么样的优化,以及反思一些"负优化"手段. 为什么要对图片进行优化? 对于大多数前端工程 ...
qtcreator摄像头显示时间_屏下摄像头手机量产了，然后呢？
作者丨建国邮箱丨tangjianbo@pingwest.com 来源丨人民数字与品玩联合出品全球第一台量产屏下摄像头手机,被中兴抢先了. 中兴 AXON 20 正面屏幕没有任何挖孔,表面看起来完美 ...
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案说明:两个方案均基于Webpack构建. 方案一: 搭建环境及相关配置 webpack 3,需要loade ...

Retina屏下的图片优化

前言

正文

图片展示效果

屏幕密度

Retina屏

Retina屏下图片优化

总结

Retina屏下的图片优化相关推荐

最新文章

热门文章