Mac Automatorとpngquantを使ってPNG画像の圧縮を自動化する方法

更新日 2017年2月25日

イメージオプティムでPNG画像を圧縮しようとするとすごく時間がかかるので、他の方法を探してみたらMacのAutomatorとpngquant というコマンドラインのPNG最適化ツールを使う方法があったので試してみました。

見つけた情報そのままでは僕の環境ではうまく動かなかったので設定方法を書き留めておきます。お役に立てば幸いです。

フォルダに保存したPNG画像を自動最適化する設定

設定したフォルダにPNG画像が保存されると、自動でpngquantのコマンドが走るようにAutomatorを使って設定をします。

1. pngquantのインストール

pngquant はコマンドラインで使えるPNG圧縮ツールなんですが、僕の場合、Homebrewから以下のコマンドでインストールしました。

brew install pngquant

ちなみに、pngquantについての説明や使い方はこちらの記事がわかりやすかったです。

2. Automatorサービスの作成

任意のイメージファイルに対してpngquantのコマンドを走らせるAutomatorサービスを以下の手順で作成します。

Automatorで新規サービスを選択

Automatorの「ファイル」メニューから「新規」を選んで、さらに「サービス」を選択します。

「”サービスは、次の選択項目を受け取る」で「イメージファイル」を選択

「シェル」で検索して「シェルスクリプトを実行」を追加

左上にある検索ボックスから「シェル」を検索して「シェルスクリプトを実行」を右側にドラッグします。

「シェルスクリプトを実行」を設定

「シェルスクリプトを実行」パネルで以下のように設定をします。

ここで指定しているpngquantのコマンドのオプションでは、拡張子を「.png」にしてファイルを上書き保存するようにしています。

/usr/local/bin/pngquant --ext .png --force "$@"

デフォルトではファイル名-fs8.pngで保存されるので、--ext .pngのオプションでファイル名.pngで保存されるように指定しています。また--forceオプションで、ファイルが上書き保存されるように指定しています。

通知の設定

検索ボックスで「通知」を検索して「通知を表示」を右側にドラッグします。

「通知を表示」パネルの内容を設定

以下のように通知内容を設定します。

Automatorのファイルを保存

保存しようとすると以下の画像のように保存場所が選べないようになっているので、一度、指定のフォルダに保存しました。なんで好きな場所に保存させてくれないのかは謎です。。。僕の環境だけでしょうか？

ファイルの移動

指定したフォルダにPNG画像を保存した際にAutomatorのサービスを走らせるためには、そのフォルダに「フォルダアクション」を設定する必要があります。先ほど作成したAutomatorのサービスを「フォルダアクション」で利用するには、*.workflowファイルを以下のフォルダに入れます。

/Users/ユーザ名/Library/Workflows/Applications/Folder Actions

3. フォルダアクションの設定

フォルダを右クリックして「サービス」メニューから「フォルダアクション設定…」を選びます。以下が出てくるので、先ほどAutomatorで作ったサービスを選びます。

これで、指定したフォルダにPNG画像を保存すると、自動でpngquantのコマンドが走って最適化してくれるようになります。最適化が完了すると画面に以下の通知が表示されます。

以上で設定完了です！

ファイルの右クリックでPNG画像を最適化できるようにする設定

先ほど設定したPNG画像の最適化を、以下のように画像ファイルの右クリックから実行することも可能です。

この設定を有効にするには、先ほどAutomatorで作った*.workflowファイルを以下のフォルダにコピーします。

/Users/ユーザ名/Library/Services

OptiPNGとイメージオプティムで同じ設定をする方法

pngquantはファイルサイズがかなり小さくなりますが、非可逆圧縮（lossy）でPNG-8で画像を保存するので、画像の内容が変わってしまう可能性があります。イメージの種類によっては可逆圧縮（lossless）をするOptiPNG などのツールを使ったほうが良い場合もありそうです。僕の場合、OptiPNGとイメージオプティムの設定をしてみました。

僕の場合、最終的には3つのフォルダを用意して、それぞれにpngquant、OptiPNG、イメージオプティムのフォルダアクションを指定することで、保存先によって別の最適化が実行されるように設定しました。

OptiPNGの設定

こちらもHomebrewからインストールしました。

brew install optipng

OptiPNGをインストールしたら、pngquantの時と同じようにAutomatorでサービスを作成します。コマンドはオプションが必要ないので、以下を使用します。

/usr/local/bin/optipng "$@"

イメージオプティムの設定

イメージオプティムはコマンドラインからも使うことができるので、pngquantやOptiPNGと同じように設定をします。Automatorのサービスで、以下のコマンドを走らせるように設定します。

/Applications/ImageOptim.app/Contents/MacOS/ImageOptim "$@"

ちなみに、ImageOptimの場合、PNGだけでなくJPEGも最適化できます。

Macの環境など

今回、この設定を試したのは、以下の環境です。

ツール	バージョン
OS	OS X El Capitan (10.11.6)
Hardware	MacBook Pro (Retina, 13-inch, Mid 2014)
Automator	2.6
Homebrew	0.9.9
pngquant	2.3.1
OptiPNG	0.7.6
イメージオプティム	1.6.1

以上です！

2016年8月13日に公開され、2017年2月25日に更新された記事です。

About the author

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。

この記事をシェアする