图片知识一文知

由于博客的原因，每周都需要进行图片处理，所以这里对相关知识做一个总结，包括图片格式、图片压缩的原理、水印、工具、最合适的大小等等。

计算机如何显示图片

图片显示的两个要素是密集排列的像素和每个像素的颜色，仅从原理理解的角度看，LED显示屏是最好的模型。如下图所示，图中每个小圆点是一个二极管，二极管的亮灭即可确定显示的文字和图形，当我们采用体积更小、数量更多、可以显示不同颜色的二极管，也就构成了图片显示的基础。

OLED（Organic Light-Emitting Diode，有机发光二极管）就是这种思路发展的结果，也正是因为OLED是根据材料的特性自发光，因此某一处亮的太久会导致材料老化，从而出现亮度衰减，这就是俗称的「烧屏」，但也同样由于自发光，OLED的可视度和亮度都很高，且没有可视角度问题，可以做到很薄。

与OLED相对的是传统的LCD（Liquid-Crystal Display，液晶显示屏），它的基本思路是屏幕本身不发光，但在屏幕后面设置一个发白光的光源，在光源和屏幕间设置许多滤光片控制颜色，然后偏转光线角度从而控制亮度，从而显示最终的颜色。LCD没有烧屏现象，它的老化是光源的整体老化，显示在屏幕上是全局的发黄或颜色不鲜艳。

我们已经知道每个像素都是三种颜色光的混合，但实际上这三种颜色光还有亮度的区别，共分为0-255级亮度，因此三种颜色的不同亮度一共可以构成 256×256×256 中组合，这也是一个像素可以显示的颜色总数，远远超过人眼对颜色的分辨率。

显卡所负责的，正是计算机和屏幕之间的转换过程，计算机中的程序将像素的颜色值送入显存，GPU随即根据显卡BIOS中存储的对应信息将其转换成电信号输出给显示器，我们就在屏幕上看到了图像。

图片颜色数据的存储

由上我们已经知道了计算机中存储的实际上是每个像素的颜色值，通常有多种编码体系，最常用的是RGB颜色空间，即每个像素点用三个0-255范围内的数字存储，分别表示R（red)、G(green)、B(bule)三种颜色，最终即可表示整个图片。另外，如果仅用一个数字存储，那么就只有亮度信息，表现出来就是黑白图片。

但这样存储会占据大量空间，一个数字（最大255）就需要用8位（1个字节）来存储，每个像素就需要3个字节，仅一个 1024×768 的图片就需要 2.25MB，更不用说更高分辨率的图片了，因此图片的编码格式有了必要性。

常见的编码格式有bmp、jpg、png、webp、svg，

• bmp 就是没有额外编码的存储方式，除了文件头、图像头，剩下的就是所有的像素数据，除了用三个字节表示一个像素外，还可以用 8 位（256中颜色）、4位（16中颜色）和1位（黑白）来表示一个像素。文件头信息和 bmp 图片头信息的结构如下
• jpg是有损压缩格式，拥有一个质量参数选项，取值在1-100之间，值越大越保真，但图片体积也越大，通常可以选择70或80，如果在50以下，图片就会有明显失真。用相机拍出来的照片一般就是高保真的 jpg 图片，一般有一个附属的 exif 信息，其中包括图像大小、拍摄时间、拍摄的相关参数等信息。jpg有个非常有用的特性是支持不完全读取整张图片，即可以选择读取原图、1/2、1/4、1/8大小的图片，相比于读取原图再将其缩小的方法，这种方式读取的速度要快很多
• png是一种无损压缩格式，可以不损失原图的颜色，比较适合矢量图、几何图
• webp是google开发的一种有损、透明图片格式，相当于jpeg和png的合体，google声称其可以把图片大小减少40%

总结：jpg适合存储色彩多的拍摄图片，png适合存储几何特征强烈的矢量图

最合适的图片尺寸

前端的布局一般会对图片进行处理，即所谓的自适应，不同的设备使用不同的图片尺寸，所以我们应当选择较大的尺寸，但尺寸过大又会造成加载过慢，所以不能太大。受页面宽度影响，1024×768的尺寸目前来说已经足够，所有上传到博客的图片按这个1024宽进行统一处理，如果是高大于宽的图片，则以768进行处理。

图片处理软件

我对图片处理的需求主要有如下这些

• 本地客户端，最好免安装。因为有些图片涉及隐私或版权问题，不希望使用在线的图片处理软件，一个本地软件最合适不过了；
• 可以调整图片大小（压缩）
• 可以转换图片格式
• 可以加水印，加阴影
• 可以去除exif信息
• 可以批量执行上述提到的功能
• 最好能提供命令行接口，便于之后进行自动化，但不是刚需

之前图片压缩主要使用图压，有时候使用在线的 OKTools，加阴影主要使用 WinSnap，其它功能均无法得到满足

目前统一使用Image Tuner，可以轻松提供上述除命令行接口外的所有功能。

参考

[1] 知乎，计算机中的文字和图像是如何显示的，https://www.zhihu.com/question/296297701

[2] CSDN，各种图片编码格式详解，https://blog.csdn.net/jemenchen/article/details/52658476