图像占用着互联网大量的带宽,因为它相比代码有较大的文件大小,据统计,数据加载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色彩模型。

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。

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

color: rgb(255, 0, 0); //fallback
color: color(display-p3 1 0 0);

demo

色彩深度 电脑使用不同的精度或者深度来描述颜色,比如 css 里面的 rgb 语法,每条通道深度是 8 位

Web安全色

Bit

若R、G、B每种颜色使用一个字节(8bit)表示,每幅图像可以有1670万种颜色;若R、G、B每种颜色使用两个字节(16bit)表示,每幅图像可以有10的12次方种颜色;如果是灰度图像,每个象素用一个字节(8bit)表示,一幅图像可以有256级灰度;若每个象素用两个字节(16bit)表示,一幅图像可以有65536级灰度。

图像加载优化

渐进式

渐进式JPEG编码的一个明显的优点就是,当你以较慢的网速下载图像时,可以得到完整的图像预览。即使仅传输了一部分文件,你也可以查看图片中的内容,并决定是否要等待文件完全加载。

渐进式jpeg(progressive jpeg)图片及其相关 – 张鑫旭

<img />

自适应图像

<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%。

https://img10.360buyimg.com/seckillcms/s144x144_jfs/t1/172279/30/17093/202601/60e032c6E6ee149f8/6136ed9e15729c59.jpg!q70.jpg.webp

根据维基百科的介绍,到 2021 年 3 月份,全球 93% 的浏览器份额已经支持 webp 图片格式。

主题色

Pexels

CSS实现(图片过多不建议使用)

filter: blur(100px);
transform: scale(5);

demo

灰色渐进式

LQIP(Low Quality Image Placeholders) 低质量图片占位符 & SQIP

lqip-loader

sqip-npm

lqip-npm

SQIP

聚划算 – 品牌团(LQIP)

知乎(高斯模糊)

。。。

相关文档

计算机色彩知识调研(一):色域

Finally understanding JPG

图像与滤波 – 阮一峰

images.guide

Using AVIF to compress images on your site

Reward progressive images