, ,

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

公開日: 2013/12/27
更新日: 2019/09/19

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

[markdown]
こちらの補足として。

> * [Grunt: Webページの表示高速化について考える（JavaScript・CSS編） | deadwood](https://www.d-wood.com/blog/2013/12/05_5079.html)

### サンプル画像

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

> * [Rocket clip art – vector clip art online, royalty free & public domain](http://www.clker.com/clipart-rocket.html)

## 比較

[pitr_Rocket_icon.svg.thumb.png](http://www.clker.com/cliparts/5/a/8/7/12375609571200265874pitr_Rocket_icon.svg.thumb.png)

|Format |byte |利用した手法|
|:———–|————:|:———–|
|[.png](http://www.clker.com/cliparts/5/a/8/7/12375609571200265874pitr_Rocket_icon.svg.thumb.png)| 4406 | .png オリジナルファイル |
|.png| 2974 |[grunt-contrib-imagemin](https://www.d-wood.com/blog/2013/12/02_5068.html)|
|[.png](https://www.d-wood.com/demo/20131212/pitr_Rocket_icon.svg.thumb.png)| 2924 |[ImageOptim-CLI](https://www.d-wood.com/blog/2013/12/12_5109.html) ([grunt-imageoptim](https://github.com/JamieMason/grunt-imageoptim))|

[pitr_Rocket_icon.svg](http://www.clker.com/cliparts/5/a/8/7/12375609571200265874pitr_Rocket_icon.svg)

|Format |byte |利用した手法|
|:———–|————:|:———–|
|[.svg](https://www.d-wood.com/demo/20131212/pitr_Rocket_icon.svg)| 4465 | .svg オリジナルファイル |
|[.min.svg](https://www.d-wood.com/demo/20131212/pitr_Rocket_icon.min.svg)| 1257 |[svgo](https://github.com/svg/svgo) ([grunt-svgmin](https://github.com/sindresorhus/grunt-svgmin)?)|
|[.svgz](https://www.d-wood.com/demo/20131212/gzip/pitr_Rocket_icon.svgz)| 528 | .min.svg + mod_deflate |
|[.js](https://www.d-wood.com/demo/20131217/pitr_Rocket_icon_org.html) ※| 2994 |Ai->Canvas でHTML5 Canvas 化後、JS部のみ切り出し。 |
|.min.js| 2047 | .js + [grunt-contrib-uglify](https://github.com/gruntjs/grunt-contrib-uglify) |
|[.min.js.gz](https://www.d-wood.com/demo/20131217/pitr_Rocket_icon_min.html)| 665 | .min.js + mod_deflate |

※ サンプルは、サーバ側でgzip圧縮（803 byte）されています。

上記は、以下のまとめ。

> * [Grunt: png, jpg, gif を圧縮する | deadwood](https://www.d-wood.com/blog/2013/12/02_5068.html)
> * [ImageOptim-CLI で画像ファイルを最適化する | deadwood](https://www.d-wood.com/blog/2013/12/12_5109.html)
> * [SVG まわりの状況と、SVGO によるファイル最適化 | deadwood](https://www.d-wood.com/blog/2013/12/12_5116.html)
> * [HTML5 Canvas で表現した画像を grunt-contrib-uglify で最適化する | deadwood](https://www.d-wood.com/blog/2013/12/17_5141.html)
> * [Ai->Canvas: ai ファイルを HTML5 Canvas へ変換する | deadwood](https://www.d-wood.com/blog/2013/12/17_5129.html)
> * [Apache: mod_deflate, mod_expire でページの表示速度を改善する | deadwood](https://www.d-wood.com/blog/2013/12/26_5150.html)
[/markdown]