1000ch.net

2014.02.03

画像の最適化をCLIだけで行うgrunt-imageを作った

Webにおける画像については以前記事にしたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。

前置き

私の業務は弊社サービスのパフォーマンス改善を業務。何がボトルネックになっているかは各プロジェクトでまちまちだが、共通しているのが 「とにかく画像が多い」 というところ。どのサービスもペイロードサイズの80%程を画像が占めている。

画像の最適化を忘れるだけで(例えば)100KBとか平気で増えるので、これではCSSやJavaScriptのファイルサイズを減らしても本末転倒である(もちろんCSSもJavaScriptも結合と圧縮は非常に重要だけど!)。

各種最適化ツール

ではどうやって画像を最適化するのか、という話になるが、GUIだと以下の3つが有名で優秀。

GUIを使った開発フローがあっても、最適化し忘れというのが必ず起こる。人間だし。これを突き詰めていくと、自然と自動化という発想に至る。

Jenkins等のCIツールで使うことを考えるとLinux環境で実行できることが条件になる。gruntjs/grunt-contrib-imageminはLinuxでもMacでも実行出来るけど内包ライブラリが不十分だし、grunt-imageoptimはImageOptimとImageAlphaを使うだけあってほぼ完璧な最適化をしてくれるけどMac環境が必須…。

というわけで、作った。

grunt-image

ImageAlphaとImageOptimで使っているライブラリ群を内包している他、追加でjpeg-recompressというライブラリも含んでいる。

CLIで完結しているものはrubyでは既にあったりするが、Node.jsのほうが便利な気がしている。これでローカル環境での実行はもちろん、CIツールとの連携も楽になるはず。

いつも通りnpm install --save-dev grunt-imageでインストール可能。gruntfile.jsの設定はREADMEを参考にどうぞ。他にも設定したい項目があったり、この圧縮オプションも使うと良いですよ等あれば、issuesから一報ください。

Node.jsのモジュールも幾つか作った

余談だが、ライブラリの依存関係をnpmで解決したかったのでNode.jsでラップされていないモジュールは自分で作った。

ライブラリ単独で使う要件があればどうぞ。

ぼやき

画像が増えてしまうことはある種宿命だとは思っているものの、デザイナーとその辺の意識を分かち合えないと最高のWebパフォーマンスは出ない。かと言ってデザイナーがクリエイティビティを失う結果になってもまずいし。

でもWebパフォーマンスが重要なのは事実だし、画像を使えば少なからずコストがかかる(モバイルWebに於いては特に)のも事実。バランスを取りながらやっていかないといけない。