一 、像素是什么?
The pixel is the basic unit of programmable color on a computer display or in a computer image. Think of it as a logical - rather than a physical - unit.
像素与cm,inch不同,并没有物理大小,仅仅代表图像的一个信息点。
css pixel在这个层面上也是一样的,仅仅是逻辑单位。
二、像素怎么用?
像素作为基本单位贯穿图像的生老病死 :
- 采样:拍摄或人工合成的图像,像素点越多,获得的信息量就越大。像素点的颜色是由几位颜色混合而成,颜色种类越多,效果越好(通常)。
- 图像处理:像素点的信息输入电脑,做矩阵运算(暂未深入)。
- 图片显示:像素点必须经由实际的物理元件来还原,类似的技术有LCD,CRT,LCD等,都是由物理实际的点来还原图片的像素信息。常见的概念有:分辨率,dpi,ppi。
简单说分辨率是指像素容量,dpi,ppi是指像素密度。我们当然喜欢大容量高密度的设备。
在用物理像素点(hardware pixel)还原(css pixel)时,我们可以采用1:1,也可以采用4:1,Retina屏就是采用的后者,GALAXY LG G3 等还拥有更高的比例,这个比例就是
Device PX Ratio。
三、常见的例子
3.1 Retina屏幕造成的高物理像素密度
举例说明,一张100x100的图片,通过CSS设置它{ width:100px; height:100px }。在普通密度桌面显示屏的电脑上打开,没有什么问题,但假设在手机/或者Retina屏幕的Mac,按照逻辑分辨率来渲染,他们的devicePixelRatio=2,那么就相当于拿4个物理像素来描绘1个电子像素。这等于拿一个2倍的放大镜去看图片,图片可能因此变得模糊。
如上图:对于dpr=2的retina屏幕而言,1个位图像素对应于4个物理像素,由于单个位图像素不可以再进一步分割,所以只能就近取色,从而导致图片模糊(注意上述的几个颜色值)。
所以,对于图片高清问题,比较好的方案就是两倍图片(@2x)。
如:200×300(css pixel)img标签,就需要提供400×600的图片。
如此一来,位图像素点个数就是原来的4倍,在retina屏幕下,位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例,图片自然就清晰了(这也解释了之前留下的一个问题,为啥视觉稿的画布大小要×2?)。
适配问题:
- 用JS检测硬件信息,更改图片文件
- 优点:
代码量比较小;方法相对来说比较简单,维护方便; - 缺点:
通常会用Jquery库,加载这个库需要时间,图片的加载会滞后;方法原理是通过修改图片链接完成高分辨率适配,因此在链接被修改之前浏览器会执行加载图片的动作,即同一处的图片,浏览器即会加载普通分辨率的片、也会加载高分辨率图片,带宽更加浪费;图片可能是动态加载的;不能直接对Css进行操作,修改背景图片的大小的时候就会比较困难;
2.媒体查询 - 优点:
只需要加载一次图片;
在现代浏览器中有比较好的支持;
不依赖JS,速度最快,并且没有闪烁现象; - 缺点:
只能修改块(如Div)中的图片的背景,不能修改作为<img>插入到文中的图片的分辨率,而本站的大部分需要处理的图片都说不是块的背景。
对于每个需要优化的图片,都需要单独写一条Css,并且这个Css还比较长,稍微麻烦
3.默认Retina+background-size做适配 - 优点:
同时支持普通屏幕和Retina屏幕,大小一致;
只需要上传一张图片即可,不用重复处理; - 缺点:
默认加载Retina高分辨率的图,对于手机这样的设备造成更大压力;
每一站图片都需要设置Css的background-size属性,这样的方法可用性并不高;
通过这种方法呈现的图片难以创建流体布局的网站,即不能随窗口大小改变图片大小;
获取更多方法参考:https://www.inoodle.net/adaptive-image-sizes-for-devices/
3.2 高清图片与显示器性能不足
很明显,在普通屏幕下,200×300(css pixel)img标签,所对应的物理像素个数就是200×300个,而两倍图片的位图像素个数则是200×300*4,所以就出现一个物理像素点对应4个位图像素点,所以它的取色也只能通过一定的算法(显示结果就是一张只有原图像素总数四分之一,我们称这个过程叫做downsampling),肉眼看上去虽然图片不会模糊,但是会觉得图片缺少一些锐利度,或者是有点色差(但还是可以接受的)。
用一张图片来表示: