前端图片优化相关知识点

不同格式图片的应用场景

JPEG

• 栅格图形，常用扩展名：jpg、jpeg、jpe。
• 不适合线条图形和文字、图标。
• 适合颜色丰富的照片、色彩图大焦点图、banner图，结构不规则的图形。

PNG

• 栅格图形，文件比jpeg或gif大，但是它非常好的保留了图像质量。支持Alpha通道的半透明和透明特性。最高支持24位彩色图像（PNG-24）和8位灰度图像（PNG-8）。
• 由于是无损存储，彩色图像体积太大，所以不太适合。
• 适合纯色、透明、线条绘图、图标；边缘清晰、有大块相同颜色区域；颜色数较少但需要半透明。

GIF

• 图像互换格式是一种位图图形文件格式，以8位色（即256种颜色）重现真彩色的图像，采用LZW压缩算法进行编码。
• 栅格图形。支持256色；仅支持完全透明和完全不透明；如果需要比较通用的动画，GIF是唯一的选择。
• 每个像素只有8比特，不适合存储彩色图片。
• 非常合适动画、图标。

Webp

• 优秀算法能同时保证一定程序上的图像质量和比较小的体积；可以插入多帧，实现动画效果；可以设置透明度；采用8位压缩算法。无损的Webp比PNG小26%，有损的Webp比JPEG小25%-34%，比GIF有更好的动画。
• 最多处理256色，不适合色彩丰富的图片。
• 适用于图形和半透明图像。

图片优化，提高加载速度

压缩图片的工具

• node-pngquant-native 用来压缩png
• jpegtran 压缩jpg
• Gifsicle 压缩gif 特点是改变没帧的比例

图片尺寸随网络环境变化

• 不同网络环境（Wifi/4G/3G)下，加载不同尺寸和像素的图片，通过图片URL后缀加不同参数改变。

响应式图片

• JavaScript绑定事件监测窗口大小。
• css媒体查询

@media screen and （max-width:640px) { }

• img 标签属性

<img srcset="img-320w.jpg,img-640w.jpg 2x, img960w.jpg 3x"
					src="img-960w.jpg" alt="img > 

(x描述符：表示图像的设备像素比)

逐步加载图像

• 使用统一占位符
• 使用LQIP
  • 低质量图像占位符（Low Quality Image Placeholders）
  • 安装：npm install lqip
• 使用SQIP
  • 基于SVG的图像占位符（SVG Quality Image Placeholders）
  • 相比LQIP效果会好一些
  • 安装：npm install sqip

其他优化点

• Web Font 代替图片
• 使用Data URI 代替图片
• 采用Image spriting (雪碧图)

在服务器端进行自动优化

图片服务器自动优化解密

• 解释
  • 图片服务器自动优化是可以在图片URL链接上增加不同特殊参数，服务器自动化生成。
  • 不同格式、大小、质量的图片。
• 处理方式
  • 图片裁剪：按长边、短边、填充、拉伸等缩放。
  • 图片格式转换：支持JPG、GIF、PNG、WebP等，支持不同的图片压缩率。
  • 图片处理：添加图片水印、高斯模糊、重心处理、裁剪边框等。
  • AI能力：鉴黄以及智能抠图、智能排版、智能配色、智能合成等AI功能。