关于图片，我有话说

这是无量测试之道的第185篇原创

1.分辨率和像素的关系

• 分辨率：分辨率是指单位长度内像素点的数量，它的单位通常为【像素/英寸(ppi)】， 例如：72ppi表示1英寸包含72个像素点，300ppi表示每英寸含300个像素点。分辨率决定了位图细节的精细程度，通常情况下，分辨率越高包含的像素就越高，图像就越清晰。
• 像素：是指在由一个数字序列表示的图像中的一个最小单位，称为像素。像素仅仅只是分辨率的尺寸单位，而不是画质。

例子：像素和分辨率组合方式决定了图像数据量。

例如1x1英寸的两个图像，分辨率为72ppi的图像包含72x72=5184个像素，而分辨率为300ppi的图像则包含300x300=90000个像素。在打印时，高分辨率的图像要比低分辨率的图像包含更多的像素。因此，像素点更小，像素的密度更高，所以可以呈现更多细节和更多细微的颜色过度效果。

那么分辨率和像素到底是什么关系呢？

`像素（px）= 英寸(in) x 分辨率(ppi)`

2 .png、.jpeg、.gif之间的区别

首先了解一个名词「Alpha通道」

⚠️是「Alpha通道」不是「Alpha」 Alpha 没有透明度的意思，不代表透明度。opacity 和 transparency 才和透明度有关，前者是不透明度，后者是透明度。比如 css 中的「opacity: 0.5」就是设定元素有 50% 的不透明度。后来 Alvy Ray Smith 提出每个像素再增加一个 Alpha 通道，取值为0到1，用来储存这个像素是否对图片有「贡献」，0代表透明、1代表不透明。

也就是说，「Alpha 通道」储存一个值，其外在表现是「透明度」，Alpha 和透明度没啥关系。

• .png: 常用格式 - 带透明通道的无损图片格式！PNG文件采用LZ77算法的派生算法进行压缩，其结果是获得高的压缩比，不损失数据。.png格式的图片有一个「Alpha通道」。它利用特殊的编码方法标记重复出现的数据，因而对图像的颜色没有影响，也不可能产生颜色的损失，这样就可以重复保存而不降低图像质量。
• .jpeg: 常用格式 - 不带透明通道的0-10级压缩图片格式（11级压缩）！ 压缩比越高，质量越差。网络使用的图片大多都是压缩到5级左右的图片了，一般原来编辑图书使用的话都不是很好的。当然考虑到网络传输的速度，高压缩也是非常合理的。
• .gif: 常用网页格式 - 带透明通道的（静态、动态）图片格式！ GIF格式自1987年由CompuServe公司引入后，因其体积小、成像相对清晰，特别适合于初期慢速的互联网，而大受欢迎。分为静态GIF和动画GIF两种，支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式。其实GIF是将多幅图像保存为一个图像文件，从而形成动画，最常见的就是通过一帧帧的动画串联起来的搞笑gif图，所以归根到底GIF仍然是图片文件格式。

实际开发过程中，图片转成16进制后，前几位包含的信息

将png转为16进制，我们可以发现，前面的8位都是

{0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A}

将jpeg转为16进制，我们可以发现，前面的8位都是 {0xFF, 0xD8, 0xFF, 0xE0, 0x00, 0x10, 0x4A, 0x46}

将gif转为16进制，我们可以发现，前面的8位都是 {0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x90, 0x01}

所以在实际的开发过程中，比如一些第三方框架在写图片缓存的时候，就可以通过获取图片的前几位的16进制就可以确定图片是哪种格式的图片。

end