Rails: GitHub Actions+Calibreツールで画像を自動圧縮する（翻訳）

Rails: GitHub Actions+Calibreツールで画像を自動圧縮する（翻訳）

Railsアプリケーションでダウンロードされるページサイズの大部分を占めているのは、たいていの場合、画像です。

画像フォーマットの多くは、（非可逆圧縮と可逆圧縮のどちらについても）表示の劣化を感じさせずに圧縮可能なので、表示が劣化する手前の段階まで最適化するのが合理的です。

🔗 画像圧縮用のGitHub Actionsを作成しよう

GitHubリポジトリに以下のyamlファイルを追加する。

# .github/workflows/compress-images.yml

name: Optimize Images

on:
  pull_request:
    paths:
      - "**.jpg"
      - "**.jpeg"
      - "**.png"
      - "**.webp"

jobs:
  build:
    if: github.event.pull_request.head.repo.full_name == github.repository

    name: calibreapp/image-actions
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3

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

🔗 そうする理由

画像サイズが小さければ小さいほど、ユーザーによるファイルダウンロードが高速になります。これはひとえにCalibreの凄腕チームが提供するツールのおかげであり、一度設定すれば後は何も気にせずに済みます。

このセットアップはRailsアプリケーションに限らず、あらゆるリポジトリで動作します。私の場合、Jekyllサイトでこのセットアップを使っています。

🔗 そうしない理由があるとすれば

ユーザーのパフォーマンスが無料で改善されるのがお気に召しませんか？

いえいえ、ほんの冗談です。

画像の適切な初期フォーマットが選ばれるようにするには、引き続き人間が介入する必要があります。画像の種別ごとに、それに適したファイルフォーマットを選びたいものです。たとえば、写真画像であればJPGやWEBPの方が圧縮率が高くなります。

ユーザーによる画像ダウンロードが重たくならないようにするには、画像ファイルの寸法を変更して（つまりファイルサイズを縮小して）、レスポンシブ画像による複数サイズの画像配信を行うのがベストです（<picture>要素、<img>タグのsrcset属性、または両方を利用）。

ただしこのソリューションを適用できるのは、アプリケーションやサイトが最初から持っている画像アセットのみである点にご注意ください。ユーザーがアップロードした画像のサイズ変更や圧縮には、別の方法を使う必要があります。私たちのCoverageBookでは、imgproxyというサービスで非常によい使い勝手を得られました¹。

関連記事

Rails: Evil Martiansが使って選び抜いた夢のgem -- 2024年度版（翻訳）