[Front-End General] Grunt: Webページの表示高速化について考える(画像最適化編)

画像フォーマットと最適化と言っても、いろいろな方法がありますね。
圧縮率という観点から比較してみました。

こちらの補足として。

サンプル画像

比較に利用したのは下記のファイル。

比較

pitr_Rocket_icon.svg.thumb.png
|Format |byte |利用した手法|
|:———–|————:|:———–|
|.png| 4406 | .png オリジナルファイル |
|.png| 2974 |grunt-contrib-imagemin|
|.png| 2924 |ImageOptim-CLI (grunt-imageoptim)|
pitr_Rocket_icon.svg
|Format |byte |利用した手法|
|:———–|————:|:———–|
|.svg| 4465 | .svg オリジナルファイル |
|.min.svg| 1257 |svgo (grunt-svgmin?)|
|.svgz| 528 | .min.svg + mod_deflate |
|.js ※| 2994 |Ai->Canvas でHTML5 Canvas 化後、JS部のみ切り出し。 |
|.min.js| 2047 | .js + grunt-contrib-uglify |
|.min.js.gz| 665 | .min.js + mod_deflate |
※ サンプルは、サーバ側でgzip圧縮(803 byte)されています。
上記は、以下のまとめ。