从图片优化说起

图片是大部分网页的重要组成部分，一般情况下，我们不会太关注这方面的问题，需要显示图片直接一个 img 标签搞定。

但实际上，无论是对于提高加载速度，还是对于优化用户体验，优化图片都是一个重要的手段。

图片优化分成两个方面：

第一，图片压缩。在保证视觉效果的情况下，减少图片的体积。这个很有效，1M 和 100K 的图片，肉眼看起来几乎差不多，但却省了 90% 的流量，大大提高了加载速度。

第二，响应式图片。根据客户端的情况，选择最合适的图片返回给用户。用户是一个 500px 的设备，那么返回 1000px 的图给他就是浪费。

我们先来看图片压缩。

图片压缩

压缩的第一步是筛选出需要压缩的图片。如果图片本身就已经足够小了，那么再压缩的意义就不大。

我一般使用如下的脚本筛选项目中需要压缩的图片。脚本会列出所有的图片并根据尺寸降序排列。

# fd 是现代化的 find
# bat 是现代化的 cat
fd -e png -e jpeg -e jpg -e svg |\
xargs ls -l |\
sort -nk5 -r |\
awk '{print $9,$5}' |\
numfmt --field=2 --to=iec |\
column -t | bat

筛选出需要压缩的图片以后，接下来就是压缩、比对、调整参数。图片压缩的工具实在是太多了，Google image compression tool 选择会多得你眼花缭乱。

这里顺口提一下 Google 出品的 squoosh 在线图片压缩服务，看起来不错，虽然我没怎么用过。

这里我选择使用 imagemin，相比于一些在线工具或者 App，自己写脚本更灵活一些。

程序很简单，分别针对 JPG、PNG、SVG 加载相应的插件就好。

const imagemin = require("imagemin")
const imageminMozjpeg = require("imagemin-mozjpeg")
const imageminPngquant = require("imagemin-pngquant")
const imageminSvgo = require("imagemin-svgo")

;(async () => {
   
  const files = await imagemin(process.argv.slice(2), {
   
    destination: "dist",
    plugins: [
      imageminMozjpeg({
   
        quality: 70,
      }),
      imageminPngquant(