GitHub Actions による自動画像圧縮

概要

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

使用するAction

Image Actions

GitHub: https://github.com/marketplace/actions/image-actions
作者: https://calibreapp.com/
圧縮アルゴリズム: mozjpeg, 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 下に配置する。

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。

calibreapp-image-actions.yml

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

除外ディレクトリの設定

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

calibreapp-image-actions.yml

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

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

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

calibreapp-image-actions.yml

name: Compress images
on:
  pull_request:
    paths:
      - '**.jpg'
      - '**.png'
      - '**.webp'

使い方

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

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

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

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

圧縮前後の比較

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

圧縮前	圧縮後
332.34 KB	168.37 KB(-49.3%)

圧縮前	圧縮後
204.70 KB	147.57 KB(-27.9%)

フリー写真素材ぱくたそ

料金について

GitHub Actionsは無料枠（Enterprise で50,000分/月）を含む従量制。
参考: About billing for GitHub Actions

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