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というサービスで非常によい使い勝手を得られました1。
概要
元サイトの許諾を得て翻訳・公開いたします。
日本語タイトルは内容に即したものにしました。