使用 imagemin-contrib (Grunt) 进行图像压缩

Question

我想在 Grunt.js 中测试 imagemin-contrib。我选择了三张jpg 运行dom图片（大小分别为44kb、92kb、77kb）并设置好文件夹和插件。

当我运行 imagemin grunt 任务时，我收到一条消息说照片已成功优化，但数字显示前两张照片的大小仅减少了 5kb 或 10kb，第三个根本没有改变。

我想知道 "optimized image" 这是否正常？我原以为尺寸会急剧下降。难道我选择的图片已经优化过了？还是我写 grunt 命令的方式？

下面是我用来执行 grunt 命令的代码：

module.exports = function(grunt) {

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        //Image Min Plugin
        imagemin: {
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'photos/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'photos/optim/'
                }]
            }
        }


    });

    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.registerTask('default', ['imagemin']);
};

Answer 1

一般信息

嗯，这完全取决于这些图像的原始状态。如果它们已经被压缩（例如，当使用 photoshop 导出时），它们几乎不能进一步压缩而不会降低质量。因此，您很可能不会通过优化获利很多。但是，如果这些是未压缩的图像，grunt-contrib-imagemin 会有很大帮助。

该插件可以很好地完成它应该做的事情，但很明显，如果质量下降，它不会压缩图像。它也不知道图像是否可以调整大小（这通常是一个很好的压缩）。如果你正在寻找最好的压缩，你可以运行 pagespeed insights (https://developers.google.com/speed/pagespeed/insights/) 它告诉你是否可以进一步无损压缩图像和如果你可以优化通过以不同的分辨率上传图像。如果您 want/need 更多压缩考虑有损压缩，它可以节省大量 kbs 而质量损失很小。

优化级别选项：

尽管它不会对压缩大小产生太大影响，但可以将 optimizationLevel 选项设置为 0 到 7 之间的级别。它启用一组优化操作并设置为 3默认。您设置的级别越高，压缩操作的计算成本就越高（无论如何都不重要）。所以你可以将它设置为 7，看看它对压缩有何影响：

imagemin: {
            options: {
                optimizationLevel: 7
            }
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'photos/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'photos/optim/'
                }]
            }
        }

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.

参考：https://github.com/gruntjs/grunt-contrib-imagemin

使用 imagemin-contrib (Grunt) 进行图像压缩

Image compression with imagemin-contrib (Grunt)

javascript

node.js

gruntjs

grunt-contrib-imagemin