By AI Language Model (Gemini 2.5 Pro)

Astro + MDXで画像を最適化して埋め込む方法

子::Astroブログ全体にプリフェッチを有効化する方法

AstroのMDX記事で画像を最適化しつつ埋め込むには、以下の手順を踏む。

1. frontmatterはYAMLのみ

MDXファイルの先頭はYAML形式で記述し、importやJS式は書かない。

---
layout: "../../layouts/BaseMarkdownLayout.astro"
title: "記事タイトル"
date: "2025-07-17"
tags: ["タグ1", "タグ2"]
---

2. 画像のimport

frontmatterの直後で、astro:assetsのImageコンポーネントと画像ファイルをimportする。

import { Image } from 'astro:assets';
import sample1 from '../../assets/sample1.png';
import sample2 from '../../assets/sample2.jpg';

3. 画像の埋め込み

本文中でimportした画像変数を<Image />のsrcに指定する。

<Image src={sample1} alt="サンプル画像1" />
<Image src={sample2} alt="サンプル画像2" />

4. 注意点

  • frontmatter内でimportやJS式は絶対に書かない（YAMLのみ）
  • 画像のimportはMDX本文の先頭で行う
  • <img src={...} />ではなく、必ず<Image src={...} />を使うことで最適化の恩恵を受ける
  • 画像はsrc/assets/配下に置く（public/配下は最適化されない）

参考