图片压缩指南

发表于 更新于 本文字数： 6.6k 阅读时长 ≈ 6 分钟

推荐工具

  • Caesium：可批量、图形化界面、不可压缩 gif
  • Compress-images：可批量、可压缩 gif，其他格式的图片当然也可以压缩
  • 以下的内容可以不用看了：）

Imagine 本地图片压缩

Github 项目名称：Imagine； GitHub 仓库

Imagine is a desktop app for compression of PNG and JPEG, with a modern and friendly UI.

优点：UI 界面，参数可视化可调；开源免费；支持中文；支持转为 webp 格式图片；本地
缺点：无法处理 gif 图片

ImagineUI界面

Compressio.app

在线 GIF 压缩 [Compressio.app]： 开源网址
github 仓库： 网址

优点：开源免费；跨设备运行；免安装；可自行搭建服务器
缺点：可能会涉及到隐私问题
Compressio.app界面

本地图片压缩 Compress-images

GitHub 仓库： Compress-images

命令行安装以下依赖：

1
2
3
4
5
6
7
npm install compress-images --save

npm install pngquant-bin@6.0.1 --save
npm install gifsicle@5.2.1 --save

注意不要升级随便升级版本，比如下面这段代码，升级之后报错（不知道为什么，可能识别不了）
npm install gifsicle --save

1、使用方法

请查阅下载的文档中的 example 示例的 Manual.txt

  1. 从 GitHub 仓库下载项目：
1
git clone git@github.com:semiromid/compress-images.git
  1. 删除所有文件夹，除了 example 文件夹
  2. 在 example 文件夹打开命令行工具（vscode 打开），如下命令安装依赖 
1
npm install compress-images --save
  1. 如遇到一下情况的报错，可能是不适合运行在某些系统上，可能需要对 example 文件中的 compress_images.js 做修改。
    PS: win7 测试，在压缩 png 图片时，需要将 pngquant 参数改为 pngcrush

pngquant2pngcrush

1
2
3
4
5
6
[1] "npm install pngquant-bin@6.0.1 --save" (It does not work properly on some OS). If you get error, you need edit './compress_images.js' and replace 'pngquant' on other PNG engine, as example on "pngcrush".
{png: {engine: 'pngcrush', command: false}},

[2] "npm install gifsicle@5.2.1 --save" (It does not work properly on some OS). If you get error, you need edit './compress_images.js' and replace 'gifsicle' on other GIF engine, as example "gif2webp"
{gif: {engine: 'gif2webp', command: false}}

  1. 运行 minify_Img.bat，如果报错缺少什么依赖，继续在命令行中安装

2、可能会遇到的问题

  1. 如果图片名太长，可能不能压缩处理，可先重命名在压缩
  2. 安装依赖可能会出现网络问题
  3. 最常见的错误就是上方第四点 pngquant|pngcrush；gifsicle|gif2webp 可能需要切换

3、自定义配置

  1. 下载的示例库已经创建好了输入文件夹和输出文件夹，层级关系已经设置好了。其实我们也可以自定义设置 input 和 output 文件夹

compress_images.js自定义设置界面

  1. 自定义配置参考文档：GitHub 仓库给了 7 中实例， 点击查看
    举例其中的集中方式：
    [1] 系数默认配置 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const compress_images = require("compress-images"),
  INPUT_path_to_your_images,
  OUTPUT_path;

INPUT_path_to_your_images = "src/img/**/*.{jpg,JPG,jpeg,JPEG,png,svg,gif}";
OUTPUT_path = "build/img/";

compress_images(INPUT_path_to_your_images, OUTPUT_path, { compress_force: false, statistic: true, autoupdate: true }, false,
                { jpg: { engine: "mozjpeg", command: ["-quality", "60"] } },
                { png: { engine: "pngquant", command: ["--quality=20-50", "-o"] } },
                { svg: { engine: "svgo", command: "--multipass" } },
                { gif: { engine: "gifsicle", command: ["--colors", "64", "--use-col=web"] } },
  function (error, completed, statistic) {
    console.log("-------------");
    console.log(error);
    console.log(completed);
    console.log(statistic);
    console.log("-------------");
  }
);

