GitHub Actions による自動画像圧縮

## 概要

Pull Requestの作成時またはpush時にGitHub Actionsを使い自動で画像圧縮行うようにする。

## 使用するAction

### Image Actions

GitHub: https://github.com/marketplace/actions/image-actions
作者: https://calibreapp.com/
圧縮アルゴリズム: [mozjpeg](https://github.com/mozilla/mozjpeg), [libvips](https://github.com/libvips/libvips) 
参考: https://calibreapp.com/blog/compress-images-in-prs

## サンプル

レポジトリ: https://github.com/taquaki-satwo/image-optimize-sample
ブランチ: https://github.com/taquaki-satwo/image-optimize-sample/tree/develop
PR: https://github.com/taquaki-satwo/image-optimize-sample/pull/2

## 導入方法

以下のYAMLファイルを .github/workflows 下に配置する。

```yaml:calibreapp-image-actions.yml
name: Compress images
on: pull_request
jobs:
  build:
    name: calibreapp/image-actions
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master

      - name: Compress Images
        uses: calibreapp/image-actions@master
        with:
          githubToken: ${{ secrets.GITHUB_TOKEN }}
```

### 圧縮品質の設定

1から100までの整数をstringで指定する。指定できるのはJPEG、PNG、WEBP。デフォルトは80。

```yaml:calibreapp-image-actions.yml
- name: Compress Images
  uses: calibreapp/image-actions@master
  with:
    githubToken: ${{ secrets.GITHUB_TOKEN }}
    jpegQuality: "80"
    pngQuality: "80"
    webpQuality: "80"
```

### 除外ディレクトリの設定

コンマ区切りで指定する。（スペースは使用できない）

```yaml:calibreapp-image-actions.yml
- name: Compress Images
  uses: calibreapp/image-actions@master
  with:
    githubToken: ${{ secrets.GITHUB_TOKEN }}
    ignorePaths: "node_modules/**,build"
```

### 特定の画像ファイルが変更されたときのみ実行する

デフォルトでは画像ファイルを含まないPull Requestでも実行される。

```yaml:calibreapp-image-actions.yml
name: Compress images
on:
  pull_request:
    paths:
      - '**.jpg'
      - '**.png'
      - '**.webp'
```

## 使い方

1. 画像ファイルを含むプルリクエストを作成。

![スクリーンショット 2020-04-12 11.15.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45634/cac66966-d76e-8ad0-f447-986a82932ebc.png)

2.圧縮された画像がコミットされるのでローカルにpullする。

3.画像を追加、修正しpushする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45634/2d08df6b-f0b2-3dde-b20e-39e9ef278228.png)

その際、圧縮済みのファイルは以下のように表示される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45634/bd3dc9fa-1ddc-bfd4-0bb7-1dbc1c88112f.png)

## 圧縮前後の比較

以下はデフォルト品質（80）

|                                                              圧縮前                                                               |                                                              圧縮後                                                               |
| :-------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: |
| ![neko-chan-003.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45634/75a935aa-e63d-829a-eac8-869837f08e7f.jpeg) | ![neko-chan-003.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45634/50b31466-78f7-79f0-2af1-f3a56d9c8cd3.jpeg) |
|                                                             332.34 KB                                                             |                                                         168.37 KB(-49.3%)                                                         |

|                                                              圧縮前                                                               |                                                              圧縮後                                                               |
| :-------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: |
| ![neko-chan-004.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45634/bdc43b4a-dbca-051b-6fb6-28633021ecf2.jpeg) | ![neko-chan-004.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45634/8c1ca166-9119-5be7-b07b-5797338c4a36.jpeg) |
|                                                             204.70 KB                                                             |                                                         147.57 KB(-27.9%)                                                          |

[フリー写真素材ぱくたそ](www.pakutaso.com)

## 料金について

GitHub Actionsは無料枠（Enterprise で50,000分/月）を含む従量制。
参考: [About billing for GitHub Actions](https://help.github.com/ja/github/setting-up-and-managing-billing-and-payments-on-github/about-billing-for-github-actions)

目安として13.51MBの画像1枚で49sかかった。