# 使用图片无损压缩

图像通常是网页中需要下载字节最多的部分,并且通常占据着一些重要的视觉空间。因此,压缩优化图像通常可以为我们的网站带来最大量的数据节省和性能提升:浏览器需要下载的数据量越少,客户端的带宽压力就越小,并且浏览器可以下载并在屏幕内渲染有效内容的速度越快。

# 压缩全站图片

1、将所有需要压缩的图片放在src/static/images目录下

└── src
    └── static
        └── images
             ├── bg
             │   └── rank.jpg
             ├── graph.png
             └── scroll-demo.gif

2、执行cyb imagemin命令

根据提示选择图片压缩质量

➜  test1 cyb imagemin
---------------------------------------
* 欢迎使用 CYB 前端模块化工程构建工具 *
---------------------------------------
? 请填写jpg/jpeg压缩质量:(1~100) 85
? 请填写Gif压缩质量:(1~3) 1
[13:34:48] Start imagemin...
[13:34:49] gulp-imagemin: ✔ scroll-demo.gif (already optimized)
[13:34:49] gulp-imagemin: ✔ bg/rank.jpg (saved 251 kB - 72.7%)
[13:34:49] gulp-imagemin: ✔ graph.png (saved 342 kB - 73.2%)
[13:34:49] gulp-imagemin: Minified 2 images (saved 594 kB - 73%)
[13:34:49] Completed imagemin.

# 压缩单张或多张图片

1、进入需要压缩的图片目录

cd project/src/../图片目录

2、执行cyb imagemin命令,命令后面填写压缩图片的文件名

cyb imagemin graph.png rank.jpg

根据提示填写压缩质量

---------------------------------------
* 欢迎使用 CYB 前端模块化工程构建工具 *
---------------------------------------
? 请填写jpg/jpeg压缩质量:(1~100) 85
✔ Images have been compressed in graph.png
✔ Images have been compressed in rank.jpg