Automatorとpngquantで画像を自動的に圧縮し軽量化する

PNG画像を作成しても、そのサイズが最適化されていないことがあります。Webサイトに掲載する場合、最適化することで軽量になりますが、手作業では面倒ですので自動化を考えます。

Webサイトなどでよく使われるPNG形式の画像。

BMP形式と比べて、ファイルサイズが小さくなるため便利なのですが、作成したままでは最適化されていません。

最適化すると、そのファイルサイズを大きく減らすことができます。

Webサイトなど、多くの人がアクセスする場合はファイルサイズを小さくすると表示速度も早くなります。

手作業で最適化するのではなく、MacのAutomatorを使ってみましょう。

pngquantとは

PNG画像を最適化し、ファイルサイズを小さくできるコマンドラインツールです。

以下のように画像ファイルを指定してターミナルから実行することで、指定された画像のファイルサイズを小さくできます。

code:bash

$ pngquant test.png

このコマンドを実行すると、最適化された「test-fs8.png」というファイルが生成されます。

インストールするには、公式サイトからダウンロードする方法もありますが、Homebrewを使うと簡単です。

code:bash

$ brew install pngquant

pngquantで上書き保存する

上記で簡単に最適化できますが、別のファイルが生成されるのでは毎回ファイル名の変更が必要になります。

そこで、上書きして保存することを考えます。

この場合、以下のようにオプションを指定することで指定されたファイルに上書きできます。

code:bash

$ pngquant --ext .png --force test.png

複数のファイルを一括で最適化する場合は、以下のように実行すると、同一ディレクトリ内のPNGファイルをまとめて処理できます。

code:bash

$ pngquant --ext .png --force *.png

Automatorで自動化する

上記でも問題ありませんが、毎回コマンドを実行するのは面倒です。

そこで、ディレクトリ内にファイルが格納された段階で自動的に最適化することを考えます。

Macの場合、このような場合に使える「Automator」というアプリが最初からインストールされています。

これを起動し、以下の手順で上記の処理を「フォルダアクション」に指定します。

1. Automatorを起動し「新規書類」を選択する

2. 書類の種類から「フォルダアクション」を選択する

3. 画面左の「アクション」の「ユーティリティ」にある「シェルスクリプトを実行」を右側の枠内にドラッグ&ドロップする

4. シェルの内容入力欄に「/usr/local/bin/pngquant --ext .png --force "$@"」を入力する

5. 画面上部の「次の場所に追加されたファイルやフォルダを受け取る」の部分でフォルダを指定する

6. ファイルメニューから保存する