Astro画像最適化の基本｜表示速度を落とさずMarkdown記事へ載せる

Astroの記事へ画像を追加すると内容は伝わりやすくなりますが、元画像をそのまま配信するとページが重くなります。対策の要点は、表示幅に合う画像を生成し、必要なタイミングで読み込み、変更前後を同じ条件で測ることです。

この記事では、Astroの静的サイトを前提に、画像が遅さの原因かを見分けてからMarkdown記事へ載せるまでを順に進めます。記事サイト全体の構成がまだ決まっていない場合は、先にAstroでMarkdown記事サイトを作る最小構成を確認してください。

遅い画像の見分け方

体感だけで画像を原因と決めず、ブラウザの開発者ツールで対象ページを開き、Network欄を画像に絞ります。再読み込みして、各画像の転送量と読み込み順を確認してください。本文で小さく表示する画像なのに元データが大きい、画面外の画像まで最初から取得される、といった状態なら改善余地があります。

変更前に、ページ全体と最大画像の転送量、初期表示で取得した画像数、PageSpeed Insightsのモバイル結果を記録します。PageSpeed Insightsは、Lighthouseによる制御環境のラボデータと、利用可能な場合はChrome UX Reportによる実ユーザーデータを表示します。前者は原因調査、後者は実際の体験の把握に向きます。点数だけでなく、画像に関係する診断とNetwork欄の実データを組み合わせて判断してください。値は計測条件で変わるため、同じURLを近い条件で比較します。

publicとsrcの置き場所を選ぶ

Astroでは置き場所によって処理が変わります。公式は、可能な限りローカル画像をsrc/に置くことを推奨しています。src/の画像はAstroが変換、最適化、バンドルできますが、public/のファイルは未処理のままビルド先へコピーされます。

置き場所	Astroの処理	寸法の扱い	主な用途
src/assets/	変換・最適化・バンドルの対象	ローカル画像から推定できる	記事の写真、図、アイキャッチ
public/	未処理のまま配信	<Image />ではwidthとheightが必要	faviconなど、変換せず直接URLで配る画像
許可済みの外部URL	設定に応じて最適化できる	指定するかinferSizeで取得する	管理中のCMS、画像CDN
未許可の外部URL	最適化されない	原則として寸法を指定する	管理外の配信元を一時的に参照する場合

記事画像はsrc/assets/articles/astro-image/sample.jpgのように記事単位でまとめると、差し替え時に追いやすくなります。外部画像を最適化する場合は、astro.config.mjsのimage.domainsまたはimage.remotePatternsで管理中の配信元だけを許可します。

Imageコンポーネントを使う

.astroファイルでは、通常の<img>よりastro:assetsの<Image />を先に検討します。ローカル画像をimportすると、Astroは元の寸法を読み取り、最適化した画像とwidth、height、loadingなどを含むHTMLを生成します。

---
import { Image } from 'astro:assets';
import articleImage from '../assets/articles/astro-image/sample.jpg';
---

<Image
  src={articleImage}
  alt="画像最適化前後の転送量を比較した開発者ツール画面"
/>

altは必須です。画像が伝える内容を短く書き、装飾だけならalt=""にします。図表の情報が複雑な場合は、要点を本文にも書きます。public/の画像は最適化されず、未許可の外部画像も変換されません。ローカル画像の自動処理を期待するなら、src/へ置いてimportできているかを確認します。画像の寸法指定は、読み込み中の表示ずれを抑えるうえでも重要です。表示ずれが残る場合は、Core Web VitalsのCLSを直す手順も確認してください。

幅と形式を指定する

元画像が表示枠より大きいなら、すべての端末へ元の大きさを配る必要はありません。layout="constrained"を指定すると、指定幅を上限にコンテナへ合わせて縮む画像を作れます。Astro 5.10以降のlayoutでは、レイアウトに応じたsrcsetとsizesも生成されます。

<Image
  src={articleImage}
  alt="画像最適化前後の転送量比較"
  width={960}
  layout="constrained"
  format="webp"
  quality="mid"
/>

形式を指定しない場合、<Image />は既定でWebPを生成します。qualityにはlow、mid、high、maxなどを指定できますが、高品質が常に最適とは限りません。写真と細い文字を含む画面キャプチャでは劣化の見え方が違うため、実際の表示幅で確認します。複数形式とフォールバックが必要なら<Picture />を使い、生成ファイルが増える点も検査してください。

主要オプションの早見表

選択肢	生成されるもの・挙動	選ぶ目安
layout="constrained"	コンテナに合わせて縮小し、指定寸法を超えて拡大しない。srcsetとsizesも生成する	本文画像の第一候補
layout="full-width"	アスペクト比を保ち、コンテナ幅に合わせる	横幅いっぱいのヒーロー画像
layout="fixed"	指定寸法を維持し、高密度画面向けのsrcsetを生成する	小さなアイコンなど固定寸法の画像
layout="none"	レスポンシブ用のsrcsetとsizesを自動生成しない	自分で属性とCSSを管理する場合
quality="low"〜"max"	形式間で正規化された4段階の品質プリセットを使う	実表示で画質と転送量を比較して決める
priority	loading="eager"、decoding="sync"、fetchpriority="high"を設定する	最初の画面で重要な画像に限定する

