WordPressなどのCMSでブログを公開する者にとって、ユーザ(読者)の直帰率は永遠の課題ともいえるでしょう。直帰率が高くなる要因の1つがページの表示速度。ページの表示速度を遅くする要因はさまざまですが、その中の1つで重要な割合を占めるのが、画像ファイルの重さ。そこで、ブログを公開する場合には、私の場合は事前にローカル環境で画像ファイルを圧縮してから公開するようにしています。
MacやiPhoneのスクリーンショットを掲載することが多いのですが、これらのファイルのデフォルトの種類は「PNGファイル」です。そこで、よくこれらを圧縮するのですが、毎回毎回ツールを利用して圧縮するのは面倒くさい。そこで、Finderからキーボードショートカットで一発で圧縮できるようにしてみたので、情報を共有します。
FinderでPNGファイルを圧縮する
Finderでファイルを選択して何らかの操作する、一見敷居が高そうに聞こえますが、macOS(macOS?)に標準で搭載されている「Automator.app」を使用すれば、簡単に行うことができます。「Automator」の詳しい使い方については割愛しますが、「Automator」を使用して画像ファイルを圧縮する方法をご紹介します。
pngquantのインストール
pngquant
は、コマンドラインで使用できる非可逆圧縮のライブラリです。有名どころでは、TinyPNG – Compress PNG images while preserving transparencyが使用していますね。
pngquant
のインストールは、Homebrew — macOS 用パッケージマネージャーが便利です。Homebrewのインストールは、同サイトを確認してください。Homebrewをインストールしたら、ターミナルから以下のコマンドを実行してください。
brew install pngquant
通常は、/usr/local/bin/pnqquant
にインストールされます。
which pngquant
このコマンドでインストールされている場所が見つかるはずです。見つからない場合は、同コマンドがパスの通ったディレクトリ(環境変数PATHに設定されているパス)に置かれていないことを意味します。ここでは、/usr/local/bin/pngquant
にインストールされているものと仮定します。
Automatorでサービスを作成する
次に、「アプリケーション」→「Automator.app」を起動します。「Automator」では、文字通り、Macの操作を自動化できます。今回は、Finderで選択されたPNGファイルに対して、pngquant
による圧縮を行うことにします。
「サービス」を選択して、「選択」をクリックします。
「Automator」によるサービスの作成を行います。「“サービス"は、次の選択項目を受け取る」は「イメージファイル」、「検索対象」は「Finder.app」としてください。これで、Finder上で動作するサービスが作成できます。
次に、左側のライブラリから「Finder項目にフィルターを適用」を右側にドラッグ&ドロップします。条件を2種類作成します。1点が、「種類」が「イメージ」であること、もう1点が「ファイル拡張子」が「png」であること。「種類」が「イメージ」は、前もってフィルターされているので必要はないのですが…。
次に、左側のライブラリから「シェルスクリプトを実行」を右側にドラッグ&ドロップします。「シェル」は、「/bin/bash」または「/bin/zsh」とします。私の場合は、標準で「/bin/zsh」を使用しているため、デフォルトで「/bin/zsh」が表示されます。次に、「入力の引渡し方法」として「引数として」を選択します。そして、内容に以下を入力します。
for f in "$@"
do
/usr/local/bin/pngquant --force "$f"
done
pngquant
の詳しい使い方については、ターミナル上でpngquant
と入力して、↵を押してみてください。使い方が表示されます。
次に、左側のライブラリから「通知を表示」を右側にドラッグ&ドロップします。多量のファイルを処理する場合、どこまで処理が完了したかわからなくなるため、終わったら通知するようにします。「タイトル」「サブタイトル」「メッセージ」はお好みでどうぞ。
ここまでできたら、⌘+sでサービスを保存します。ここでは、「pngquant」という名称で保存します。
Finderで使用する
では、実際に使用してみましょう。Finderでイメージファイル(PNGファイルのみではない!)を選択して、右クリックすると、「pngquant」という名称のサービスが表示されました。あとは、これを選択するだけで圧縮してくれます!毎回、ターミナルから実行するよりは随分と楽になりました。
キーボードショートカットを使用する
右クリックしてメニューを表示させることすら面倒?そんなあなたにオススメしたいのが、キーボードショートカットです。「システム環境設定」を開き、「キーボード」をクリックします。
「ショートカット」タブで「サービス」を選択します。先ほど登録した「pngquant」というサービスが登録されていることがわかります。ここに任意のキーボードショートカットを割り当てることで、PNGファイルを選択した状態で、そのキーボードショートカットを押すことで、キーボードの操作のみでファイルの圧縮ができます!便利!