漫话随笔

Appearance

2D 图形 ​

2D 表达 ​

计算机上的平面图片可以简单看作是一个 u32 类型的数组，每一个 u32 代表了图片上的一个像素的颜色值，从左到右，从上到下，依次排列，一个尺寸为 800*600 的图片，大小就是 480_000 * 4 byte = 1.83 MB，不讨论压缩。一个 u32 数据中的每 8 位代表一个颜色通道的值，一般的，颜色通道模型使用的是 RGBA，各自取值范围都是 0-255，值越大表示该通道的值的颜色混入的越多，对于透明度通道则是，0 的时候代表完全透明，255 的时候代表不透明。在计算机上呈现一个图片需要做的主要工作就是提供一个 u32 颜色数组，从而让其在屏幕的某个矩形区域内进行显示。

R        G        B        α
00000000 00000000 00000000 00000000
255      255      255      255

图片压缩 ​

一个 800*600 的图片消耗的存储空间竟然高达 1.8 MB，这对于计算机的存储是非常不友好的。为了缩减图形大小，往往需要对图片进行压缩。常见的图片压缩算法分为无损压缩和有损压缩两大类：

无损压缩 ​

  • PNG（Portable Network Graphics）：采用 DEFLATE 算法（结合 LZ77 和哈夫曼编码），能够在不损失任何图像信息的前提下有效压缩图片，适用于对图像质量要求极高的场合，如图标、界面元素、插画等。
  • RLE（Run-Length Encoding）游程编码：通过记录连续相同像素的长度来压缩数据，适合色块单一、重复度高的图片。
  • LZW（Lempel-Ziv-Welch）：广泛用于 GIF 格式，通过字典编码方式压缩数据，适合动画、简单色彩图像。

有损压缩 ​

  • JPEG（Joint Photographic Experts Group）：通过离散余弦变换（DCT）将图像分块处理，去除人眼不敏感的高频信息，实现高压缩比，适用于照片、写实图片等对细节损失不敏感的场景。
  • WebP：由 Google 推出的现代图片格式，支持有损和无损压缩，结合了预测编码、变换编码等多种技术，压缩效率高，适合网页图片。

选择合适的压缩算法，可以在保证视觉质量的前提下，大幅减少图片的存储和传输成本。

图片优化 ​