2017-12-01 12 views
1

Grunt.jsimagemin-contribをテストしたかったのですが、私は3つのjpgランダムイメージ(サイズ:それぞれ44kb、92kb、77kb)を選択し、フォルダとプラグインを設定しました。imagemin-contrib(Grunt)による画像圧縮

私はimagemin gruntタスクを実行すると、写真が最適化されたとのメッセージが表示されましたが、最初の2枚の写真のサイズは5kbまたは10kbの縮小しか見られませんでした。 。

「最適化された画像」ではこれが正常だったのでしょうか?私はもっ​​と激しいサイズの減少を期待していました。選択した画像がすでに最適化されている可能性はありますか?それとも、私がどのようにしゃがんだ命令を書いているのだろうか?以下は

私はうなり声のコマンドを実行するために使用するコードです:絶対にこれらの画像を元の状態に依存

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']); 
}; 

答えて

1

一般情報

まあ。それらが既に圧縮されている場合(例えば、Photoshopでエクスポートする場合)、品質を損なうことなく、さらに圧縮することができる。したがって、最適化によって多くの利益を得られない可能性は間違いありません。これらが圧縮されていない画像の場合は、grunt-contrib-imageminが大いに役立ちます。

プラグインは、実行する必要があることに対して優れた仕事をしますが、品質が低下した場合、画像を圧縮しないことは明らかです。また、イメージのサイズを変更できるかどうかもわかりません(これはしばしば非常に良い圧縮です)。最高の圧縮率を求めている場合、別の解像度で画像をアップロードして画像を最適化することができれば、画像を無損失で圧縮できるかどうかを示すページスピードの洞察(https://developers.google.com/speed/pagespeed/insights/)を実行できます。より多くの圧縮が必要な場合は、損失圧縮を考慮してください。これにより、品質が少し低下するだけで多くのkbsを節約できます。

optimizationLevelオプション:

それが圧縮サイズには影響しませんにもかかわらずはずっとそれは、最適化の一連の操作を可能にし、0と7の間のレベルに設定することができoptimizationLevelオプションがありますデフォルトでは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

+0

これは私が今までここに受け取った中で最も驚くほど完全な答えです。それを十分に説明する時間をとってくれてありがとう。 –

+0

実際に何かを忘れてしまったので別の情報を追加します – kentor