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

Question

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

javascriptgruntjsimagemingrunt-contrib-imagemin

4

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

- max4ever

2个回答

1

你可以使用optimizationLevel选项。该值范围从0到7，3为默认值。

例如：

imagemin: {
   dist: {
      options: {
        optimizationLevel: 5
      },
      files: [{
         expand: true,
         cwd: 'src/images',
         src: ['**/*.{png,jpg,gif}'],
         dest: 'dist/'
      }]
   }
}

在这个例子中，优化的图片是那些扩展名为png、jpg或gif，并且位于“src/images”文件夹及其所有子文件夹中的图片。优化的结果将存储在“dist”文件夹中。改编自此处。

- Tiago Martins Peres

这不是问题的关键，而且这只适用于png格式，我问的是jpeg格式。 - max4ever

这适用于png、jpeg或gif格式的文件。 - Tiago Martins Peres

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bharata · Accepted Answer

您在问题的标题中就已经有了答案 - "grunt-contrib-imagemin"。如果您在谷歌上搜索，您将会找到 Grunt.js 官方在 GitHub 上的页面：这个页面。在这个页面上，所有详细信息都被详细地描述了。 例如，对于 imagemin OptiPNG 插件：

optimizationLevel (这是针对 PNG 的（针对 OptiPNG 插件），而不是 JPG！)
类型： number
默认值： 3
选择介于 0 和 7 之间的优化级别。

优化级别 0 启用了一组最小化操作，这些操作需要最少的工作量。不会更改图像属性，如位深度或颜色类型，并且不会重新压缩现有的 IDAT 数据流。优化级别 1 启用单个 IDAT 压缩试验。所选试验是 OptiPNG 认为可能最有效的试验。优化级别 2 及更高级别启用多个 IDAT 压缩试验；级别越高，试验越多。

级别和试验次数:

1 次试验

8 次试验

16 次试验

24 次试验

48 次试验

120 次试验

240 次试验

不要尝试 使用 optimizationLevel 来优化 JPG！对于 JPG 和 PNG，您将找到不同的优化选项。这些优化类型的所有选项都在插件站点上有详细描述（请参阅下面的插件列表）。 在此站点上，您可以找到许多不同图像类型优化的插件。在您的情况下，它们是 JPG 和 PNG（您还可以在那里找到 WebP、Gif 和 SVG）： JPG 优化插件：

PNG优化插件：

所有PNG插件都有不同的优化选项。例如，对于AdvPNG插件，您可以选择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插件且不使用任何选项。AdvPNG插件的optimizationLevel选项默认设置为3（从0到4）。

进阶阅读

阅读以下文章非常重要:

PNG优化指南