kimizuy

kimizuy blog

Github Actions で画像最適化を自動化する

#github
published at

またも GitHub Actions。今回はプルリクエスト作成時に自動で画像の最適化・圧縮する方法をまとめる。かなりお手軽。

Github Actions の設定ファイルを追加する

プロジェクトのルートに以下の内容のファイルを追加する。

./github/workflows/optimize-images.yml

name: Optimize 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 }}

また、画像の種類ごとに圧縮率をカスタマイズできる(デフォルト値はいずれも 80)

image-quality-settings

~~~
- name: Compress Images
  uses: calibreapp/image-actions@master
  with:
    githubToken: ${{ secrets.GITHUB_TOKEN }}
    jpegQuality: '80'
    jpegProgressive: false
    pngQuality: '80'
    webpQuality: '80'
    ignorePaths: 'node_modules/**,build'
    # No spaces allowed

jpegProgressive は jpeg ファイルをプログレッシブ形式に変換するかどうか。プログレッシブ形式についてはこちら。jpeg はベースラインとプログレッシブの二種類あるのか。へぇー。

実際にプルリクエストを作成する

master に対してプルリクエストを作成すると GitHub Action が実行され少し待って以下のような結果が表示される。

注意点として、このアクションが実行されるとプルリクエストに最適化された画像が再度コミットされること。master ← dev のようなプルリクエストの場合、dev ブランチで差分が生じるので混乱しないようにしたい。

参考

calibreapp/image-actions

Optimize Images with a GitHub Action

指摘や不明点があれば筆者のTwitterまでおねがいします。