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

Question

我正在尝试使用进行无损优化JPEG / PNG图像imagemin，但是使用扩展名时出现问题，它们会“反优化”，这意味着结果图像比原始图像大。我该如何预防？

这是我的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"。如果您用Google搜索，则会在GitHub上的Grunt.js官方站点上找到此页面。在此页面上，对它们的所有描述都非常详细。

例如：

对于imagemin OptiPNG插件：

optimizationLevel （适用于PNG（适用于OptiPNG插件），不适用于JPG！）
类型：number
默认值：3
在0和之间选择优化级别7。

优化级别0启用了一组需要最少工作量的优化操作。图像属性（如位深度或颜色类型）将不会更改，也不会重新压缩现有IDAT数据流。优化级别1可进行一次IDAT压缩试用。选择的试验OptiPNG可能是最有效的方法。优化级别2和更高级别允许进行多次IDAT压缩试验；级别越高，试验越多。

等级和试验：

1. 1 试用
2. 8 试验
3. 16 试验
4. 24 试验
5. 48 试验
6. 120 试验
7. 240 试验

不要尝试将其optimizationLevel用于JPG！对于JPG和PNG，您会找到不同的优化选项。插件站点上完整描述了此优化级别选项的所有类型（请参见下面列出的插件）。

在此站点上，您有许多用于优化不同图像类型的插件。就您而言，它们是JPG和PNG（您也可以使用WebP，Gif和SVG）：

JPG优化插件：

• 用于imagemin的jpegtran插件
• 用于imagemin的mozjpeg插件
• 用于Imagemin的jpegoptim插件

用于PNG优化的插件：

• 用于imagemin的pngquant插件
• 用于imagemin的pngout插件
• 用于imagemin的optipng插件
• 用于imagemin的pngcrush插件
• 用于imagemin的AdvPNG插件

所有PNG插件都有不同的优化级别选项。例如，对于AdvPNG插件，您可以使用optimizationLevelas选项，并且可以在0和之间选择优化级别4：

0不要
1压缩快速压缩（zlib）
2压缩正常（7z）
3压缩额外（7z）
4压缩极端（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'}, …]
})();

资源

对于PNG无损转换，也请尝试使用无任何选择的AdvPNG插件。optimizationLevelAdvPNG插件的选项默认情况下设置为3（从0到4）。

高级阅读

阅读文章非常重要：

• PNG优化指南