JPEG・PNG・SVGをまとめて画像圧縮。Macショートカットの作成方法

｜ Mac ｜ 約9分で読めます

Webサイトに載せる画像、1枚ずつWebの圧縮サービスにアップロードしていませんか？MacのショートカットアプリとDockerを組み合わせて、Finderで右クリックするだけでJPEG・PNG・SVGをまとめて圧縮するショートカットを作りました。

Webサイトに載せる写真やスクリーンショットは、そのままだとファイルサイズが大きく、ページの表示が遅くなる原因になります。 Webの画像圧縮サービスを使えば小さくできますが、毎回ブラウザを開いて画像をアップロードして、ダウンロードして……を繰り返すのはなかなか面倒です。

そんな時はMacのショートカットアプリと、圧縮作業を代わりにやってくれる「Docker」を組み合わせることで、 Finder上で右クリックするだけで、JPEG・PNG・SVGをまとめて圧縮できるようになります。

準備：Docker Desktopをインストールする

Dockerは、アプリケーションを動かすための作業部屋（コンテナ）を、必要な時だけサッと用意して使えるツールです。
今回使う画像圧縮のツールは、本来ならターミナルでコマンドを打って、1つずつMacにインストールする必要がありますが、Dockerを使うことでそれらのツールはコンテナの中にだけ用意されるので、Mac本体に何かをインストールする必要がなくなります。

MacでDockerを使うなら、Docker Desktopをインストールするのが手っ取り早いです。（個人利用は無料） まずはこちらからDocker Desktopをダウンロードし、インストールしておきましょう。
（初回起動時にアカウントでのサインインを求める画面が表示されますが、スキップして構いません。）

インストールしたら、Docker Desktopをバックグラウンドで起動しておくだけでOKです。ショートカットを使うときも、起動したままにしておきます。

Dockerを使った画像圧縮ショートカットの作り方

まずはショートカットアプリを開き、右上の＋ボタンから新規ショートカットを作成します。

あとは右サイドメニューの検索窓からアクションを検索して、以下の順番で追加していきます。

1. Finderで選んだファイルを受け取る

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

「Finderで選択されたファイルを取得」アクションを追加した状態

2. 圧縮の開始を通知する

  • 「通知を表示」を追加し、圧縮開始のメッセージを入力
  • 「表示を増やす」をクリックし、添付ファイルを消去

「通知を表示」に圧縮開始のメッセージを入力し、添付ファイルを消去した状態

添付ファイルは自動で取得したファイルがセットされますが、容量が重いとエラーになることがあるので、消去しておきます。

3. Dockerで画像を圧縮する

  • 「シェルスクリプトを実行」を追加
  • スクリプトの入力欄に、以下をコピーして貼り付け
if ! docker image inspect img-compress >/dev/null 2>&1; then
  docker build -t img-compress - <<'EOF'
FROM node:24-alpine3.24
RUN apk add --no-cache imagemagick imagemagick-jpeg pngquant \
    && npm install -g svgo@4
EOF
fi

cd "$(dirname "$1")" || exit 1
mkdir -p compressed

docker run --rm -v "$PWD":/data -w /data img-compress sh -c '
for f in "$@"; do
  case "$f" in
    *.jpg|*.JPG|*.jpeg|*.JPEG)
      magick "$f" -auto-orient -strip -quality 70 "compressed/$f" ;;
    *.png|*.PNG)
      pngquant 256 --force --strip --skip-if-larger --output "compressed/$f" "$f" \
        || cp "$f" "compressed/$f" ;;
    *.svg|*.SVG)
      svgo --multipass "$f" -o "compressed/$f" ;;
  esac
done
' sh "${@##*/}"
  • シェル：「zsh」を選択
  • 入力：「変数を挿入」から 1.で追加した「Finderで選択されたファイルを取得」の下に表示されている「ファイル」を選択
  • 入力を渡す方法：「引数として」を選択

「シェルスクリプトを実行」にスクリプトを貼り付け、シェル・入力・入力を渡す方法を設定した状態

4. 圧縮が終わったら通知する

  • 「通知を表示」を追加し、完了のメッセージを入力
  • 「表示を増やす」をクリックし、添付ファイルを消去

「通知を表示」に完了のメッセージを入力し、添付ファイルを消去した状態

5. Finderの右クリックメニューから使えるようにする

右サイドメニューの詳細から、以下の項目にチェックを入れます。

  • クイックアクションとして使用
  • Finder

これで、Finderの右クリックメニューから実行できる画像圧縮のショートカットが完成です。

完成イメージ

ショートカットの完成イメージ

使い方はFinderで右クリックするだけ

Finderで圧縮したい画像を選択して右クリック→クイックアクション→作成したショートカット名を選びます。 初回はDockerイメージの作成が必要なので少し時間がかかりますが、2回目以降はすぐに圧縮が始まります。

Finderで画像を複数選択し、右クリックメニューのクイックアクションから「画像を圧縮」を選ぶところ

選んだ画像と同じフォルダの中に「compressed」フォルダができ、圧縮された画像が同じファイル名で保存されます。元の画像はそのまま残るので、仕上がりを見比べてから差し替えられます。

compressedフォルダに、圧縮されてサイズが小さくなった画像が保存された状態

試しに9枚の画像を圧縮してみたところ、どの形式もおおよそ半分前後のサイズになりました。 どれだけ小さくなるかは画像によって変わります。もともと圧縮されている画像だと、あまり小さくならないこともあります。

Docker + 画像圧縮ツールによる圧縮

ショートカットに貼り付けたシェルスクリプトがやっていることは、ざっくり以下の3つです。

  1. 圧縮用のイメージがまだなければ作る（初回のみ）
  2. 選んだ画像と同じフォルダに「compressed」フォルダを作る
  3. 画像の種類（JPEG／PNG／SVG）ごとに合うツールで圧縮し、「compressed」フォルダに保存する

Dockerにはイメージという、動作環境を定義しておけるテンプレートのような仕組みがあります。今回はスクリプトの冒頭で、画像圧縮用のイメージを自分で作っています。 一度作ったイメージはMacの中に残るので、2回目以降は作り直さずにそのまま使われます。

イメージの中には、画像の種類ごとに得意な無料のツールを入れています。

  • ImageMagick：JPEGを担当。画質を70に設定し、撮影日時などの付加情報も取り除いて小さくします。縦向きに撮った写真が横倒しにならないよう、向きを直してから保存します
  • pngquant：PNGを担当。使う色の数を256色まで減らして小さくします。圧縮してもかえって大きくなる場合は、元の画像をそのままコピーします
  • SVGO：SVG（図やアイコンによく使われる画像形式）を担当。見た目に関係しない余分な記述を取り除きます

まとめ

一度設定してしまえば、あとはFinderで右クリックするだけです。画像の種類を気にせずまとめて選べるので、Webサイト用の画像を用意するたびにWebの圧縮サービスを開く手間がなくなります。

同じような繰り返し作業があれば、ぜひショートカットアプリを活用してみてください。

トップページへ戻る

関連記事