29
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

SansanAdvent Calendar 2015

Day 10

1行のコマンドでアプリ開発に利用してる全てのPNG画像を全て圧縮する

Posted at

はじめに

みなさんは、大きいサイズの画像と小さいサイズの画像どちらが好きですか?僕は小さいサイズの方が好きです。

アプリを開発されてる方の中にはTinyPNGなどのサービスを利用して画像を圧縮してるよ、という方も結構多いのではないでしょうか。しかしながら、ブラウザでいちいち画像を指定するのはなかなか面倒なものです。

また、既にたくさんの画像をアプリで利用していて、これまで圧縮などをしたことはなかったけどバイナリのサイズが気になってきた..という方もいると思います。

そこで、1コマンドでプロジェクト内の画像を全て圧縮するという(乱暴ではあるが)便利なコマンドを考えてみました。

pngquantをインストールする

pngquantはコマンドラインから利用できるPNG画像圧縮ツールで、TinyPNGでもこのコマンドが利用されているそうです。今回は、このツールを利用して画像を再帰的に圧縮するコマンドを叩きます。
 
pngquantのインストールは、brewをお使いならば下記のコマンドだけでインストール出来ます。

$ brew install pngquant

ちなみに、この記事ではpngquantの細かなコマンドについては説明しませんが下記の記事などが参考になります。

参考: シンプルで強力な PNG オプティマイザ pngquant

実行するコマンド

pngquantのインストールが完了したら、あとは下記のコマンドをアプリのプロジェクトのディレクトリで実行すれば全ての画像を圧縮することが出来ます。

find ./ -name "*.png" | xargs -L1 -P8 pngquant --ext .png --speed 1 --skip-if-larger --force

上記コマンドでは並列で処理を実行することもあり、画像の量やマシンの環境にもよりますが、数百個くらいの画像なら大体1分以内に終わるんじゃないかと思います。参考までに、手元のMabBookProで400個ほどの画像があるプロジェクト内で実行したところ10秒ほどで圧縮が完了しました。

同じ画像をpngquantで何度も圧縮するとどうなるのか?

気になって調べてみたのですがpngquantで圧縮済みの画像に対してpngquantを適用するとどうなるのか、という点については開発者であるpornelさんが下記の様にコメントしています。

If you run pngquant on image that is already paletted it won't degrade it (except when you use --quality option to deliberately lower the quality).

もし、既に圧縮済みの画像に対してpngquantを実行したとしても、それによって品質が下がることはありません(ただし、--quality オプションを利用して明示的に品質を下げる場合は除く)

実際に、上記のコマンドを繰り返し実行しても画像のサイズは1度実行したときと同じで、見た目上にも特に劣化などは見られませんでした。

審査提出時/リリースのタイミングで全圧縮

新しく追加した画像をpngquantで都度圧縮していくという運用も悪くはないのですが、手間を考えると若干乱暴ではありますがリリースビルド生成時に上記コマンドで毎回全ての画像を圧縮する、という対応もアリかもしれないという気がしています。

CI環境などが既に整っている場合は、上記の様な操作をCIで行ってしまうというのもアリかもしれません。

ただし、この方法では既に圧縮済みの画像についても差分が生じてしまうのでその点は気持ち悪く感じます。

git pre-commit hookを利用する

管理コストなく全ての画像を圧縮する方法としてもう一つ考えられるのは、git pre-commit hook を利用する方法です。これは、gitでcommitする前(コミットメッセージが入力される直前)に特定のスクリプトを動作させることが出来る、という仕組みです。

ここで、新しくgit管理下に画像が追加されようとしていたならばpngquantで圧縮、という処理を行えば全ての画像を圧縮するよりスマートに同様のことを実現できそうです。

同様なことをしようとしている方がいたので、まだ試してはないのですが下記の様なスクリプトを .git/hooks/pre-commit に配置することでcommit時に画像を圧縮することができるはずです。(pngquantのオプションはプロジェクトに合わせて調整するのが良いでしょう)

29
23
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?