图像占用着互联网大量的带宽，因为它相比代码有较大的文件大小，据统计，数据加载60%是由jpeg，png，gif 等组成。图像不太可能消失，因此有效的压缩减小文件大小变的很有必要。
图像格式
JPEG，PNG，GIF，SVG，WEBP，AVIF，HEIC，RAW …
光栅：通过对矩形像素网格内每个像素的值进行编码来表示图像。
矢量：使用点、线、多边形来表示图像，提供高分辨率图像。
JPEG，最为广泛使用的图像格式，他很古老，最早可以追溯到1992年第一次发布。
图像以什么样的形式存储的？
以JPEG为例，若一张800*800大小图片，按照rgb各8位，未经压缩大概需要1.7MB左右。
通过JPEG压缩，通常相比原始图像能够得到1/8的压缩比。是如何做到的？
JPEG压缩 首先将图像分割成8*8的小块，这些小块在压缩过程中都是单独进行处理，如图例所示，这张名叫lenna，据说是世界第一张JPG图片。
为什么分割成8*8像素？
1，相邻的像素点数颜色相同几率较大；2，过大的单元格像素会影响DCT运算量。
接下来进行色彩空间转换，RGB像素进行色彩空间转化（所谓色彩空间，就是描述图像颜色的一组数值，如RGB，CMYK等）转换为YCbCr色彩模型(Y指亮度，Cb指色度-蓝色，Cr指色度-红色)。
不同颜色模型有不同的应用场景，如RGB模型适用于显示器这样自发光图案，而在印刷行业，使用喷墨打印，图案的颜色是通过反射光线时产生，通常使用CMYK（青色，品红，黄色，黑色）模型，而在JPEG压缩算法中，需要把RGB图案转换成YCbCr模型。
YCbCr
这里的Y表示亮度(Luminance)，Cb和Cr分别表示绿色和红色的“色差值”，色差最早起源于电视行业，最早电视是黑白，也就是说只需要传输Y信号即可，彩色电视出现后，人们在Y信号之外增加两条色差信号，以传输色彩信息，这么做是为了兼容黑白电视，因为黑白电视只需要处理Y信号即可。
为什么要转换为YCbCr？为什么不是RGB或者CMYK呢？
这是因为人眼的工作机制原因，眼睛之所以能感知图像，因为人眼内含有视锥细胞和视杆细胞。其中视锥细胞具有感知颜色的能力，视杆细胞具有感知亮度的能力，通常我们的眼睛中视杆细胞数量相对较多，所以人眼对亮度的敏感程度要高于对色彩的敏感程度。就像在深夜，可以看清周围的事物，而对周围事物颜色就没有那么敏感。JPEG也是利用这一敏感特性，将亮度和色彩分开来处理的。
基于三基色原理，发现红绿蓝三种颜色所贡献的亮度不同的，绿色的亮度最大，蓝色最暗，基于公式转换为YCbCr色彩模型。
TEXT
Y = 0.299*R' + 0.587*G' + 0.114*B'
Cb = -0.147*R' - 0.289*G' + 0.436*B' = 0.492*(B'- Y')
Cr = 0.615*R' - 0.515*G' - 0.100*B' = 0.877*(R'- Y')
Y = 0.299*R' + 0.587*G' + 0.114*B'
Cb = -0.147*R' - 0.289*G' + 0.436*B' = 0.492*(B'- Y')
Cr = 0.615*R' - 0.515*G' - 0.100*B' = 0.877*(R'- Y')
色度采样
对每个像素点的YCbCr采取4:2:0采样，也就是说Y全采样，而对CbCr进行1/4进行采样。 2比0并非Cb取一半而Cr不取，而是这两个分量间隔取。
约有一半的jpeg格式采用 4:2:0采样，4:2:0采样可减少17%的体积。采用这种采样方式也是如上所说人眼对颜色不太敏感，对亮度敏感，减少一定的色彩像素并不会造成太大的影响。
离散余弦变换（DCT）
一副图像总是由主要色彩和一些不重要的细节构成，丢掉这些不重要细节对图片影响并不大，离散余弦变换就是做这种事情的。
Y信号分量，DCT之后
每张图片的每个像素都可以用余弦函数来表示，形成频域编码，离散余弦编码是将这些频域编码进行变换，将低频信号放到左上角，将高频信号放到右下角，通俗来说低频信号的能量比较高，高频信号能量比较低，在图像表现上低频信号信息总量比较大，对识别图像最关键。而高频信号也就是一些细节。
去掉一些高频信号，对图片影响并不是很大。
去掉1/4和1/2的高频信号，与原图相差不大。
经过上述将高频去进行简化压缩行为，称之量化，后高频区会出现大量的0，这就对压缩很有用。
哈夫曼编码压缩
从左上叫到右下角连续的0急剧上升，这种情况就要用到熵编码技术。
以Z字型来回穿梭，直至最后，到达右下角。左后数据排列如下，后面出现38个0。
将连续的0进行，哈夫曼编码在JPEG中有个EOB字段，表示从字段开始后面全为0。然后再进行哈夫曼编码压缩。
哈夫曼算法被广泛应用在7-zip，zlib，g-zip等场景。
其视频压缩原理大致类似。
最常见的编译器
mozJPEG（渐进式jpeg、量化设定、更好的量化表）
Guetzli 谷歌2016年底开源的编译器，主要针对量化阶段，获得更好的压缩质量，图像压缩后比同质量的libjpeg要小20%-30%。源于一个图片视觉差异评价工具 Butteraugli，分别进行全局微调和高频处理。
WEBP
源于VP8，是Google 2010年开源出来的图像编码解码算法。图像大小平均比png小26%，比同等质量的jpeg小 25%-34%；
AVIF
这种图像格式首次是由 Netflix 这个公司在 2020年2月14号（情人节）这天公布，是由AV1视频的关键帧衍生而来的一种新的图像格式AVIF。
rgb(255, 0, 0) 真的是红色吗?
色彩空间
人眼能看到的颜色是某些特定的光，这些所有的颜色成为色彩空间，色彩空间如何描述？ 最为广泛的是使用 国际照明委员会（CIE）在1931年定制的。
真是色彩空间是三维图片为理解和展示 通过数学转换二维
每种色彩标准由不同行业主导，比如sRGB，这是高清电视，PC，专业图像处理标准，由微软主导。
而DCI-P3 则是有米高梅，迪士尼，华纳影业等影视巨头主导的数字电影色彩标准。
而Display-P3 类似DCI-P3 则是由苹果主导的色彩标准，已广泛用在其他软件和硬件设备产品上。
从图中可以看出来，某个色彩标准是色彩空间的某个子集。比如 sRGB，仔细观察它的色彩范围形成的三角形（或多边形）区域，其绿、红、蓝顶点是其所能呈现最绿、最红、最蓝的颜色。
假如同样的硬件设备、色彩配置一样的情况下，红色 rgb(255, 0, 0) 看上去也会是一样的吗？
不一定，这里涉及一个概念 色准:色彩准确度，记做 ΔE（Delta-E），设备ΔE越小越好。
sRGB 作为最早的色域标准之一，是几乎在任何地方使用的默认色彩空间，也是浏览器使用的标准色彩空间。CSS标准中指定的色彩空间。由于指定标准过早，很多技术概念不成熟，色彩还原度不高，绿色覆盖率极低。也是因为这样，它对显示器要求不高，大多数市面上显示器都能达到100% sRGB。
以前可用的语法定义sRGB色彩空间的颜色，hsl(42, 70%, 50%)，rgb(2, 221, 111)，#fff 这些颜色都在sRGB色彩空间中。
Display-P3 是sRGB的超集，它大约大了50%；
CSS中使用P3广色域
Wide Gamut Color in CSS with Display-P3
TEXT
color: rgb(255, 0, 0); //fallback
color: color(display-p3 1 0 0);
color: rgb(255, 0, 0); //fallback
color: color(display-p3 1 0 0);
demo
色彩深度 电脑使用不同的精度或者深度来描述颜色，比如 css 里面的 rgb 语法，每条通道深度是 8 位
Bit
若R、G、B每种颜色使用一个字节（8bit）表示，每幅图像可以有1670万种颜色；若R、G、B每种颜色使用两个字节（16bit）表示，每幅图像可以有10的12次方种颜色；如果是灰度图像，每个象素用一个字节（8bit）表示，一幅图像可以有256级灰度；若每个象素用两个字节（16bit）表示，一幅图像可以有65536级灰度。
图像加载优化
渐进式
渐进式JPEG编码的一个明显的优点就是，当你以较慢的网速下载图像时，可以得到完整的图像预览。即使仅传输了一部分文件，你也可以查看图片中的内容，并决定是否要等待文件完全加载。
渐进式jpeg(progressive jpeg)图片及其相关 - 张鑫旭
自适应图像
TEXT
<img
src="donut-800w.jpg"
alt="A delicious donut"
width="400"
height="400"
srcset="donut-400w.jpg 400w, donut-800w.jpg 800w"
sizes="(max-width: 640px) 400px, 800px"
loading="lazy"
decoding="async"
/>
<img
src="donut-800w.jpg"
alt="A delicious donut"
width="400"
height="400"
srcset="donut-400w.jpg 400w, donut-800w.jpg 800w"
sizes="(max-width: 640px) 400px, 800px"
loading="lazy"
decoding="async"
/>
WEBP
2010年推出，高效压缩编码，且支持透明，兼容性好，相比JPEG格式减少大约25~34%。
根据维基百科的介绍，到 2021 年 3 月份，全球 93% 的浏览器份额已经支持 webp 图片格式。
主题色
CSS实现（图片过多不建议使用）
TEXT
filter: blur(100px);
transform: scale(5);
filter: blur(100px);
transform: scale(5);
demo
灰色渐进式
LQIP（Low Quality Image Placeholders） 低质量图片占位符 & SQIP
聚划算 - 品牌团（LQIP）
知乎（高斯模糊）
。。。