こんにちは。社内で最もカタチから入るWebデザイナー、アズマです。
最近は会社にコーヒーミルを持ち込んで手挽きコーヒーを淹れていますが、味の違いは完全にわかりません。意味ない。
皆さん、デザインしてますか？ デザインはとても楽しいですね。
書き出したPNG画像を圧縮している時間を除けば。
画像圧縮にかける時間を圧縮したい！
ブラウザやアプリで表示する速さを少しでも上げてサービスの価値を高めるためには、
デザインしたファイルからPNGファイルを書き出すときに
圧縮して軽量化する必要がありますね。
圧縮率の高さとパンダのキモさに定評のあるTinyPNGなどのWebサービスを使っている方も多いのではないでしょうか。
……が、しかし、この作業、全くクリエイティブじゃないですよね。
画像を何度も修正したり大量に書き出すたびに、
「TinyPNGにアクセスして画像をアップロードして一つ一つダウンロードして…」
というの繰り返してると、だんだんと心が腐ってきます。
最初は「キモカワ…？」ぐらいだったパンダも次第に「キモ…」としか思えなくなってくるというものです。
pngquantで瞬時に圧縮しよう！
そんな、人の心を失いつつあるあなたに朗報です。
実は、TinyPNGの中で動いているのはpngquant（ピングクォント）という画像圧縮プログラムです。
pngquantはダウンロードして手元で実行できるので、
一日何度もTinyPNGのお世話になるぐらいだったらこっちでやっちゃいましょう。
しかも、Macの場合はフォルダアクションと連携することで、
「フォルダに保存した瞬間に自動で即圧縮」という必殺コンボを繰り出すことができます。
つまり「圧縮する」と心の中で思ったなら、その時スデに行動は終わっているということです。
すごいですね。
pngquantを動かすのにはターミナル（いわゆる黒い画面）が必要ですが、
そんなに複雑な操作は必要ないので安心してください。
インストール方法
今回はMacの場合を想定しています。
まずは早速、ターミナルを起動しましょう。
Homebrewが入っていれば1行でインストールできます。
Homebrewが入っていない方はまず、これをターミナルにコピペしてインストールしましょう。
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
そして以下の1行を同じようにコピペしてあげるとpngquantがインストールできます。
brew install pngquant
一瞬！
使い方
まずはターミナルで、画像が入っているフォルダのパスまで移動しましょう。
$ cd 【画像のフォルダパス】
ちなみに画像のフォルダパスは、ターミナルにフォルダをドラッグ＆ドロップすると瞬時に入力できます。便利！
早速圧縮してみましょう。一番基本のコマンドはこれです。
$ pngquant 【ファイル名】
するとこれが…
このように。
やったー！増えたー！！
後ろに-fs8とついたものが、圧縮されたほうのファイルです。
サイズも33KBから7KBに、TinyPNGと遜色ないレベルで圧縮されていますね。
圧縮したファイルの名前をいちいち変えるのが面倒だ、
ええい上書き保存してしまえ！という方はこちらのコマンド。
$ pngquant --ext .png --force 【ファイル名】
これで名前を変える手間も省けますね。
"--ext"は出力ファイル名を指定するオプションで、この後ろに ".png"を入力することで
「大将、同じファイル名で出力しとくれよ！」と注文できます。
"--force"は同名ファイルが存在する場合に、
「大将、細けぇことはいいんだ、上書きしちゃってくれよ！」と注文するオプションです。
このように、"pngquant"とファイル名の間に寿司屋のようにいろいろなオプションを追加することで、自分好みの設定をすることができます。
たくさんの画像をいっぺんに圧縮したい場合はこちらのコマンド。
$ pngquant --ext .png --force *.png
これで、フォルダ内の全てのPNG画像を一瞬で圧縮することが出来ます。マーベラス！
他にも圧縮率やスピードなどを指定するオプションもありますので、詳しくはマニュアルを。
「フォルダアクション」に設定してさらに便利に
とはいえ普段ターミナルを使わない方だと、
圧縮するたびにターミナルを開いてコマンドを打つのも面倒かもしれません。
Macのフォルダアクションを設定して、「圧縮用フォルダに放り込んだら勝手に圧縮」できるようにしちゃいましょう。お手軽！
まずは圧縮したい画像を放り込むための適当なフォルダを作りましょう。
次にフォルダアクションを作るために、Automatorを起動しましょう。
選択肢の中から「フォルダアクション」を選びます。
右上の「フォルダを選択」となっているプルダウンで「その他...」を選び、さっき作ったフォルダを選択します。
「シェルスクリプトを実行」のアクションを追加し、おもむろにフォームへ以下の1行をコピペしましょう。
/usr/local/bin/pngquant --ext .png --force "$@"
ちなみにこちらは自動で上書きしてしまうコマンドなので、
それが困る方は"--ext .png --force"の部分を抜いてください。
また、"/usr/local/bin/"の部分は、Homebrewでインストールした場合のpngquantが置いてあるパスです。
他の方法でインストールされた方は、その場所を指定してあげてください。
これで適当な名前をつけて保存してあげればOK！
作ったフォルダに自動圧縮機能がつきました。
試しにpngファイルを放り込んであげれば、メニューバーに歯車が現れ、一瞬の後に圧縮されるはずです。
一度作ってしまえば、あとは他のフォルダに適用するのも簡単です。
フォルダを右クリックし、「サービス」＞「フォルダアクション設定...」を選んで、
たった今作ったフォルダアクションを関連づけてあげましょう。これだけです。
まとめ
いかがでしたでしょうか？
今回はpngquantとAutomatorで画像圧縮の手間をなくす方法を紹介しました。
デザイナーも黒い画面でちょっとしたことができれば作業効率が上がりますね。
人間がやらなくていい作業はどんどん効率化して、
空いた時間で思う存分ビールを飲 クリエイティブな作業に集中しましょう。
それではまた会う日まで。アディダス！
