Github actions (image-actions)でWebサイトの画像を常に適切な圧縮サイズに保つ

サイトの画像を変えたりしているうちに気がつかないうちにサイズが大きい画像ファイルが混じっているってことありますよね。サイト表示のパフォーマンスが落ち、離脱に繋がりそうなので避けたいと思っていました。

最近、Githubで管理している画像を自動的に圧縮してくれるGithub actionsのcalibreapp/image-actionsというのを導入することでだいぶ改善しました。

圧縮できる画像があれば以下のようなレポートをPRにつけて、変換した画像を表示してくれます。自動的にコミットができていて、画像に変換してくれているのを確認できます。

メリット

calibreapp/image-actionsを使うことで、

既にcommitしている画像ファイルも変換してくれる
今後、画像を追加したときも自動的に変換してくれる

ということが実現でき

網羅的に対応できるので漏れがない
自動的にやってくれるので手間がかからない

というメリットがあるかと思います

既に圧縮済の画像かどうかを判別する方法として、圧縮サイズの変化が1%未満かどうかで判別しているようです。（参照した実装）

コード

公式のものをコピペしただけですが、以下のような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 }}