博客图片优化

背景

博客站点中，有很多图片的需求，例如是 png 和 jpeg 格式的图片，这样图片的大小就会相对大一些，减慢网站的访问速度和增加占用对向存储的流量。

先说优化后结果：

目标

1. 优化脚本，在传递到对象存储之前，首先做一层图片的压缩

脚本编写

此处使用 nodejs 脚本来开发，首先安装依赖:

然后编写脚本代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import imagemin from 'imagemin';
import imageminWebp from 'imagemin-webp';
import path from 'path';

(async () => {
  await imagemin([path.join(__dirname, './source/images/*')], {
    destination: 'build/images',
    plugins: [
      imageminWebp({ quality: 20 })
    ]
  });

  console.log('Images optimized');
})();

运行观察效果, 以博客中原来一张图片为例，图片如下，原来这张图片有255KB，效果如下：

然后我们执行脚本后，只有67KB，效果如下：

效果相差不大，但是收益很大。

优化项	优化前	优化后
图片格式	jpeg	webap
图片大小	255KB	67KB（下降74%）
兼容性	高	高，浏览器的支持情况:
图片渲染效果	存在PNG8 色彩不够丰富和在浏览器可能会出现白边	支持Alpha透明和 24-bit 颜色数

兼容性可以查看：

总结

最后我们的流程，就是图片先转webp，然后再传递到对象存储，最终博客的访问速度均有提升，省了对象存储和cdn的钱。