4

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

2 回答 2

5

您的问题标题中有答案 - "grunt-contrib-imagemin"。如果你用谷歌搜索，你会在Grunt.js 的GitHub 上找到这个页面，作为 Grunt GitHub 官方站点。在此页面上，所有内容都进行了非常详细的描述。

例如：

对于 imagemin OptiPNG 插件：

optimizationLevel （它适用于 PNG（适用于 OptiPNG 插件）而不适用于 JPG！）
类型：number
默认值：选择介于和之间的3
优化级别。07

优化级别0启用一组需要最少努力的优化操作。图像属性（如位深或颜色类型）不会发生变化，也不会重新压缩现有IDAT数据流。优化级别1支持单次IDAT压缩试验。选择的试验OptiPNG可能是最有效的。优化级别2和更高级别可以进行多次IDAT压缩试验；等级越高，试炼次数越多。

水平和试验：

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

不要尝试用于optimizationLevelJPG！对于 JPG 和 PNG，您会发现不同的优化选项。此优化级别选项的所有类型都在插件站点上进行了完整描述（请参阅下面的插件列表）。

在这个站点上，您有很多用于不同图像类型优化的插件。在您的情况下，它们是 JPG 和 PNG（WebP、Gif 和 SVG 也有）：

JPG优化插件：

PNG优化插件：

所有 PNG 插件都有不同的优化级别选项。例如，对于 AdvPNG 插件，您有一个as 选项，您可以在和optimizationLevel之间选择一个优化级别：04

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 …&gt;, path: 'build/images/foo.jpg'}, …]
})();

资源

对于 PNG 无损转换，请尝试使用不带任何选项的 AdvPNG 插件。optimizationLevelAdvPNG 插件的选项默认设置为3(from 0to 4)。

进阶阅读

阅读这篇文章非常重要：

于 2019-01-20T08:33:47.203 回答
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”文件夹中。

改编自这里。

于 2019-01-18T22:51:18.787 回答