HTML Img Compression（压缩）

图片压缩又分为有损压缩和无损压缩。

有损压缩

• 有损压缩指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量（即图片被压糊了），并且这种损失是不可逆的。

• 常见的有损压缩手段是按照一定的算法将临近的像素点进行合并。

• 压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。

• 因此有损压缩可以在同等图片质量的情况下大幅降低图片的体积。

• 例如 jpg 格式的图片使用的就是有损压缩。

无损压缩

• 无损压缩指的是在压缩图片的过程中，图片的质量没有任何损耗。

• 我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。

• 压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的体积。

• 例如 png、gif 使用的就是无损压缩。

压缩工具

• https://tinypng.com/

• https://squoosh.app/

• https://compressor.io/

图片选择格式

图片格式

压缩方式

透明度

动画

浏览器兼容

适应场景

JPEG

有损压缩

不支持

不支持

所有

复杂颜色及形状、尤其是照片

GIF

无损压缩

支持

支持

所有

简单颜色，动画

PNG

无损压缩

支持

不支持

所有

需要透明时

APNG

无损压缩

支持

支持

Firefox

Safari

iOS Safari

需要半透明效果的动画

WebP

有损压缩

or

无损压缩

支持

支持

Chrome

Opera

Android Chrome

Android Browser

复杂颜色及形状

浏览器平台可预知

SVG

无损压缩

支持

支持

所有（IE8以上）

简单图形，需要良好的放缩体验

需要动态控制图片特效

图片格式选择过程