图片压缩指南

推荐工具

  • 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