javascript - 如何使用 grunt-contrib-imagemin 的插件无损优化图像？

Question

我正在尝试使用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'
            }]
        }
    }
});
...

Answer 1

您在问题的标题中找到了答案——“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

不要尝试对 JPG 使用 optimizationLevel!对于 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