Til
Astro Assets vs Public Folder
#Astro
Summary
Astroプロジェクトにおいて、静的アセットを配置する場所は主に <project>/public/ と <project>/src/assets/ の2つがあります。
これらはビルド時の挙動が大きく異なります。
src/assets/: Astro/Viteによって処理される（最適化、ハッシュ付与、バンドル）。public/: そのままルートディレクトリにコピーされる（無加工）。
Decision Matrix
迷ったときは以下の基準で選びます。
| 特徴 | src/assets/ (推奨) | public/ |
|---|---|---|
| 主な用途 | 画像 (.jpg, .png)、フォント、CSS | robots.txt、favicon.ico、OGP画像 |
| 画像最適化 | ✅ astro:assets でWebP変換・リサイズ可 | ❌ 不可（そのまま配信） |
| ファイル名 | ハッシュ化される (例: logo.1234.png) | 固定 (例: /logo.png) |
| アクセス | import して使う | URLパス (/file.png) で指定 |
| キャッシュ | 長期間キャッシュ可能 (Cache-Busting) | ブラウザキャッシュの設定依存 |
Implementation
1. src/assets/ を使う場合 (推奨)
コンポーネント内で画像を扱う場合は、基本的にこちらを使います。LCP改善やCLS防止の恩恵を受けられます。
---
// Importすることでビルドパイプラインに乗る
import { Image } from "astro:assets";
import myImage from "../assets/my_image.png";
---
<!-- 自動的に幅・高さが計算され、WebPに変換される -->
<Image src={myImage} alt="A description of my image" />2. public/ を使う場合
「ファイル名を変えたくない」場合や、「動的にパスを文字列結合したい」場合に便利です。
---
// 公開ディレクトリのパスを文字列として指定
const imageUrl = "/images/logo.png";
---
<!-- 最適化はされない。パスはそのまま出力される -->
<img src={imageUrl} alt="Logo" />Tips
- OGP画像:
public/に置くのが一般的です。SNSのクローラーはハッシュ化されたURLではなく、固定のURLを期待することが多いためです。 - 動的インポート:
src/assetsの画像でも、import.meta.globを使えば動的に読み込むことが可能です（Vol.6参照）。