← Back to Home

Markdown画像のテスト

このブログ記事は、Astro Content Collections 内での ローカル画像添付 機能を検証するためのものです。

記事と同じ階層からの画像読み込み

フロントマターの heroImage に指定されている画像（この記事の上部に表示されている画像）は、この記事 (index.md) と同じディレクトリ内に置かれた ./hero.jpg を参照しています。

サブディレクトリからの画像読み込み

記事が長くなり画像が増えた場合、images/ などのサブディレクトリに画像を配置することが推奨されます。以下の画像は、相対パス ./images/content.jpg で読み込んでいます。

画像最適化の確認

Astroの機能 (astro:assets) によって、上記の画像のHTMLタグ（<img>）には自動で以下の処理が行われます：

1. 幅・高さ (width / height) の自動付与（CLS: Cumulative Layout Shift の防止）
2. loading="lazy" の付与（画面外の画像の遅延読み込み）
3. decoding="async" の付与（非同期デコードによるレンダリングブロック回避）
4. ファイル名にハッシュ値が付与されキャッシュ効率を向上

開発者ツールの Elements タブで <img> タグのコードを確認してみてください。

絶対パス・外部URLとの違い

このプロジェクトの独自ルール（remark-local-image-strict プラグイン）により、Markdown内の画像への 絶対パス（/ 始まり）や外部URL（http... 始まり）はビルド時にエラー になります。

これにより、すべての画像がプロジェクトのリポジトリ内で管理され、Astroの高度な画像最適化の恩恵を受けられることが保証されます。