图片压缩

图片压缩对于前端性能优化来说是一项基础优化，图片往往是一个网站加载资源的大头，做好对图片的压缩可以对网站的加载速度有很大的提升。

1. 对于图片压缩，应该采用有损压缩还是无损压缩呢？

这需要根据真实的业务场景来进行判断，需要确定业务对所要展示的图片是否有清晰度的要求。例如一些背景图片和不重要的展示内容则可以进行适当的有损压缩；若对分辨率和清晰度要求比较高，则可以进行无损压缩。（大部分情况都可适当有损压缩）

最好可以通过自动化执行来避免烦人的人工重复工作。

1. 为什么需要自己实现？

在开发工具前使用线上工具进行图片压缩，常用网站：tinypng.com/； 在使用oss时，可以通过拼接参数获取自己想要的压缩后的图片，但是会有一些局限，例如：

• 支持的格式受限
• 压缩参数无法调整
• ...

1. 有损和无损压缩实现的部分核心代码

• 3.1 无损压缩

import imagemin from "imagemin";
import imageminJpegtran from "imagemin-jpegtran";
import imageminOptipng from "imagemin-optipng";
import imageminGifsicle from "imagemin-gifsicle";

// 无损压缩
const files = imagemin(["./*.{jpg,jpeg,png,gif}"], {
  destination: "images",
  plugins: [imageminJpegtran(), imageminOptipng(), imageminGifsicle()],
});

• 3.2 有损压缩

// 压缩效果与此网站基本一致： https://tinypng.com/
import imagemin from "imagemin";

// 有损插件
import imageminMozjpeg from "imagemin-mozjpeg";
import imageminPngquant from "imagemin-pngquant";
import imageminWebp from "imagemin-webp";
import imageminSvgo from "imagemin-svgo";
import imageminGiflossy from "imagemin-giflossy";

// 有损压缩
const files = imagemin(["./*.{jpg,jpeg,png,svg,gif}"], {
  destination: "images",
  plugins: [
    imageminMozjpeg({ quality: 80 }),
    imageminPngquant({
      quality: [0.4, 0.6],
    }),
    imageminSvgo({
      plugins: [
        // 都有哪些插件可以查看https://github.com/svg/svgo#configuration
        {
          name: "removeViewBox",
          active: false,
        },
      ],
    }),
    imageminGiflossy({ lossy: 80 }),
  ],
});

• 3.3 有损压缩且转换为webp格式

import imagemin from "imagemin";
import imageminWebp from "imagemin-webp";


// 有损压缩 - 格式都会转换为webp
const files = imagemin(["./*.{jpg,jpeg,png,webp}"], {
  destination: "images",
  plugins: [imageminWebp({ quality: 50 })],
});

• 3.4 切换mode使用

import imagemin from "imagemin";

// 无损插件
import imageminJpegtran from "imagemin-jpegtran";
import imageminOptipng from "imagemin-optipng";
import imageminGifsicle from "imagemin-gifsicle";

// 有损插件
import imageminMozjpeg from "imagemin-mozjpeg";
import imageminPngquant from "imagemin-pngquant";
import imageminWebp from "imagemin-webp";
import imageminSvgo from "imagemin-svgo";
import imageminGiflossy from "imagemin-giflossy";

const zipMode = {
  1: a,
  2: b,
  3: c,
};

const mode = 3; // 替换mode即可
zipMode[mode]();

function a() {
  // 无损压缩
  const files1 = imagemin(["./zip/*.{jpg,jpeg,png,gif}"], {
    destination: "images",
    plugins: [imageminJpegtran(), imageminOptipng(), imageminGifsicle()],
  });
}
function b() {
  // 有损压缩 - 格式都会转换为webp
  const files2 = imagemin(["./zip/*.{jpg,jpeg,png,webp}"], {
    destination: "images",
    plugins: [imageminWebp({ quality: 50 })],
  });
}
function c() {
  // 有损压缩
  const files3 = imagemin(["./zip/*.{jpg,jpeg,png,svg,gif}"], {
    destination: "images",
    plugins: [
      imageminMozjpeg({ quality: 80 }),
      imageminPngquant({
        quality: [0.4, 0.6],
      }),
      imageminSvgo({
        plugins: [
          // 都有哪些插件可以查看https://github.com/svg/svgo#configuration
          {
            name: "removeViewBox",
            active: false,
          },
        ],
      }),
      imageminGiflossy({ lossy: 80 }),
    ],
  });
}