はじめに
Astro プロジェクトで astro:assets の <Image> を使ってビルドすると、src 配下の PNG や JPEG が、出力ディレクトリでは WebP（.webp） として配信されることがあります。ここでは、その仕組みをコードベースと Astro の実装前提で整理します。
前提として、この説明は Astro 6 系 および sharp を依存に含めている構成（本ブログテンプレートに近い形）を想定しています。細部はバージョンで変わるため、確かめたいときは 公式: Images を参照してください。
仕組みの要点
-
<Image>（およびgetImage）はビルド時に画像を再エンコードする
Content Collection のimage()で解決したローカル画像や、src/assetsから import した画像など、アセットとして解決されたsrcを渡した場合に対象になります。 -
formatを props で指定しないと、Astro が既定の出力形式を使う
画像サービスの検証処理でformatが空のとき、SVG 以外には 既定の出力フォーマット が割り当てられます。Astro 6.1 同梱のコードでは、定数DEFAULT_OUTPUT_FORMATが"webp"です（node_modules/astro/dist/assets/consts.jsおよび同services/service.jsのvalidateOptions）。 -
Sharp はその変換の実行エンジン
package.jsonにsharpがあると、Astro のデフォルト画像サービスは Sharp 経由でリサイズ・エンコードします（node_modules/astro/dist/assets/services/sharp.js）。astro.configで画像サービスを差し替えていなければ、このパイプラインがそのまま使われます。
このプロジェクトでの該当箇所
ヒーロー画像などでは、概ね次のパターンです。
layouts/BlogPost.astroおよびpages/blog/index.astroでimport { Image } from 'astro:assets'を使っているwidth/height/src/altを渡し、formatは書いていない
そのため、前述のとおり 未指定時の既定が WebP になり、dist 側にハッシュ付きの .webp が生成されやすくなります。
public の静的ファイルは別物
public/ に置いた画像は この最適化パイプラインを通りません。ファイル名・拡張子はビルド後もそのままです。WebP に「勝手に」置き換わるのは、astro:assets で処理しているアセットに限られます。
挙動を変えたいとき
- 元の形式に近い出力にしたい（例: PNG のまま）:
<Image>にformatを明示する（Image コンポーネントの props を参照）。 - 複数形式や
pictureで出し分けたい:<Picture>やformatsまわりの公式ガイドに沿って構成する。
まとめ
| 項目 | 内容 |
|---|---|
| なぜ WebP か | format 未指定時の Astro 既定出力フォーマットが webp |
| いつ変換されるか | astro:assets の <Image> / getImage など、ビルド時画像パイプラインを通したとき |
| 何が動いているか | 典型構成では Sharp |
| 変換されない例 | public/ の直置き の静的ファイル |
サムネイル用に heroImage を付ける場合は、src/assets/blog/hero/2026-04-10.png を置き、frontmatter の heroImage 行のコメント（#）を外してパスを有効化してください。