layoutとpriorityはAstro 5.10.0で追加されました。それより前のバージョンを使っている場合は、導入済みのAstroの公式リファレンスを確認し、対応する属性を個別に指定してください。

遅延読み込みを使い分ける

Astroの<Image />が生成する画像は、通常loading="lazy"とdecoding="async"を持ちます。画面外の画像を遅れて読み込めるため、記事の途中や末尾にある画像と相性がよい設定です。

ただし、最初の画面で主役になる画像まで遅延させると、その画像の表示開始が遅れる場合があります。Astro 5.10以降では、優先表示したい<Image />または<Picture />へpriorityを付けると、loading="eager"、decoding="sync"、fetchpriority="high"が設定されます。

<Image
  src={articleImage}
  alt="Astro画像最適化の手順を示す図"
  width={960}
  layout="constrained"
  priority
/>

priorityは、記事冒頭の主要画像など必要な1枚を候補にします。全画像へ付けると優先度の意味が薄れます。通常の<img>を使う場合も、画面外ならloading="lazy"、最初に必要ならloading="eager"を使い分け、widthとheightも指定します。

Markdown記事で扱う方法

通常の.md記事では標準のMarkdown記法を使えます。画像をsrc/内へ置き、記事からの相対パスで参照すると、Astroがローカル画像を処理・最適化します。

![開発者ツールで画像の転送量を確認している画面](../../assets/articles/astro-image/network-panel.jpg)

public/の画像はルート相対パスで参照できますが、最適化対象にはなりません。

![サイト共通の説明画像](/images/site-guide.png)

Markdownでも、代替テキストを書き、生成HTMLで寸法と画像URLを確認します。サイト全体でレスポンシブ画像を有効にすると、Markdown記法のローカル画像や許可済み外部画像にも適用できます。画像ごとにqualityやpriorityを変える必要がある場合だけ、.astroコンポーネントかMDXを検討してください。配信構成はAstroをCloudflare Pagesへデプロイする手順でも確認できます。

画質と表示速度を実測する

変更後は、生成物とブラウザ表示を次の順で検査します。

1. ビルド後のHTMLにwidth、height、srcset、sizes、loadingが意図どおり入ったか見る
2. Network欄で画像URL、形式、転送量、読み込み順を変更前と比較する
3. PCと狭い画面で、ぼやけ、文字つぶれ、不要な切り抜きがないか見る
4. PageSpeed Insightsのモバイル診断を同じURLで再測定する
5. 画像を追加した記事だけでなく、一覧や関連記事カードも確認する

合格基準はスコアだけではありません。転送量が減ったこと、主要画像が適切なタイミングで表示されること、画質が用途に足りること、表示領域が大きくずれないことを確認します。悪化したら、幅、形式、品質、遅延読み込みを1項目ずつ戻して原因を絞ります。

よくある質問

Astroの画像はpublic/とsrc/assets/のどちらに置くべきですか？

記事画像は、Astroが変換・最適化できるsrc/assets/を基本にします。ファイルを加工せず同じURLで配る必要がある場合だけpublic/を選ぶと、役割を分けやすくなります。

Markdownの画像も自動でWebPになりますか？

src/内のローカル画像を標準のMarkdown記法で参照すると、Astroの画像処理対象になります。既定の出力形式はWebPですが、サイトの設定やAstroのバージョンも生成結果に影響するため、ビルド後のHTMLと画像URLで確認してください。public/の画像は最適化されません。

画像の推奨幅は何pxですか？

すべての記事に共通する絶対値はありません。本文カラムの最大表示幅を基準にし、高密度画面も考慮して生成候補を用意します。まず本文画像の上限をwidth={960}前後から試し、実際のCSS、画質、転送量を見て調整してください。

すべての画像にloading="lazy"を付けてもよいですか？

記事途中の画面外画像には向きますが、最初の画面で主要な画像まで遅延させると表示開始が遅れる場合があります。主要画像はpriorityまたはloading="eager"を検討し、それ以外は遅延読み込みに分けます。

PageSpeed Insightsが改善すれば作業完了ですか？

スコアだけでは判断できません。Lighthouseのラボデータ、実ユーザーデータが表示される場合はその傾向、Network欄の転送量、PC・モバイルの見た目を合わせて確認します。記事更新後のリンク切れも気になる場合は、Astroでリンクチェックを自動化する方法を参照してください。

確認した一次情報

以下は2026年7月24日に確認した公式情報です。Astroのバージョン更新で属性や既定値が変わる可能性があるため、公開前にも再確認してください。

• Astro公式「Images」: https://docs.astro.build/en/guides/images/
• Astro公式「Image and Assets API Reference」: https://docs.astro.build/en/reference/modules/astro-assets/
• Google公式「About PageSpeed Insights」: https://developers.google.com/speed/docs/insights/v5/about
• Google web.dev「Browser-level image lazy loading for the web」: https://web.dev/articles/browser-level-image-lazy-loading
• W3C WAI「An alt Decision Tree」: https://www.w3.org/WAI/tutorials/images/decision-tree/