[2]jpg⇒webp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const compress_images = require('compress-images');

// We will be compressing images [jpg] with two algorithms, [webp] and [jpg];

//[jpg] ---to---> [webp]
compress_images(
  "src/img/**/*.{jpg,JPG,jpeg,JPEG}",
  "build/img/",
  { compress_force: false, statistic: true, autoupdate: true },
  false,
  { jpg: { engine: "webp", command: false } },
  { png: { engine: false, command: false } },
  { svg: { engine: false, command: false } },
  { gif: { engine: false, command: false } },
  function (err) {
    if (err === null) {
      //[jpg] ---to---> [jpg(jpegtran)] WARNING!!! autoupdate  - recommended to turn this off, it's not needed here - autoupdate: false
      compress_images(
        "src/img/**/*.{jpg,JPG,jpeg,JPEG}",
        "build/img/",
        { compress_force: false, statistic: true, autoupdate: false },
        false,
        { jpg: { engine: "jpegtran", command: false } },
        { png: { engine: false, command: false } },
        { svg: { engine: false, command: false } },
        { gif: { engine: false, command: false } },
        function () {}
      );
    } else {
      console.error(err);
    }
  }
);

[3] jpg (webp)+gif (gifsicle)+png (webp)+svg (svgo)，括号中的为压缩算法 / 格式转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const compress_images = require('compress-images');

//[jpg+gif+png+svg] ---to---> [jpg(webp)+gif(gifsicle)+png(webp)+svg(svgo)]
compress_images('src/img/source/**/*.{jpg,JPG,jpeg,JPEG,gif,png,svg}', 'build/img/', {compress_force: false, statistic: true, autoupdate: true}, false,
                                            {jpg: {engine: 'webp', command: false}},
                                            {png: {engine: 'webp', command: false}},
                                            {svg: {engine: 'svgo', command: false}},
                                            {gif: {engine: 'gifsicle', command: ['--colors', '64', '--use-col=web']}}, function(){
      //-------------------------------------------------                                    
      //[jpg] ---to---> [jpg(jpegtran)] WARNING!!! autoupdate  - recommended to turn this off, it's not needed here - autoupdate: false
      compress_images('src/img/source/**/*.{jpg,JPG,jpeg,JPEG}', 'src/img/combine/', {compress_force: false, statistic: true, autoupdate: false}, false,
                                                      {jpg: {engine: 'jpegtran', command: ['-trim', '-progressive', '-copy', 'none', '-optimize']}},
                                                      {png: {engine: false, command: false}},
                                                      {svg: {engine: false, command: false}},
                                                      {gif: {engine: false, command: false}}, function(){
            //[jpg(jpegtran)] ---to---> [jpg(mozjpeg)] WARNING!!! autoupdate  - recommended to turn this off, it's not needed here - autoupdate: false
            compress_images('src/img/combine/**/*.{jpg,JPG,jpeg,JPEG}', 'build/img/', {compress_force: false, statistic: true, autoupdate: false}, false,
                                                            {jpg: {engine: 'mozjpeg', command: ['-quality', '75']}},
                                                            {png: {engine: false, command: false}},
                                                            {svg: {engine: false, command: false}},
                                                            {gif: {engine: false, command: false}}, function(){
                  //[png] ---to---> [png(pngquant)] WARNING!!! autoupdate  - recommended to turn this off, it's not needed here - autoupdate: false
                  compress_images('src/img/source/**/*.png', 'build/img/', {compress_force: false, statistic: true, autoupdate: false}, false,
                                                                  {jpg: {engine: false, command: false}},
                                                                  {png: {engine: 'pngquant', command: ['--quality=30-60', '-o']}},
                                                                  {svg: {engine: false, command: false}},
                                                                  {gif: {engine: false, command: false}}, function(){                                                      
                  }); 
            });                                      
      });
      //-------------------------------------------------
});

4、压缩效果

图片压缩效果：文件从11M->2.2M