furic-zhao / imagezip Goto Github PK

27.0 0.0 5.0 20 KB

前端性能图像压缩工具

JavaScript 100.00%

imagezip's Introduction

imagezip

前端性能图像（jpg、png、gif）压缩工具。对整个项目或目录、或单个图片、多个图片深度无损压缩，使用业界前沿的程序算法，压缩率达50%以上，并且几乎看不出质量差别，极致的图片性能优化，帮助我们开发拥有极致用户体验的产品。

为什么要做图片压缩

Google官方的最佳实践中关于图片优化有下面这样一段描述：对于网页来说，在所下载的字节数中，图片往往会占很大比例。因此，优化图片通常可以卓有成效地减少字节数和改进性能：浏览器需要下载的字节数越少，对客户端带宽的争用就越少，浏览器下载内容并在屏幕上呈现内容的速度就越快。

全局安装

# 使用npm安装
npm install imagezip -g 

# 使用yarn安装
yarn global add imagezip

全局使用

➜  imagezip --help
Usage: index [options]

Options:
  -V, --version         output the version number
  -Q --quality [0~100]  jpg/jpeg压缩质量 (default: "80")
  -I --input [folder]   原始图像目录 (default: "./")
  -O --output [folder]  压缩图像存放目录 (default: null)
  -S --subdir [bool]    压缩包含子目录的图像 (default: false)
  -h, --help            output usage information

基本功能

# 压缩当前目录所有图片
imagezip

# 压缩当前目录及子目录下的所有图片
imagezip --subdir

# 压缩当前目录单个图片
imagezip demo.jpg

# 设置jpg/jpeg的压缩质量为 70 （范围0~100）
imagezip demo.jpg --quality 70

# 压缩指定目录中的图片
imagezip /Users/furic/www/assets/demo.jpg

# 压缩多个图片以空格分开
imagezip demo1.jpg demo2.png demo3.gif

# 压缩 /Users/furic/www/assets 目录下的所有图片
imagezip --input /Users/furic/www/assets

# 压缩当前目录所有图片并将压缩后的图片保存到 /Users/furic/minify 目录
imagezip --output /Users/furic/minify

若不设置--output参数，压缩后的图像将覆盖原图像。

使用示例

➜  cd assets
assets
├── hsy.child.jpg
├── hsy.loading.gif
└── hsy.png

➜  imagezip
✔ hsy.child.jpg (saved 611 kB to 330 kB - 281 kB/46%)
✔ hsy.loading.gif (saved 445 kB to 423 kB - 21.9 kB/4.9%)
✔ hsy.png (saved 1.4 MB to 629 kB - 768 kB/55%)
Minified 3 images (saved 2.45 MB to 1.38 MB - 1.07 MB/43.7%)

输出结果说明：

(saved 原图大小(kB) to 压缩后图片大小(kB) - 压缩大小(kB) / 压缩率%)

项目中本地安装

# 使用npm安装
npm install imagezip --save-dev

#使用yarn安装
yarn add imagezip -D

项目中本地使用

在项目的package.json文件中配置scripts。

{
  "name": "project-demo",
  "version": "1.0.0",
  "main": "",
  "scripts": {
    "imagezip": "imagezip --subdir --input src/static/images"
  },
  "devDependencies": {
    "imagezip": "^1.1.0"
  }
}

执行:

yarn imagezip #或者 npm run imagezip

压缩本项目src/static/images目录中的所有图片。

#可以使用绝对路径
imagezip --subdir --input /Users/furic/project-web/src/static/images

#命令行参数也可以使用简写
imagezip -S -I src/static/images

Tips

如果你的手机、电脑中有大量的数码照片，此工具可为你节省大量的存储空间。

电脑中存储的某些照片是已锁定状态，请确保你要压缩的照片的读、写权限。

License

MIT

imagezip's People

Contributors

Stargazers

Forkers

shitianshiwa julywind taowin joe2wang xiaoguan521

imagezip's Issues

使用报错

⠦ Minifying images...node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

linux install error: node_modules/mozjpeg: Command failed.

install

yarn add [email protected]

output install log

error /root/workspace/cos-ci/node_modules/mozjpeg: Command failed.
Exit code: 1
Command: node lib/install.js
Arguments: 
Directory: /root/workspace/cos-ci/node_modules/mozjpeg
Output:
Command failed: /root/workspace/cos-ci/node_modules/mozjpeg/vendor/cjpeg -version
/root/workspace/cos-ci/node_modules/mozjpeg/vendor/cjpeg: /lib64/libz.so.1: version `ZLIB_1.2.9' not found (required by /root/workspace/cos-ci/node_modules/mozjpeg/vendor/cjpeg)


mozjpeg pre-build test failed
compiling from source
Error: Command failed: /bin/sh -c ./configure --enable-static --disable-shared --disable-dependency-tracking --with-jpeg8  --prefix="/root/workspace/cos-ci/node_modules/mozjpeg/vendor" --bindir="/root/workspace/cos-ci/node_modules/mozjpeg/vendor" --libdir="/root/workspace/cos-ci/node_modules/mozjpeg/vendor"
configure: error: no nasm (Netwide Assembler) found

check log

...........
checking for yasm... no
    at /root/workspace/cos-ci/node_modules/execa/index.js:231:11
    at runMicrotasks (<anonymous>)
...........

win10下无法正确执行

现象：
win10下执行imagezip、imagezip --subdir均无效，若执行imagezip *则可以对当前文件夹目录进行压缩

期望：
win10执行 imagezip --subdir可以遍历当前文件夹及子文件夹中所有图片进行压缩

安装脚本有问题

macOS mojave

npm init -y

{
  "name": "temp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

  npm install imagezip

> [email protected] postinstall /temp/node_modules/gifsicle
> node lib/install.js

  ⚠ connect ECONNREFUSED 0.0.0.0:443
  ⚠ gifsicle pre-build test failed
  ℹ compiling from source
  ✖ Error: Command failed: /bin/sh -c autoreconf -ivf
/bin/sh: autoreconf: command not found


    at /temp/node_modules/execa/index.js:231:11
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Promise.all (index 0)
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node lib/install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!    /username/.npm/_logs/2020-07-29T08_24_55_681Z-debug.log

log

9541 silly saveTree   │ └─┬ [email protected]
9541 silly saveTree   │   └─┬ [email protected]
9541 silly saveTree   │     └── [email protected]
9541 silly saveTree   ├─┬ [email protected]
9541 silly saveTree   │ └── [email protected]
9541 silly saveTree   └── [email protected]
9542 warn [email protected] No description
9543 warn [email protected] No repository field.
9544 verbose stack Error: [email protected] postinstall: `node lib/install.js`
9544 verbose stack Exit status 1
9544 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
9544 verbose stack     at EventEmitter.emit (events.js:314:20)
9544 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
9544 verbose stack     at ChildProcess.emit (events.js:314:20)
9544 verbose stack     at maybeClose (internal/child_process.js:1051:16)
9544 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
9545 verbose pkgid [email protected]
9546 verbose cwd /temp
9547 verbose Darwin 18.7.0
9548 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "imagezip"
9549 verbose node v14.5.0
9550 verbose npm  v6.14.5
9551 error code ELIFECYCLE
9552 error errno 1
9553 error [email protected] postinstall: `node lib/install.js`
9553 error Exit status 1
9554 error Failed at the [email protected] postinstall script.
9554 error This is probably not a problem with npm. There is likely additional logging output above.
9555 verbose exit [ 1, true ]