数字图像处理

图片文件格式有可能会对图片的文件大小进行不同程度的压缩，图片的压缩分为有损压缩和无损压缩两种。

有损压缩（lossy compression）。指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量，并且这种损失是不可逆的，我们不可能从有一个有损压缩过的图片中恢复出全来的图片。有损压缩分为两种机制，一种是有损变换编解码，首先对图像或者声音进行采样、切成小块、变换到一个新的空间、量化，然后对量化值进行熵编码。另外一种是预测编解码，先前的数据以及随后解码数据用来预测当前的声音采样或者图像帧，预测数据与实际数据之间的误差以及其它一些重现预测的信息进行量化与编码。有损压缩的压缩比最高可达200:1甚至更多。

无损压缩（lossless compress）。只在压缩文件大小的过程中，图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。常见的无损压缩方法由霍夫曼编码、行程编码和算数编码。无损压缩的压缩率为2:1到5:1

图片来自：magiconch.com/patina/

计算机在表示颜色的时候，有两种形式，一种称作索引颜色(Index Color)，一种称作直接颜色(Direct Color)。

索引色/调色盘。用一个数字来代表（索引）一种颜色，在存储图片的时候，存储一个数字的组合，同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色，比如1bit（黑白），8bit/1bytes（256色），16bits（高彩），24bits（真彩），48bits（全彩），通常为256种颜色，对应再计算机系统中，使用一个字节来索引一种颜色。

直接色。使用四个数字（R，G，B，A）来代表一种颜色，这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度。现在流行的显示设备可以在这四个维度分别支持256种变化，所以直接色可以表示2的32次方种颜色。当然并非所有的直接色都支持这么多种，为压缩空间使用，有可能只有表达红、绿、蓝的三个数字，每个数字也可能不支持256种变化之多。

点阵图（Bit Map），也叫做位图，像素图。构成点阵图的最小单位是象素，位图就是由象素阵列的排列来实现其显示效果的，每个象素有自己的颜色信息，在对位图图像进行编辑操作的时候，可操作的对象是每个象素，我们可以改变图像的色相、饱和度、明度，从而改变图像的显示效果。点阵图缩放会失真，用最近非常流行的沙画来比喻最恰当不过，当你从远处看的时候，画面细腻多彩，但是当你靠的非常近的时候，你就能看到组成画面的每粒沙子以及每个沙粒的颜色。

矢量图（Vector Map），也叫做向量图，就是缩放不失真的图片格式。矢量图并不纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一付矢量图的时候，软件对图形象对应的函数进行运算，将运算结果[图形的形状和颜色]显示给你看。无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，其显示效果仍然相同(不失真)。

● BPM（BitMap）：无压缩、支持索引色和直接色、点阵图

● JPEG：有损压缩（更小的体积）、直接色（更丰富的色彩）、点阵图、不支持透明

● PNG-8：无损压缩、索引色、点阵图、支持透明

● PNG-24：PNG-8的直接色版本

● GIF：无损压缩，采用8bit索引色、点阵图，支持动画，动画边缘会有毛边

● APNG：无损压缩，基于PNG拓展的动画格式，支持透明度，支持真彩图片，向下兼容显示为静态图

● WebP：新的全能选手，支持有损压缩/无损压缩，支持动画和alpha透明度

● SVG：无损的矢量图

JPEG算法流程如下图，它分为七个过程：色彩空间转换（RGB->YCbCr），色度抽样，区块分割（8x8），离散余弦变换，量化，Zigzag/差分编码和Hufffman编码。

具体的分析推荐阅读：itiandong.com/2021/paper-…

GIF vs APNG：apng.onevcat.com/demo/

我们可以看到GIF和APNG在文件大小上相差不大，但是GIF图片边缘有毛边。

APNG/GIF/WebP/Lossy WebP在压缩比例对比：littlesvr.ca/apng/gif_ap…

APNG在动画压缩上的表现上最好

WebP集多种优点于一身，但是其兼容性问题是一个问题（虽然时至今日除了IE主流浏览器都支持），但是我们需要对不支持WebP图片格式的浏览器做降级方案。

图片来自：caniuse.com/

大型网站的静态图片通常保存在CDN（内容分发网络）上以加速网络传输，可以通过在CDN上开启图片优化，对符合要求的图片请求，自动进行 WebP 等格式图片压缩。

当请求 a.jpg 文件时，服务端根据 HTTP 请求头的 accept 字段 image/webp （使用 User-Agent 判断是不安全的，因为通过大多数国产浏览器可以通过修改内核控制 User-Agent，亦或者是无痕模式也不会暴露 UA），来将我们上传到CDN的图片自动转换成webp传输给前端。

我们可以使用文生图的 Stable Diffusion 来进行压缩，Stable Diffusion由三个模块组成，VAE、U-Net和文字编码器。

压缩图片时不需要文字输入，所以我们可以舍弃文字编码器；而VAE则可以将图片编码到潜在空间表征（ latent (潜在) space representation）。在潜在空间表征下，图片分辨率变低了（从512×512到64×64），但是色彩精度却提高了（从8位提升到32位）。

VAE还能将潜在空间表征的图片再解码回图片原来的样子。就算在潜在空间表征上再次对图片进行压缩，VAE也能将图片大致还原成本来的样子。最终，我们将一张未经压缩的768kB的图片压缩到了5kB。肉眼看过去，同样是把图片压缩到这个大小，JPEG和WebP的压缩损失就很明显了。

当然，但这种压缩算法并不是完美的。虽然这种图片压缩算法能骗过人眼，但在客观评价图片质量的两个参数PSNR和SSIM上，它相对JPG和WebP并没有明显的优势。

说到底，这种图像压缩算法还是让AI根据一个压缩过的缩略图去“猜”它的原图长什么样子，还原出的图片在一些细节上难免和原图不一致，这反而造就了一种新的“电子包浆”。

同时，AI 的复杂性也让这种图像压缩算法难以推广。传统图像压缩算法是一套固定的算法，可以用轻量化的程序实现。而 AI 则以计算量庞大著称，这种 AI 图像压缩算法需要足足 4GB 的空间存储参数文件，并且解码时间也比其他压缩算法更长。

前端性能优化原理与实践 - 图片优化

Web 帧动画解决方案 - APNG原理与实现

www.zhihu.com/question/20…

“电子包浆”：我的表情包怎么绿了？