画像
Astroは、プロジェクト内に保存されている画像やリモート上にリンクされている画像、CMSやCDNに保存されている画像をサイト上で表示するために様々な手段を提供しています。
.astro
ファイル内
セクションタイトル: .astroファイル内astroでは<img>
要素を使って画像を表示でき、HTML画像属性をすべてサポートしています。
src
属性は必須で、その書式はどこに保存されているかによって変わります。
---
import rocket from '../images/rocket.svg';
---
<!-- 他サーバー上のリモート画像 -->
<img src="https://astro.build/assets/logo.png" width="25" alt="Astro">
<!-- public/assets/stars.png に保存されているローカル画像 -->
<img src="/assets/stars.png" alt="A starry night sky.">
<!-- src/images/rocket.svg に保存されているローカル画像 -->
<img src={rocket} alt="A rocketship in space."/>
Markdownファイル内
セクションタイトル: Markdownファイル内.md
ファイル内では標準的な![]()
構文や<img>
タグを記載することでpublic/
フォルダや、他サーバー上にあるリモート画像を表示できます。
もしpublic/
に画像を保存できない場合、Markdownライクな文法でインポートされたコンポーネントを結合できる.mdx
ファイルフォーマットの利用をお勧めします。AstroにMDXのサポートを追加するにはMDX インテグレーション (EN)を利用します。
# Markdownページ
<!-- public/assets/stars.png に保存されたローカル画像 -->

<img src="/assets/stars.png" alt="A starry night sky.">
<!-- 他サーバー上にあるリモート画像 -->

<img src="https://astro.build/assets/logo.png" width="25" alt="Astro">
MDXファイル内
セクションタイトル: MDXファイル内.mdx
ファイル内では標準的なMarkdown文法![]()
やJSXの<img />
タグを使ってpublic/
フォルダーやリモートサーバーの画像を表示できます。
加えて、Astroコンポーネントのようにプロジェクトのsrc/
ディレクトリに保存されている画像をインポートして利用できます。
import rocket from '../images/rocket.svg';
# MDXページ
// src/images/rocket.svgに保存されたローカル画像
<img src={rocket} alt="A rocketship in space."/>
// public/assets/stars.pngに保存されたローカル画像

<img src="/assets/stars.png" alt="A starry night sky." />
// 他サーバー上にあるリモート画像

