WEB制作をしている中で、大量の画像を圧縮したいと思ったことはないでしょうか？

アップロードすることで画像を圧縮してくれるWEBツールもたくさんありますが、都度アップロードしてダウンロードするのが結構手間だったりしますよね。

今回はApple純正の「ショートカット」アプリで、MacのFinder上で完結できるPNG画像の一括圧縮アクションの作り方をご紹介します。

使用するパッケージ管理ツール

今回使用するソフトのインストールにHomebrewというパッケージ管理ツールを使用します。まだインストールされていない方は適宜インストールを済ませてから次に進んでください。

インストールの方法については以下で解説しています。

Homebrewのインストールと使い方について解説（Apple Silicon Mac対応）

Homebrewとは？ Homebrew（ホームブリュー）とは主にmacOSとLinuxで使われるパッケージ管理ツールで、コマンドラインで様々なアプリケーションやツールを簡単にインストール、更新、削除ができます。

https://blog.scarecrock.com/post/homebrew-install-basic/

pngquantのインストール

pngquantはImageAlphaなどの画像圧縮ソフトの内部で使われているツールで、png形式のみの対応です。256色変換を行うことが可能で、見た目にほとんど変化なくファイルサイズを大幅に縮小してくれる強力なツールで、処理も高速です。

Homebrewを使用してpngquantをMacにインストールします。ターミナルで下記を実行しましょう。

brew install pngquant

インストールが完了したら試しに下記のコマンドを実行してみましょう。オプションなどの説明が表示されたら正常にインストールされています。

pngquant -help

ImageOptimのインストール

ImageOptimは単体では上記のpngquantほどの圧縮率はなく、処理も重めですが、pngの他にもjpg、gifの圧縮にも対応していて、汎用性が高いツールです。

pangquantとは別の圧縮方式を取っているため、最大限圧縮するためにこちらも利用します。

以下の「Download for Free」からインストールします。

ImageOptim — how to use

ImageOptim-CLIについて

今回はImageOptimに関してはGUIソフトをインストールしますが、こちらにはCLIに対応したものもあります。前述のpngquantがCLIでインストールするツールになりますので、こちらも同じくCLIにすることで、よりスマートに実装できるかもしれません。

ただAppleシリコン製MacだとHomebrewに対応してなくnpmを使う必要があり、環境によってはシェルスクリプトを調整する必要があったりと少し難易度が高くなるため、今回はGUI版の方を使用します。興味のある方は試してみてください。

ImageOptim-CLI

ショートカットアプリの設定

次にショートカットアプリを開いて、新規ショートカットを作成していきます。ショートカット名には「PNG圧縮」などわかりやすい名前を任意でつけてください。

「Finderで選択されたファイルを取得する」を追加

まずは右側のサイドメニューのアクション検索欄に「Finder」と入力して、表示された検索結果から「Finderで選択されたファイルを取得」を選択して追加します。

「シェルスクリプトを実行」を追加
（pngquantの設定）

次にサイドメニューのアクション検索欄に「スクリプト」と入力して、表示された検索結果から「シェルスクリプトを実行」を選択して追加します。こちらにはpngquantの処理を実行するようなスクリプトを追加していきます。

スクリプトの入力欄には下記を入力してください。

source ~/.zprofile #必要に応じて調整
pngquant --speed 1 --force --ext .png 256 "$@"

まずは「source」コマンドでHomebrewのパスを通す設定をしているファイルを読み込み、Homebrewでインストールしたコマンドを使えるようにしています。こちらの設定部分は環境によって変わるため適宜調整してください。

次にファイル選択で受け取ったファイルを全てにpngquantで256色変換を行い、元ファイルを上書きする形でpng形式で保存しています。

オプション等細く設定したい方は公式サイトにオプションが載っています。

公式サイト

「シェルスクリプトを実行」を追加
（ImageOptimの設定）

次に上記と同じ流れでもう一つ「シェルスクリプトを実行」を追加します。こちらにはImageOptimの処理を追加していきます。

open -a ImageOptim.app "$@"

その他の設定項目

シェル：使用しているシェル（最近のMac OSではデフォルトで「zsh」）

入力：「ファイル」

入力を渡す方法：「引数として」

通知を表示する

次に上記の処理の完了後の通知を設定してきます。

サイドメニューのアクション検索欄に「通知」と入力して、表示された検索結果から「通知を表示」を選択して追加します。追加したら、ワークフロー完了後に表示する任意の通知メッセージを入力します。

ショートカットアプリのワークフローは受け取ったファイルをImageOptimに渡すところまでになりますので、こちらの通知はImageOptimに渡した段階で表示されます。最終的にはImageOptimアプリの処理が完了したら圧縮完了になります。

クイックアクションに追加する

最後にクイックアクションに追加して、Finderの右クリックメニューからアクセスできるように設定します。

ここまでできたらショートカットの設定は完了です。

実際に使ってみる

Finderからファイルを選択して右クリックをすると、メニューのクイックアクションに今回作成したショートカットが追加されています。

複数のpng画像を選択して実行後、設定したワークフローの完了メッセージが通知されます。その後ImageOptimの画面が立ち上がるので、全ての画像に緑のチェックマークが付いたら圧縮完了です。

比較

次に圧縮した画像を比較してみましょう。

使用前（3.4MB）

使用後（925KB）

いかがでしょうか？

特に劣化した感じもせずに、約72%の容量削減に成功しています。

まとめ

WEB制作は大量の画像を扱うことが多いので、画像の圧縮が必要になる場面はどうしても多くなるとは思います。そして、こういった繰り返しの付随作業は出来る限り負担を減らしたいところです。

今回作成したショートカットで少しでも制作者の負担を軽くして、本来の創作活動に費やす時間を増やすことができれば幸いです。