本文地址： https://www.cnblogs.com/veinyin/p/14274238.html
1 图片格式及应用场景
1. jpeg
栅格图，有损压缩图形格式，常用于存储和传输照片
适用：颜色丰富的照片、焦点图、banner图、结构不规则的图片
不适用：线条图、文字、图形图标，因为压缩算法不是很支持这类图形，也不支持透明度
2. png
栅格图，无损压缩的位图图形格式，支持索引、灰度、RGB、alpha 通道（png24 - 24位彩色图像，png8 - 8位灰度图像）
适用：纯色、透明、线条绘图、图标；边缘清晰、有大块相同颜色区域；颜色数少但需要半透明
3. GIF
位图图形格式，8位色（256 种），采用 LZW 压缩算法编码，只支持完全透明和完全不透明
适用：动画、图标
不适用：彩色图片，因为每像素只有8比特
4. webp
现代图像格式，可有损压缩（比 jpeg 小 25-34%）和无损压缩（比 png 小 26%），在一定程度上同时保证图像质量和文件体积，支持动画和透明度，采用 8 位压缩算法
适用：图形、半透明图像
不适用：彩色图片，因为最多处理 256 色
2 优化
1. 图片压缩
png：node-pngquant-native，跨平台，压缩比高，压缩 png24 非常好
jpegtran -copy none -optimize -outfile out.jpg in.jpg
jpg：jpegtran，跨平台，可压缩 10% 左右（10k -> 9k）
gifsicle --optimize=3 -o out.gif in.gif # 压缩，优化级别要 >= 2，因为 1 基本不压缩 gifsicle --optimize=3 --crop-transparency -o out.gif in.gif # 截去透明部分
响应式图片
- JS 绑定事件检测窗口大小
- CSS 媒体查询
- img 标签属性 srcset 是 H5 属性，自动适配，src 是不支持 srcset 时的备用选项
<img srcset="img-320.jpg, img-640.jpg 2x, img-960.jpg 3x" src="img-960.jpg" alt="">
4. 逐步加载图像
- 使用统一占位符（每一张图后面都加上一个展位图片，如公司 logo 等）
- 使用 LQIP （low quality image placeholders 低质量图像占位符）
npm install lqip
-
使用 SQIP （svg quality image placeholders 基于 SVG 的图像占位符）
npm install sqip
5. 使用其他格式
-
web font 代替图片（小图标、业务图片）
-
data URI 代替图片（base64）
-
雪碧图（减少请求）
6. 图片服务器自动优化
就是在图片 URL 链接上，拼接不同的特殊请求参数，服务器自动生成不同大小、质量、格式的图片
有如下处理方式：
- 图片裁剪。按横边、短边、填充、拉伸等方式
- 图片格式转换。JPG、GIF、PNG、WEBP 等，支持不同图片压缩率
- 图片处理。添加水印、高斯模糊、重心处理、裁剪边框等
- AI 能力。鉴黄、智能抠图、智能排版、智能配色、智能合成等