Astro で画像を扱う際の最適解を見つけたい

Astro プロジェクトにおける画像の配置場所

ローカル画像 or リモート画像

→ ローカル画像

claude にローカル画像 or リモート画像か聞いてみた

静的なコンテンツが多く画像の更新頻度は高くないため。

ローカルに画像を保存するとしてどのディレクトリに保存しておくか

src/ or public/

→ src/

ローカル画像は、Astroが変換、最適化、バンドルできるように、可能な限りsrc/に保存することをおすすめします。/publicディレクトリのファイルは、常にそのままビルドフォルダにコピーされ、処理されることはありません。画像に対する処理を避けたい場合や、画像へのリンクを直接公開したい場合は、画像をpublic/フォルダに保存します。（一部省略）

→ 画像に対する処理はして欲しいのと、リンクを直接公開したいユースケースはないため src/ に保存する

https://docs.astro.build/ja/guides/images/#srcとpublic

画像をコード内で扱う時の方針

• PC画面とSP画面の最適な画像サイズ・容量が違ってくる → <Picture />
  • PC：300kb以内
  • SP：50kb以内
• 画像形式（avif or webp）→ <Picture />
• LCP → 画像をプリロードする
• CLS → LCPが改善されたらCLSも改善されるのでは？

Github Actions 上で最適化された画像をキャッシュし、ビルド時間を短縮する

npm run build （astro check && astro build）を実行する際に、<Picture /> や <Image /> を使用している画像は最適化される。

この画像の最適化処理は、avif や webp などの複数のフォーマットを生成するようにしていたり、複数のサイズで生成されるようにしておくとその分ビルド時間が長くなる。

そのためキャッシュをして毎回の最適化処理の時間を短縮しなければならない。実際、Github Actions のビルド時間が5~6分になってしまった。

今回は build job の記述で以下のようにキャッシュの記述を追加した

  build:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v4
      - name: setup node
        uses: actions/setup-node@v4
        with:
          node-version-file: './package.json'
      # キャッシュ設定を追加
      - name: Cache Astro assets
        uses: actions/cache@v4
        with:
          path: |
            node_modules
            node_modules/.astro/assets
          key: ${{ runner.OS }}-node-astro-assets-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-node-astro-assets-
      - name: install
        run: npm install
      - name: build
        run: npm run build

詰まっていた点としては、npm install を元々 npm ci としており、node_modules を毎回削除してしまっていたため、astro のビルド成果物をキャッシュするディレクトリ node_modules/.astro/assetsも削除してしまっており、キャッシュが作成されなかったと言うことがあった