图片压缩工具imagemin

2019-08-20277次阅读gulpwebpack

imagemin相比于一些在线工具或者App,自己写脚本更灵活一些。程序很简单,分别针对 JPG、PNG、SVG安装加载相应的插件就好。

 

安装

npm install imagemin
npm install imagemin-jpegtran
npm install imagemin-pngquant
npm install imagemin-svgo
npm install imagemin-imagemin-webp

上方的插件你可以按需求选择性安装,例如:imagemin-imagemin-webp是压缩谷歌提出的WebP图片格式。

使用一

const imagemin = require('imagemin');
const imageminJpegtran = require('imagemin-jpegtran');
const imageminPngquant = require('imagemin-pngquant');
const imageminSvgo = require('imagemin-svgo');

(async () => {
  const files = await imagemin(process.argv.slice(2), {
    destination: "dist",
    plugins: [
      imageminMozjpeg({
        quality: 70,
      }),
      imageminPngquant({
        quality: [0.65, 0.8],
      }),
      imageminSvgo({
        plugins: [
          {removeViewBox: false},
        ],
      }),
    ],
  })
})();

 

使用二

const imagemin = require('imagemin');
const imageminJpegtran = require('imagemin-jpegtran');
const imageminPngquant = require('imagemin-pngquant');

(async () => {
    const files = await imagemin(['images/*.{jpg,png}'], {
        destination: 'build/images',
        plugins: [
            imageminJpegtran(),
            imageminPngquant({
                quality: [0.6, 0.8]
            })
        ]
    });

    console.log(files);
    //=> [{data: <Buffer 89 50 4e …>, path: 'build/images/foo.jpg'}, …]
})();

注意,quality 参数需要自己测试去确定,怎样在质量和尺寸中权衡,每个团队有自己的标准。


Progressive JPEG VS Baseline JPEG

JPEG 根据显示方式的不同,分为两种。Progressive JPEG 会先加载模糊的整张图片,然后变的越来越清晰。


而Baseline JPEG会先清晰地加载图片的一部分,然后慢慢显示剩余的部分。


从视觉效果来说,Progressive JPEG自然更好一些。但它也有一些缺点,比如它的解码速度比Baseline JPEG要慢,占用的CPU时间更多。

如果是桌面浏览器,这点性能问题自然无所谓,但是如果是移动端,就不得不考虑。工程本来就是权衡的艺术。

默认情况下,MozJPEG 生成的是Progressive JPEG,可以通过选项调整。

有一个Gulp 插件gulp-imagemin - 它的依赖也是imagemin。。。试了一下gulp-imagemin真心没有imagemin好用及那么直观。

上一篇: 一次css错误排查中再次认识到::伪元素  下一篇: phpmyadmin中id自动递增字段设置  

图片压缩工具imagemin相关文章