jpeg有损压缩图像格式

特点：线条图形和文字、图像图标，因为他的压缩算法不适合；并且不支持透明度。

非常适合：颜色丰富的图片、彩色图大焦点图、通栏banner图；结构不规则的图形。

png无损压缩的位图图形格式，支持索引、回溯、RGB三种颜色方案以及Alpha通道等特性。

介绍：栅格图形。最初作为替代GIF来设计的，能够像电视256色，文件比JPEG或者GIF大，但是非常好的保留了图像质量。

不适合：由于是无损存储，彩色图像体积过大。

非常适合：纯色、透明、线条绘图，图标；边缘清晰、有大块相同颜色区域，颜色少但需要半透明。

GIF 图像互换格式是一种位图图形文件格式，以8位色重现真彩色的图像，采用lzw压缩算法进行编码。

介绍：栅格图形。通用动画的唯一选择。

不适合：每个像素只有8比特，不适合存储彩色图片。

非常适合：动画和图标。

webp是一种现代图像格式，可为图像提供无损压缩和有损压缩，非常灵活。

介绍：优秀算法能同时保证一定程度上的图像质量和比较小的体积；可以插入多帧实现动画效果；可以设置透明度；无损的webp比PNG小26%，有损的webp比JPEG小30%，比GIF有更好的动画。

不适合：最多处理256色，不适合彩色图片。

非常适合：图形和半透明图像。

PNG压缩工具

node-pngquant-native

跨平台，压缩比高，压缩png24非常好

说明文档：

https://www.npmjs.com/package/node-pngquant-native

压缩JPG

jpegtran

官网：http://jpegclub.org/jpegtran/

压缩GIF

Gifsicle：通过改变每帧比例，减小GIF文件大小，同时可以使用透明达到更小的文件大小。

图片尺寸随网络变化

响应式图片

逐步加载图像

1统一占位符

2使用LQIP (低质量图像占位符，源码：https://github.com/zouhir/lqip-loader)

3使用SQIP

基于SVG的图像占位符（源码：https://github.com/axe312ger/sqip）

webfont代替图片

使用data url代替图片

采用image spriting

图片服务器自动优化解密