【原创】HTML&CSS学习笔记（11） ----像素px，屏幕大小，PPI等知识

最新推荐文章于 2024-05-05 01:06:48 发布

奔跑的犀牛先生

最新推荐文章于 2024-05-05 01:06:48 发布

阅读量2k

点赞数 1

分类专栏： html&css

本文链接：https://blog.csdn.net/xuemanqianshan/article/details/86586327

版权

html&css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

在众多前辈的基础上，还是得自己学习，我自己整理一些关键知识点

文章写得不是很浅显易懂，专业性也不够，权当我自己学习过程的一点积累吧。

备注下：栅格处理，PC显示器调整，包括CSS的ppi 我还没搞懂，先备注着

一基本概念：图像，像素，分辨率等

1 图像：

和纸面上画的图像不同，计算机存储的图像是以像素点存储的，像素点也是二进制数据。

图像在计算机里是以很多个像素点的矩阵形式存储的，可以认为是一个带颜色的像素点矩阵表。

2 像素/像素点 px pixel ----------像素点是图片的最小单位

百度百科内容：像素是指由图像的小方格（正方形）组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。可以将像素视为整个图像中不可分割的单位或者是元素。不可分割的意思是它不能够再切割成更小单位抑或是元素，它是以一个单一颜色的小格存在。每一个点阵图像包含了一定量的像素，这些像素决定图像在屏幕上所呈现的大小。

3 分辨率 ppi： 每英寸面积上的像素数量 pixel per inch

分辨率决定了位图图像细节的精细程度。通常情况下，图像的分辨率越高，所包含的像素就越多，图像就越清晰，印刷的质量也就越好。同时，它也会增加文件占用的存储空间。

二视觉过程

2.1 视觉过程，是一个漏斗模型

首先，我觉得这么描述更容易懂

源文件图片----->多种！电子显示器----->人眼
不能忽视，观察者--人--我们自己的眼睛这个特殊显示器的观察上限
一般电子显示设备，最大的特点就是，长宽，分辨率五花八门，种类多！规格多！乱！
图片本身存储的宽高像素点，图片尺寸等等决定的原始源文件PPI
为什么说是一个漏洞模型，虽然这是广告学的概念，但是可以明显看到，现代显示设备，人眼才是瓶颈！图片本身像素可以很多，分辨率很高，当然图片精度太高，也会造成太大。

2.2 各种瓶颈数据

图片本身的存储规格：图片宽高，像素总数，颜色数等等决定了图片大小
机器（各种显示器）的DPI上限，据说是300？
人眼能识别的ppi的上限是？一般是300PPI，（匀速帧率有动态模糊）24-30帧，否则90-120帧

2.3 人眼的数据详细解释

人眼的极限分辨率为100 um, 而动物细胞的大小在10--20 um之间。

（和观察距离强相关）PPI超过300才算视网膜屏，那就是苹果的Retina视网膜屏幕

全球知名的手机厂商苹果将自家超过300ppi的屏幕称之为“视网膜屏”也正是因为当达到300ppi时，像素点的边界将不再为人眼所察觉，人眼将不再感受到画面的颗粒感，此时以前在功能机时代才能看到的屏幕上一点点的发光电将再也不会被“看到”。

据等效ppi公式计算后在2米距离观看55英寸4K电视的等效ppi约600左右，远远超过人眼所能分辨的数值，这已经足够满足一般家庭的使用。也难怪人们现在并不看好8K，毕竟4K已经够看了，何必再破费。

以下百度到的知识，红色是我补充的：

人眼的帧数识别：（在匀速帧率，且有动态模糊的2个前提下）人眼能分辨的每秒帧率一般在24-30帧/秒

人眼的真实别帧的能力在90-120

电影24帧，单机游戏优化好匀速帧率也许可以30帧，网络游戏很难保证匀速帧率，一般得在30-90帧左右。但是也造成开销。

视觉残留是1/24秒，这24分之一秒，是从全有到全消息这个过程，24之一秒内，越来越暗，直到消失

拍摄电影时候，24秒拍一个画面，但电影有个重要问题，曝光时间，必需也是24分之一秒，这个时间内，要全部曝光在感光芯片上，而这24分之一秒的取材，可是大自然，大自然可是无限帧的，如果这24分之一秒，拍的是动态的，摄影机在动的话，那么会有很多少同的画面，同时拍到芯片上进行叠加，最后形成一个图片

相机曝光时间是指从快门打开到关闭的时间间隔，在这一段时间内，物体可以在底片上留下影像，曝光时间是看需要而定的，没有长短好坏的说法只有需要的讲法。比如你拍星星的轨迹，就需要很长的曝光时间（可能是几个小时），这样星星的长时间运动轨迹就会在底片上成像。如果你要拍飞驰的汽车清晰的身影就要用很短的时间（通常是几千分之一秒）。曝光时间长的话进的光就多，适合光线条件比较差的情况。曝光时间短则适合光线比较好的情况。

