【问题标题】:Image compression with imagemin-contrib (Grunt)使用 imagemin-contrib 进行图像压缩(Grunt)
【发布时间】:2017-12-01 19:06:29
【问题描述】:

我想测试Grunt.js 中的imagemin-contrib。我选择了三个jpg 随机图像(大小分别为44kb、92kb、77kb)并设置了文件夹和插件。

当我运行imagemin grunt 任务时,我收到一条消息说照片已成功优化,但数字显示前两张照片的大小仅减少了 5kb 或 10kb,而第三张在全部。

我想知道这对于“优化图像”是否正常?我预计尺寸会更剧烈地下降。难道是我选择的图像已经被优化了?或者可能是我写 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']);
};

【问题讨论】:

    标签: javascript node.js gruntjs grunt-contrib-imagemin


    【解决方案1】:

    一般信息

    这完全取决于这些图像的原始状态。如果它们已经被压缩(例如使用 Photoshop 导出时),它们几乎不能进一步压缩而不会损失质量。因此,您绝对有可能不会通过优化获得很多收益。如果这些是未压缩的图像,那么 grunt-contrib-imagemin 会很有帮助。

    插件在它应该做的事情上做得很好,但如果质量下降,它显然不会压缩图像。它也不知道图像是否可以调整大小(这通常是非常好的压缩)。如果您正在寻找最佳压缩,您可以运行 pagespeed 洞察 (https://developers.google.com/speed/pagespeed/insights/),它会告诉您是否可以进一步无损压缩图像以及是否可以通过以不同的分辨率上传图像来优化图像.如果您想要/需要更多压缩,请考虑有损压缩,它可以节省大量 kb,而质量损失很小。

    优化级别选项:

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

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

    优化级别 0 启用一组优化操作, 需要最少的努力。图像属性不会发生变化 像位深度或颜色类型,并且不重新压缩现有 IDAT 数据流。优化级别 1 启用单个 IDAT 压缩试验。选择的试验是 OptiPNG 认为的 可能是最有效的。优化级别 2 及更高级别 启用多个 IDAT 压缩试验;等级越高, 更多试验。

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

    【讨论】:

    • 这是我在这里收到的最令人惊讶的完整答案。非常感谢您花时间详细解释。
    • 我会补充一条信息,因为我实际上忘记了一些东西
    • 我认为 optimizationLevel 仅适用于 .png,git 说“optimizationLevel (png)”
    猜你喜欢
    • 1970-01-01
    • 2023-04-06
    • 2014-12-13
    • 1970-01-01
    • 2019-06-09
    • 2017-03-09
    • 1970-01-01
    • 1970-01-01
    • 2020-12-30
    相关资源
    最近更新 更多