项目中图片优化

一、使用工具进行图片压缩

压缩 png 格式的图片

npm install node-pngquant-native

const pngquant = require('node-pngquant-native')
const fs = require('fs')

fs.readFile('./aa.png', (err, buffer) => {
	if (err) throw err
  const resBuffer = pngquant.option({}).compress(buffer)
  fs.writeFile('./bb.png', resBuffer, {
  	flags: 'wb'
  }, (err) => {})
})

压缩 jpg 格式的图片

npm install -g jpegtran

使用方法：

jpegtran -copy none -optimize -outfile bb.jpg aa.jpg

压缩 gif 格式的图片

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

安装：http://www.lcdf.org/gifsicle

使用方式：

# 优先级别设置为不小于2，1的话基本不压缩
gifsicle --optimize=3 -o bb.gif aa.gif

# 将透明部分截去
gifsicle --optimize=3 --crop-transparency -o bb.gig aa.gif

二、图片尺寸随网络环境变化

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

三、响应式图片

JavaScript 绑定事件检测窗口大小

CSS 媒体查询

@media screen and(max-width:640px) {
	my_image(width:640px;)
}

img 标签属性（x描述符：表示图像的设备像素比）

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

四、逐步加载图像

使用统一占位符

使用 LQIP

低质量图像占位符（Low Quality Image Placeholders）

npm install lqip
const lqip = require('lqip')
const file = './aa.png'

// 生成base64
lqip.base64(file).then(res => {
	console.log(res)
})

// color
lqip.palette(file).then(res => {
	console.log(res)
})

使用 SQIP

基于 SVG 的图像占位符（SVG Quality Image Placeholders）

npm i sqip

const sqip = require('sqip')

const result = sqip({
	filename: './aa.png',
  numberOfPrimitives: 10 // 图片质量
})
console.log(result.final_svg)

五、项目中图片替代方案

• Web Font 代替图片

• 使用 Data URI（base64）代替图片

• 采用 Image spriting（雪碧图）