标签：javascript gruntjs imagemin grunt-contrib-imagemin

我试图用imagemin无损优化JPEG / PNG图像,但我在使用扩展时遇到问题,它们“去优化”,意味着结果图像比原始图像大.我怎么能阻止这个？

这是我的Gruntfile.js

...
grunt.initConfig({
    imagemin: {
        jpeg: {
            options: {
                //by default it uses imageminJpegtran
                progressive: true,//default false, progressive JPEG is better compression https://superuser.com/questions/463477/progressive-jpeg-quality-compare-to-normal-jpeg
                arithmetic: false,//true breaks image

                //don't know how to use it loseless without making the images even bigger
                // use: [
                //  imageminMozjpeg({
                //      quality: 95, //Compression quality, in range 0 (worst) to 100 (perfect).
                //      dcScanOpt: 2,//2 Optimize between one scan for all components and one scan for 1st component plus one scan for remaining components
                //      arithmetic: false// false, or it breaks the image
                //  }),
                // ],
            },
            files: [{
                expand: true,
                cwd: '/www',
                src: ['**/*.{jpg,jpeg,JPG,JPEG}'],
                dest: '/www',
                filter: 'isFile'
            }]
        }
    }
});
...

解决方法:

你在问题的标题中有答案 – “grunt-contrib-imagemin”.如果你谷歌它你会发现this page on GitHub Grunt.js作为官方Grunt GitHub网站.在这个页面上,所有描述都非常详细.

例如：

对于imagemin OptiPNG插件：

optimizationLevel (It is for PNG (for OptiPNG plugin) and NOT FOR JPG!)
Type: number
Default: 3
Select optimization level between 0 and 7.

The optimization level 0 enables a set of optimization operations that require minimal effort. There will be no changes to image attributes like bit depth or color type, and no recompression of existing IDAT datastreams. The optimization level 1 enables a single IDAT compression trial. The trial chosen is what OptiPNG thinks it’s probably the most effective. The optimization levels 2 and higher enable multiple IDAT compression trials; the higher the level, the more trials.

Level and trials:

1. 1 trial
2. 8 trials
3. 16 trials
4. 24 trials
5. 48 trials
6. 120 trials
7. 240 trials

不要尝试使用optimizationLevel for JPG！对于JPG和PNG,您会发现不同的优化选项.所有类型的优化级别选项都在插件站点上进行了完整描述(请参阅下面的插件列表).

在this site,你有很多插件可用于不同的图像类型优化.在你的情况下,它们是JPG和PNG(你也有WebP,Gif和SVG)：

用于JPG优化的插件：

> jpegtran plugin for imagemin
> mozjpeg plugin for imagemin
> jpegoptim plugin for Imagemin

用于PNG优化的插件：

> pngquant plugin for imagemin
> pngout plugin for imagemin
> optipng plugin for imagemin
> pngcrush plugin for imagemin
> AdvPNG plugin for imagemin

所有PNG插件都有不同的优化级别选项.例如,对于AdvPNG插件,您有一个optimizationLevel作为选项,您可以选择0到4之间的优化级别：

0 Don’t compress
1 Compress fast (zlib)
2 Compress normal (7z)
3 Compress extra (7z)
4 Compress extreme (zopfli)

JPG优化

对于JPG优化,我想推荐mozjpeg和jpegoptim插件,因为它们有很多配置选项 – 请参阅上面这些插件的链接.

插件的使用示例

const imagemin = require('imagemin');
const jpegoptim = require('imagemin-jpegoptim');
//const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');

(async () => {
    const files = await imagemin(['images/*.{jpg,png}'], 'build/images', {
        plugins: [
            //jpegoptim plugin for JPG
            jpegoptim({
                progressive: true, //Lossless conversion to progressive.
                max: 80 //try to set with and without this option
                //see other options on plugin site (link above) and take / add which you need
            }),
            /* As comment because on plugin page is nothing about lossless conversion
            // mozjpeg plugin for JPG
            mozjpeg({
                quality: 80
                //see other options on plugin site (link above) and take / add which you need
            }),*/
            //pngquant plugin for PNG
            pngquant({
                quality: [0.7, 0.8]
                //see other options on plugin site (link above) and take / add which you need
            })
        ]
    });

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

Source

对于PNG无损转换,请尝试使用AdvPNG插件,不带任何选项. AdvPNG插件的optimizationLevel选项默认设置为3(从0到4).

高级阅读

阅读这篇文章非常重要：

> A guide to PNG optimization

标签：javascript,gruntjs,imagemin,grunt-contrib-imagemin
来源： https://codeday.me/bug/20190701/1345743.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。