前端性能优化二

图片资源优化

jpeg 有损压缩 不支持透明度

png 便携网络图片 支持灰度 rgb 半透明 透明 文件大 用于需要透明

gif 支持完全透明 与完全不透明 动图 不适合存储彩色图 动画与图标

webp 提供无损压缩和有损压缩 较小的体积 实现动画效果 支持透明度

const pngquant = require('jdf-png-native');
const fs = require('fs');

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

响应式图片

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

const lqip = require('lqip');
const file = './in.png';
// image
lqip,base64(file).then(res => {
    console.log(res); // 输出base64
})
// color
lqip.paletter(file).then(res => {
    console.log(res); // 图片颜色值
}