而游戏呢，游戏是一张张静止的画面拼接的，每一张图片都是静止不动拍摄出来的，是绝对清晰的，如果到24分之一秒的下一帧，也是无比清晰的照片，从这一帧到下一帧，中间的位移的图像，就全部丢掉了了，这些信息没有了，所以我们看着就非常卡。

因为人眼的残影现象，所以只要两帧画面切换时间高于1/24秒，人眼是分辨不出来的，那么对人来说，他就是连续的，这就是24帧的由来。但是人眼的速度应该可以更快的，例如经过训练的运动员。

关在就在于帧率间隔时间，也就是帧与帧之间播放的间隔时间，电影或是动画都是事先压制的视频格式，所以帧率间隔时间也是相同的。在这种匀速播放的状态下24fps就可以保证流畅。而游戏就不同了，因为游戏的画面一般都是即时演算的，（服务器客户端传输受网速影响，客户端处理受客户端机器配置和当时的性能影响）每一帧的生成速度都会略微不同。一旦打破了匀速播放的规律，就要用更多的帧数去弥补。因此，这个值就决定了你流畅游戏的最低帧数。一款优化成功的游戏帧率间隔时间一定是比较接近的，如生化危机5、6、启示录，只需要30fps就可以保证游戏流畅。

因为真实影像运动时的模糊轨迹会帮助影像更加连贯，电脑会准确地显示瞬时的画面（像是一台快门速度无限大的相机），没有动态模糊使流畅度降低。

https://blog.csdn.net/github_38885296/article/details/77914436

一个游戏论坛里讨论的挺不错

https://tieba.baidu.com/p/2422136023?red_tag=2534816272

三进阶概念：图像，像素，分辨率等

3.1 为什么分辨率概念说的是密度，应该用面积，为什么分要用对角线？

因为早期CRT显示器是曲面屏，所以用半径-直径定义，后来显示器改成平面的矩形了，屏幕是完全矩形了，但沿用了对角线

参考下面这段解释

https://www.cnblogs.com/imjustice/p/resolution_dpi_ppi_screen_size.html

研究了一下为什么屏幕尺寸是用这个单位。据说是因为历史原因，因为一开始的屏幕是CRT的球形屏幕，CRT屏幕的现实原理就是用电子枪打出高速的电子束打到显示屏上的荧光粉发光。电子枪的射击范围是一个圆，自然就用直径来表示大小。而之后显示器变成矩形以后其实内部依然是电子枪，所以就遗留下来这中屏幕尺寸的单位。

另外一个说法是说显示器厂商认为使用对角线长度当做单位可以让大家觉得显示器更大一点。。: )

3.2像素都是正方形？

这个与不同类型屏幕的显示原理有关系，LCD屏幕上每一个像素点其实都是有三个微小的RGB三色发光单元通过控制它们的发光比例来显示一个颜色，这三个发光单元所组成的像素点大小以及像素点之间的间隔在制造时候就决定好了，所以LCD的物理分辨率是固定的。而更古老的CRT是通过三速电子束不断以扫描方式轰击屏幕上的荧光粉来发光显示，电子束的大小间隔可以通过实时的改变偏转磁场的强度频率等进行改变，所以CRT有最大分辨率之说，当然电子束也不可能无限大所以还有最小分辨率，但是最大最小间的范围很广，落在这个范围的分辨率都是一对一的物理分辨率并非计算机插值计算。此外CRT的显示原理还决定它的像素点不一定需要是方形的，所以你现在在PS，AE等的文档设置还能找到非1:1像素点的设置。

3.3 电子设备上，DPI和PPI一定相等？---并不是一个像素值有1个发光点显示它！

两个参数的区别就在于Dot和Pixel的区别，dot值的是显示器上每一个物理的点，而pixel指的是屏幕分辨率中的最小单位。这个两个难道会不一样么？会！当一个像素需要多于一个屏幕上的物理点来显示的时候dot就跟pixel不一样了。这个有另一个叫法叫做dppx(dot per pixel)，即每个像素中有多少个点。大部分的显示器中一个像素即一个点，但目前一些比较好的屏幕和一些手机屏幕中dppx会大于1。比如说Mac Retina，iPhone，HTC One等。

3.4 像素的色彩数值？--差别很大

8位色

24位色：真彩色

32真彩色，比24位色多了8位透明度

https://www.cnblogs.com/1175429393wljblog/p/5404626.html

3.5图片分辨率和屏幕分辨率

这里都有一个假设：

发光点dot 或者是像素点pixel 都是正方形
屏幕的dot分布是均匀的，图片的pixel分布是均匀的
其实是在每个屏幕发光点dot上显示1个pixel像素点，但有的屏幕会用几个发光点dot显示1个像素点，这种屏幕更清晰！！

图片分辨率: 这是图片本身存储的宽高，像素点决定的

屏幕分辨率: 屏幕dot支持的像素pix显示密度