<img src="https://astro.build/assets/logo.png" width="25" alt="Astro" />
UIフレームワークコンポーネント内
セクションタイトル: UIフレームワークコンポーネント内UIフレームコンポーネント(ReactやSvelteなど)に画像を追加する場合、そのコンポーネントのフレームワークに沿った画像の構文を利用します。
画像の保存場所
セクションタイトル: 画像の保存場所src/
セクションタイトル: src/src
に保存された画像は、コンポーネント(.astro
や.mdx
、そして他のUIフレームワーク)から利用できますが、Markdownファイルからは利用できません。
Markdownファイルを利用する必要がある場合、public/
へ配置するかCMSやCDN上の画像を利用することをお勧めします。
画像を相対ファイルパスまたはimportエイリアスを利用してコンポーネントファイル内でインポートし、画像のsrc
属性として利用できます。
---
// `src/images/`内の画像へアクセスします。
import logo from '../images/logo.png';
---
<img src={logo} width="40" alt="Astro" />
public/
セクションタイトル: public/public/
に保存された画像はコンポーネント(.astro
や.mdx
、そして他のUIフレームワーク)とMarkdownファイルからも利用できます。
しかし、/public
ディレクトリにあるファイルは処理されずにそのまま提供、コピーされます。Markdownファイル以外で画像を利用する場合はAstroが画像を変換・最適化・バンドルできるように、可能な限りローカル画像はsrc
に保存するのをお勧めします。
src
属性はpublicフォルダからの相対パスです。Markdownでは![]()
の表記を利用できます。
---
// `public/images/`内の画像へアクセスします。
---
<img src="/images/logo.png" />
Astro画像インテグレーション
セクションタイトル: Astro画像インテグレーションAstro公式の画像のインテグレーションは、最適化された画像をレンダリングするためのAstroコンポーネント<Image />
と<Picture />
を提供しています。これらのコンポーネントは全ての静的サイトと、一部のサーバーサイドレンダリングのデプロイホスト (EN)をサポートしています。
@astrojs/image
のインストール (EN)で、.astro
と.mdx
などのAstroコンポーネントを利用できるファイル内でこの2つのコンポーネントを利用できます。
<Image />
セクションタイトル: <Image />Astroの<Image />
コンポーネント (EN)は1つの画像を最適化し、幅・高さ・アスペクト比を指定できます。また特定の出力フォーマットに画像を変換できます。
このコンポーネントはディスプレイ間で一貫したサイズを維持したい画像や、画質を厳密にコントロールしたいもの(ロゴなど)に有効です。
レスポンシブ画像の場合やアートディレクションの場合は、代わりに<Picture />
コンポーネントを利用します。
src/
のローカル画像
セクションタイトル: src/のローカル画像フロントマターで画像をインポートして、<Image />
コンポーネントのsrc
属性へ直接渡します。
alt
は必須ですがその他の属性 (EN)はオプションで、指定が無ければ画像ファイルのプロパティがデフォルト値として設定されます。
リモート画像
セクションタイトル: リモート画像(必須属性: src
(EN)・alt
(EN)・format
(EN)・サイズ)
<Image />
コンポーネントのsrc
属性に完全なURLを渡し、alt
の値を含めます。
<Image />
コンポーネントはリモート画像のオリジナルのファイルフォーマットを検知できないため、リモート画像を変換するために出力するformat
(pngやavifなど)を指定する必要があります。
<Image />
コンポーネントはリモート画像のサイズを認識しないので、コンテンツレイアウトのシフトを回避するためにwidth
(EN)とheight
(EN)、またはどちらか1つのサイズとaspectRatio
(EN)を指定する必要があります。
その他の属性 (EN)はオプションです。
public/
のローカル画像
セクションタイトル: public/のローカル画像(必須属性: src
(EN)・alt
(EN)・format
(EN)・サイズ)
コンポーネントのsrc
属性に公開フォルダからの相対パスを渡し、alt
に値を含めます。
これはリモート画像として扱われ、width
(EN)とheight
(EN)の両方の属性か、またはどちらか1つのサイズとaspectRatio
(EN)属性が必須です。
画像を変換するためのformat
属性値が必要です。(pngやavifなど)
その他の属性 (EN)はオプションです。
元画像はpublic/
にある他のファイルと同じくビルドフォルダーにそのままコピーされ、Astroの画像インテグレーションは最適化された画像を返します。
---
import { Image } from '@astrojs/image/components';
import localImage from "../assets/logo.png";
const remoteImage = "https://picsum.photos/id/957/300/200.jpg";
const localAlt = "The Astro Logo";
const remoteAlt = "A low-angle view of a forest during the daytime";
---
<!-- 元画像の幅、高さ、フォーマットを維持したままの最適化されたローカル画像 -->
<Image src={localImage} alt={localAlt} />
<!-- 元画像のアスペクト比に合わせて高さが再計算されます-->
<Image src={localImage} width={300} alt={localAlt} />
<!-- リモート画像では、サイズとフォーマットの指定が必要です -->
<Image src={remoteImage} width={300} aspectRatio="1:1" format="png" alt={remoteAlt} />
<!-- 特定の幅と高さで切り取りをします -->
<Image src={localImage} width={300} height={600} alt={localAlt}/>
<Image src={remoteImage} width={544} height={184} format="png" alt={remoteAlt}/>
<!-- 特定のアスペクト比で切り取り、avifフォーマットに変換されます -->
<Image src={localImage} aspectRatio="16:9" format="avif" alt={localAlt}/>
<Image src={remoteImage} height={200} aspectRatio="16:9" format="avif" alt={remoteAlt}/>
<!-- ローカル画像のインポート文はそのままインライン化できます -->
<Image src={import('../assets/logo.png')} alt={localAlt}/>
<!-- 画像が`/public`フォルダーにある場合、`/public`からの相対パスを利用します -->
<Image src="/penguin.jpg" width="300" aspectRatio={1} format="png" alt="A happy penguin"/>
<Picture />
セクションタイトル: <Picture /> Astroの<Picture />
コンポーネント (EN)は複数の画像サイズ・フォーマット・レイアウトなど、サイト上でレスポンシブな画像を提供するために利用できます。
画面サイズや帯域幅に基づいて、画像に最適なサイズ、解像度、ファイルタイプを利用ユーザーのブラウザに任せることができます。また、メディアクエリに基づいてブラウザに従わせるルールを指定できます。
このコンポーネントは、ユーザーが様々な画面サイズで見る画像を最適化するためや、アートディレクションに最適です。
ローカル画像
セクションタイトル: ローカル画像(必須属性: src
(EN)・widths
(EN)・sizes
(EN)・alt
(EN))
画像をフロントマターにインポートして、そのディレクトリを<Picture />
コンポーネントのsrc
属性に渡します。
画像の幅と画像のガイダンスをコンポーネントへ渡す必要がありますが、その他の属性 (EN)はオプションです。
<Picture />
コンポーネントのformats
(EN)に指定がなければ、デフォルト値は元の画像のフォーマットに加えてavif
とwebp
が含まれます。
リモート画像
セクションタイトル: リモート画像(必須属性: src
(EN)・widths
(EN)・sizes
(EN)・alt
(EN)・aspectRatio
(EN))
完全なURLを<Picture />
コンポーネントのsrc
属性へ渡します。
またビルド時に正しい高さを計算できるようにリモート画像はaspectRatio
も必要になります。
画像の幅と画面サイズに関する指示をコンポーネントに与える必要がありますが、その他の属性 (EN)はオプションです。
formats
(EN)は必須ではありませんが、リモート画像の元のフォーマットが不明となりデフォルト値は含まれません。何も指定が無ければ、webp
とavif
だけが含まれます。
public/
のローカル画像
セクションタイトル: public/のローカル画像(必須属性: src
(EN)・widths
(EN)・sizes
(EN)・alt
(EN)・aspectRatio
(EN))
コンポーネントのsrc
属性にはpublicフォルダからの相対パスを渡し、alt
の値を必要とします。
画像はリモート画像として扱われるため、ビルド時に正しい高さを計算できるようにaspectRatio
の指定が必要です。
画像の幅と画面サイズに関する指示をコンポーネントに与える必要がありますが、その他の属性 (EN)はオプションです。
formats
(EN)は必須ではありませんが、public/
フォルダにある画像の元のフォーマットが不明となりデフォルト値は含まれません。何も指定が無ければ、webp
とavif
だけが含まれます。
元の画像はpublic/
にある他のファイルと同じくビルドフォルダーにそのままコピーされ、Astroの画像インテグレーションは最適化された画像を返します。
---
import { Picture } from '@astrojs/image/components';
import localImage from '../assets/logo.png';
const remoteImage = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
---
<!--複数のサイズとフォーマットが指定されたローカル画像 -->
<Picture src={localImage} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" formats={['avif', 'jpeg', 'png', 'webp']} alt="The Astro logo" />
<!-- リモート画像(アスペクト比は必須です)-->
<Picture src={remoteImage} widths={[200, 400, 800]} aspectRatio="4:3" sizes="(max-width: 800px) 100vw, 800px" alt="The Google logo" />
<!-- /publicにある画像はリモート画像として動作します -->
<Picture src="/logo.png" widths={[200, 400, 800]} aspectRatio="4:3" sizes="(max-width: 800px) 100vw, 800px" alt="The Google logo" />
<!-- インラインインポートもサポートされます -->
<Picture src={import("../assets/logo.png")} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" alt="The Astro logo" />
MDXでの利用
セクションタイトル: MDXでの利用.mdx
ファイル内では、インポートとエクスポートを通して<Image />
と<Picture />
が画像のsrc
を受け取ることができます。
import { Image, Picture } from '@astrojs/image/components';
import rocket from '../assets/rocket.png';
export const galaxy = 'https://astro.build/assets/galaxy.jpg';
<Image src={import('../assets/logo.png')} alt="Astro"/>
<Image src={rocket} width={300} alt="Spaceship approaching the moon."/>
<Picture src={rocket} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" alt="A rocket blasting off." />
<Picture src={galaxy} widths={[200, 400, 800]} aspectRatio={16/9} sizes="(max-width: 800px) 100vw, 800px" alt="Outer space." />
デフォルト値を設定する
セクションタイトル: デフォルト値を設定する現在、<Image />
と<Picture />
コンポーネントにデフォルト値を指定する方法はありません。必須属性はそれぞれのコンポーネントに設定する必要があります。
代わりの方法として、再利用できるよう他のAstroコンポーネントでこれらのコンポーネントをラッピングできます。例えば、以下のようにブログ記事画像をコンポーネントとして作成できます。
---
import { Picture } from '@astrojs/image/components';
const {src, ...attrs} = Astro.props;
---
<Picture src={src} widths={[400, 800, 1500]} sizes="(max-width: 767px) 100vw, 736px" {...attrs} />
<style>
img, picture :global(img), svg {
margin-block: 2.5rem;
border-radius: 0.75rem;
}
</style>
CMSやCDN上の画像利用
セクションタイトル: CMSやCDN上の画像利用CDNネットワーク上の画像をとAstroで利用するには、画像の完全なURLを<img>
タグやMarkdownのsrc
属性として利用します。
代わりに、もしCDNがNode.js SDKを提供している場合はプロジェクトでSDKを利用できます。例えば、CloudinaryのSDKは適切なsrc
を利用して<img>
タグを生成できます。
Astroの画像インテグレーションの<Image />
を用いた外部画像や<Picture />
コンポーネントを利用するには、リモート画像を扱うための適切なサイズとフォーマットを指定する必要があります。
Altテキスト
セクションタイトル: Altテキスト画像が誰も同じように見えるわけではないため、画像を扱う上でアクセシビリティは特に重要になります。alt
属性は画像にAltテキストによる記述を与えます。
この属性は画像インテグレーションの<Image />
と<Picture />
コンポーネントには必須です。Altテキストが指定されていない場合これらのコンポーネントはエラーを投げます。
画像が単なる飾り(ページの理解に貢献しない画像)の場合、スクリーンリーダーが画像を無視するようにalt=""
を設定します。
コミュニテーインテグレーション
セクションタイトル: コミュニテーインテグレーション公式の@astrojs/image
(EN)インテグレーションに加え、Astroプロジェクトで画像の最適化や処理を行うためのサードパーティー製のコミュニティー画像インテグレーションがいくつかあります。