前端性能優化二

圖檔資源優化

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); // 圖檔顔色值
}