分辨率，又称解析度、解像度，可以从显示分辨率与图像分辨率两个方向来分类。

显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。

图像分辨率则是单位英寸中所包含的像素点数，其定义更趋近于分辨率本身的定义。

3.6 为什么图片分辨率越高越好？--栅格处理

https://baijiahao.baidu.com/s?id=1605834796518990333&wfr=spider&for=pc

栅格处理

栅格处理，实际就是将图片在物理尺寸不变的情况下，对DPI或PPI进行调整，图片的信息量会受到影响。图像为何需要进行栅格处理？因为任何设备都有固定的解析能力，比如很多荧幕的解析能力是72PPI，这时一张全屏后（即在屏幕的物理尺寸下）从信息量上来说有300PPI的图片显然超过了荧幕的解析能力，因此对荧幕来说这么大的图片是没必要的，把图片在荧幕的物理尺寸下处理为72PPI就刚好了。

从上面的例子中，你也可以看出，栅格处理无处不在。你在解析能力为72PPI的电脑荧幕上查看一张图片时，不论你如何放大缩小图片，肉眼看到的都是72PPI的图像。即便图片可能被放大到模糊，你看到的仍是72PPI，因为电脑荧幕会将任何图像栅格处理到72PPI。

然而在栅格处理的过程中，处理结果的质量和原图质量有很大的关系。比如，一张在改物理尺寸下，信息量可以达到300PPI的图片，被设备栅格到150PPI，它仍然会是清晰的。而如果原信息量只有72PPI，栅格到150PPI就会看起来模糊。

据说相等的时候最好，但是问题是你无法决定只在某张显示器上显示！！！

因为显示设备可能很多，所以一般来说越高越好

许多软件可以帮助你了解图片实际尺寸下的PPI，比如使用Photoshop，在300PPI下创建A4的文件（尺寸21×29.7厘米，对应分辨率2480×3508像素）并做出图片，那么大多数情况下都可以完美印刷。正如前文所述，大多印刷设备的解析能力是300DPI，因此在该图片的信息量下，1个像素刚好对应1个点，甚至不需要栅格处理。而如果你强行使用400PPI来创建A4尺寸的文件，拿到300DPI的设备上会被栅格，说不定还不如300DPI的质量好（毕竟是有损处理，但这种差别未必能看得出来）。

3.7 dpi与ppi

DPI = Dots Per Inch -----物理设备的发光点！！！
PPI = Pixel Per Inch-----显示图片的最小单位，非物理的！！！

DPI是英文Dots Per Inch的缩写，意为点每英寸。应粗你还是那个英寸，但是点的意义有很多。一般来讲，你可以把Dot理解为取样点，即物理设备可以解析的最小单位。在印刷时，它就可以作为印刷网点，而在鼠标等电子设备上，可以理解为最小操作阈值（即设备会把多么远的两个点当作一个点来处理）。

3.8 屏幕尺寸大小一样，也就是对角线一样，并不代表面积一样，所以分辨率也可能不同！

https://www.cnblogs.com/imjustice/p/resolution_dpi_ppi_screen_size.html

差不多是这样，不过有点漏的，其实跟屏幕的长宽比例也有关系，虽然现在绝大部分屏幕都是16：9，但是有少部分21：9的，还有以前普屏时代的4：3（ipad就全是这个比例的，顺便说一句，平板电脑这个比例最好，宽屏非常不好用）
首先所有人高中学不等式的时候一开始接触的应该就是a^2+b^2>=2ab吧，证明过程就是从(a-b)^2>=0所以a^2+b^2-2ab>=0得出来的，并且还可以得出当a=b时ab的积达到最大值
这里把a和b看成屏幕的长和宽，a^2+b^2就是屏幕对角线的平方，屏幕对角线固定时，屏幕的长和款越接近（相差越小）面积越大，长和宽相差越大面积越小
所以计算ppi的时候要确定屏幕比例，而不能光说“对角线是1英寸的屏幕有多少像素点”，因为真正决定像素点密度的不是对角线长度而是面积

3.9 PC显示器调整分辨率的解释

1 据说CRT时代，确实是可以调整显示器的真实分辨率的

2 液晶屏时代，实际上是进行栅格化？？

人家系统给你推荐的是1366px*768px的分辨率，你知道意味着什么吗？没错，微软在这块屏幕上竖向设置了768个像素，横向设置了1366个像素。再怎么拉扯，这个数字是不会变了。那么，为啥我还能调整分辨率呢？我要是调整到800px*600px，按照定义，横向就是600个像素，竖向就是800个像素了啊。其实呢，你把分辨率调成800*600，系统就会分配给你800*600个有效像素个数，也就是真实的色彩块。其他的个数呢，就由系统自作主张，通过一系列运算给你一个模拟色彩块，填充成正好1366*768个色彩块。这些拿来充数的像素块，和真实的像素块放到一起。就好比一个正规军，里面掺了很多杂牌军一样，只能是队伍不好带了