【mac】大量の画像を一気に圧縮＆WebP変換

![img01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632409/0a6de0e2-3c23-5bb9-7e09-3b6145232354.png)

WebPでのサイト運用が当たり前になってきた、ということで。
PNG・Jpegごちゃ混ぜでも一括で圧縮可能 & 同時にWebPに変換するクイックアクションのご紹介。

<br>

こんな感じで右クリックのメニューから、圧縮と変換を同時に行えます。
圧縮だけ、WebP変換だけ、とメニューを分けることも可能なので運用に合わせて使ってください。

![webp変換.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632409/b0fdc1aa-72d2-de97-a8b5-0b9ba14ff1e9.gif)

<br>



手順はざっくり3ステップ。

:::note
1. **画像圧縮ツールのインストール**
2. **WebP変換ツールのインストール**
3. **Automatorでクイックアクションの登録**
:::

圧縮はお馴染みのツール「[pngquant](https://pngquant.org/)」と「[Jpegoptim](https://github.com/tjko/jpegoptim)」。
[Squoosh](https://squoosh.app/)の検証も今後したい。比較した方いたら教えてください。

webp生成は公式ツール「[cwebp](https://developers.google.com/speed/webp)」を使用。
圧縮率のコントロールができるので、劣化がひどい時に許容を確認しながら調整できるので使いやすい。

# 目次

[1.画像圧縮ツール＆WebPのインストール](#1-画像圧縮ツールwebpのインストール)
[2.Automatorでクイックアクションの登録](#2-automatorでクイックアクションの登録)
[3.使ってみる](#3-使ってみる)
[4.再度編集する場合](#4-再度編集する場合)

<br>

# 1. 画像圧縮ツール＆WebPのインストール

homebrewでのインストールを紹介します。
↓ homebrew入れてない方はこちら
[Homebrew - インストール](https://brew.sh/ja/#install)


### pngquant

```:
$ brew install pngquant
```

 [pngquant](https://pngquant.org/)

<!-- <br>
完了したらwhichコマンドでパスを確認しておきます。
```:
$ which pngquant
/Users/user/homebrew/bin/pngquant
```
-->

### Jpegoptim

```:
$ brew install jpegoptim
```
 [man page | jpegoptim](https://www.kokkonen.net/tjko/src/man/jpegoptim.txt)

### WebP

```
$ brew install webp
```


エンコード以外にもデコードなどWebP関連のツールが色々入ってます。
この中の`cwebp`コマンドでPNG/Jpeg画像を変換します。
gifアニメの変換ツールも含まれてたりするので、詳しくは公式へ。

[ウェブ用の画像形式  |  WebP  |  Google for Developers](https://developers.google.com/speed/webp?hl=ja)


<br>

# 2. Automatorでクイックアクションの登録


① Automatorを起動し、クイックアクションを選択。

![automator01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632409/8fe6ee9a-930a-967d-5a99-ce594c1c0721.png)

<br>

② アクション検索ボックスで「シェルスクリプト」を検索。シェルスクリプトをワークフローに追加します。
③ さらに検索ボックスで「通知」を検索してワークフローに追加。完了したら通知が飛ぶようにできます。

![automator02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632409/7cd95a4a-5392-4c32-f92f-9978f97506e1.png)

<br>

④ シェルスクリプトのワークフローを設定します。

![automator03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632409/cf28a330-3da7-1445-27d9-8aea20a44b5a.png)

:::note
- ワークフローが受け取る項目： イメージファイル
- シェル： bashを指定
- 入力の引き渡し方法： 引数として
- シェルのコードは下記を貼り付け。
```sh:
export PATH=$PATH:/usr/local/bin/
# 上記でパスが通らない方はpngquantなどの居るパスを確認。
# $ which pngquant
# ツールが居る場所に書き換えてください。

for f in "$@"; do
    # PNG
    [ $(basename "$f" .png) = $(basename "$f") ] || {
        pngquant --force --ext .png 256 --quality=70-90 "$f"
        # --qualityの値を調整することで画質調整可能
    }

    # JPG
    [ $(basename "$f" .jpg) = $(basename "$f") ] || {
        jpegoptim --strip-all --max=85 "$f"
        # --maxの値を調整することで画質調整可能
    }

    # WEBP
    cwebp -q 75 "$f" -o ${f%.*}.webp
    # 「75」を調整することで画質調整可能
done
```

png/jpgの分岐は、`||`演算子で「直前の式が`false`」時に処理を実行するようになっています。
例えば`img01.png`の場合、`basename "$f" .png`で拡張子が削除され`img01`となるので、元の名前と一致しなくなり、条件に合致します。
:::

⑤ 通知のタイトルやコメントは適宜設定してください。
⑥ 最後に名前をつけて保存したら完成です。

![automator04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632409/20706438-b31a-7abd-8cf8-fd47713995e5.png)

<br>

# 3. 使ってみる

画像を選択したら、右クリック > クイックアクション > （ここに保存した名前で追加されている）
正常に動作するか確認してください。

エラーになる場合はツールのパスが怪しかったりします。

![finder01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632409/17e1684b-491e-b57e-7fb7-c8395ec23c88.png)


# 4. 再度編集する場合


作ったアクションは下記に保存されています。

1. ユーザフォルダで「⌘⇧.」（コマンド・シフト・ドット）を押下して隠しファイルを表示します。
2. ライブラリ > Service > （ここにあります）

クリックでAutomatorが起動するので編集してください。

![service.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632409/a1307149-7ccb-0b6c-a9c4-a2f875f1a09e.png)

<br>

画像の圧縮のみ、WebP生成のみにアクションを分けることも可能なので
適宜カスタマイズしてください。

以上、お役に立てたら幸いです。