[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) |
| 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）されています。
上記は、以下のまとめ。