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"中有答案。如果您用Google搜索，则会发现Grunt.js的 this page on GitHub 是Grunt 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试用

请勿尝试为JPG使用optimizationLevel！对于JPG和PNG，您会找到不同的优化选项。 此优化级别选项的所有类型在插件网站上都有完整描述（请参见下面的插件列表）。

在 this site 上，您有许多用于优化图像类型的插件。在您的情况下，它们是JPG和PNG（您也可以使用WebP，Gif和SVG）：

用于JPG优化的插件

用于PNG优化的插件

所有PNG插件具有不同的优化级别选项。例如，对于AdvPNG插件，您可以选择optimizationLevel，并且可以在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'}, …]
})();

Source

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

高级阅读

阅读文章非常重要：

A guide to PNG optimization

Answer 2

您可以使用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”文件夹中。

Adapted from here.

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

2 个答案: