图片格式和应用场景介绍
1. JPEG (Joint Photographic Experts Group)
联合图像专家小组针对彩色照片而广泛使用的一种有损压缩图形格式。
介绍： 栅格图形。常用文件扩展名为.jpg, 也有.jpeg, .jpe。 JPEG在互联网上常被应用于存储和传输照片。
不适合： 线条图形和文字，图标图形，因为它的压缩算法不适合这些类型的图形；并且不支持透明度。
非常适合： 颜色丰富的照片，彩色图，大焦点图，通栏banner图；结构不规则的图形。
2. PNG (Portable Network Graphics)
便携式网络图形是一种无损压缩的位图图形格式，支持索引，灰度，RGB三种颜色方案以及Alpha通道等特性。
介绍： 栅格图形。PNG最初是作为代替GIF来设计的。能够显示256色，文件不JPEG或者GIF大，但是PNG非常好的保留了图形质量。支持Alpha通道的半透明和透明特性。最高支持24位彩色图像（PNG-24）和8位灰度图像。
不适合： 由于是无损压缩，彩色图形体积太大，所以不太适合。
非常适合： 纯色，透明，线条绘图，图标；边缘清晰，有大块相同颜色区域；颜色数较少但需要半透明。
3. GIF (Graphics Interchange Format)
图形互换格式是一种位图图形文件格式，以8位色（即256种颜色）重现真彩色的图像，采用LZW压缩算法进行编码。
介绍： 栅格图形。支持256色；仅支持完全透明和完全不透明；如果需要比较通用的动画，GIF是唯一的选择。
不适合： 每个像素只有8比特，不适合存储彩色图片。
非常适合： 动画，图标。
4. Webp
Webp是一种现代图像格式，可为图像提供无损压缩和有损压缩，这使得它非常灵活。由Google在购买On2 Technologies后发展出来，以BSD授权条款发布。
介绍： 优秀算法能同时保证一定程度上的图形质量和比较小的体积；可以插入多帧，实现动画效果；可以设置透明度；采用8位压缩算法。无损的Webp比PNG小26%，有损的Webp比JPEG小25-34%，比GIF有更好的动画。
不适合： 最多处理256色，不适合于彩色图片。
非常适合： 适用于图形和半透明图像。
用工具进行图片压缩
压缩png
- node-pngquant-native
- 跨平台，压缩比高，压缩png24非常好
- 说明文档：https://www.npmjs.com/package/node-pngquant-native
- 安装方法：
npm install -g node-pngquant-native
压缩jpg
- jpegtran
- 跨平台，有Linux,Mac,Windows的解决方案
- 官网：http://jpegclub.org/jpegtran/
- 安装方法： npm install -g jpegtran
- 使用方法： jpegtran -copy none -optimize -outfile out.jpg in.jpg
压缩gif
- Gifsicle: 通过改变每帧比例，减小gif文件的大小，同时可以使用透明来达到更小的文件大小，目前公认的解决方案。
- 安装： http://www.lcdf.org/gifsicle/
- 使用方式：
优化级别设置为不小于2,1的话基本不压缩 gifsicle --optimize=3 -o out.gif in.gif
将透明部分截去gifsicle --optimize=3 --crop-transparency -o out.gif in.gif
图片尺寸随网络环境变化
- 不同网络环境（Wifi / 4G / 3G）下，加载不同尺寸和像素的图片，通过在图片URL后缀加不同参数改变。
响应式图片
-
JavaScript 绑定事件检测窗口大小。
-
CSS媒体查询
@media screen and (max-width:640px){ my_image{width:640px;} } -
img标签属性
<img srcset="img-320w.jpg, img-640w.jpg 2x, img-960w.jpg 3x" src="img-960w.jpg " alt="img" > // x描述符：表示图像的设备像素比
逐步加载图像
- 使用统一占位符
- 使用LQIP
- 低质量图像占位符（Low Quality Image Placeholders）
- 安装： npm install lqip
- 源码： https://github.com/zouhir/lqip-loader
- 使用SQIP
- 基于SVG的图像占位符（SVG Quality Image Placeholders）
- 安装： npm install sqip
- 源码： https://github.com/axe312ger/sqip
其他方案：
- Web Font 代替图片
- 使用 Data URI 代替图片
- 采用Image spriting (雪碧图)
图片服务器自动优化
-
名词解释：
- 图片服务器自动化优化是可以在图片URL链接上增加不同特殊参数，服务器自动化生成。
- 不同格式，大小，质量的图片。
-
处理方法
- 图片裁剪： 按长边，短边，填充，拉伸等缩放。
- 图片格式转换：支持JPG,GIF,PNG,WebP等，支持不同的图片压缩率。
- 图片处理：添加图片水印，高斯模糊，重心处理，裁剪边框等。
- AI功能： 鉴黄以及智能抠图，智能排版，智能配色，智能合成等AI功能。
