画像

Astroは、プロジェクト内に保存されている画像やリモート上にリンクされている画像、CMSやCDNに保存されている画像をサイト上で表示するために様々な手段を提供しています。

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."/>

.mdファイル内では標準的な![]()構文や<img>タグを記載することでpublic/フォルダや、他サーバー上にあるリモート画像を表示できます。

もしpublic/に画像を保存できない場合、Markdownライクな文法でインポートされたコンポーネントを結合できる.mdxファイルフォーマットの利用をお勧めします。AstroにMDXのサポートを追加するにはMDX インテグレーション (EN)を利用します。

# Markdownページ

<!-- public/assets/stars.png に保存されたローカル画像 -->
![A starry night sky.](/assets/stars.png)
<img src="/assets/stars.png" alt="A starry night sky.">

<!-- 他サーバー上にあるリモート画像 -->
![Astro](https://astro.build/assets/logo.png)
<img src="https://astro.build/assets/logo.png" width="25" alt="Astro">

.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に保存されたローカル画像
![A starry night sky.](/assets/stars.png)
<img src="/assets/stars.png" alt="A starry night sky." />

// 他サーバー上にあるリモート画像
![Astro](https://astro.build/assets/logo.png)
<img src="https://astro.build/assets/logo.png" width="25" alt="Astro" />

UIフレームコンポーネント(ReactやSvelteなど)に画像を追加する場合、そのコンポーネントのフレームワークに沿った画像の構文を利用します。

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/に保存された画像はコンポーネント(.astroや.mdx、そして他のUIフレームワーク)とMarkdownファイルからも利用できます。

しかし、/publicディレクトリにあるファイルは処理されずにそのまま提供、コピーされます。Markdownファイル以外で画像を利用する場合はAstroが画像を変換・最適化・バンドルできるように、可能な限りローカル画像はsrcに保存するのをお勧めします。

src属性はpublicフォルダからの相対パスです。Markdownでは![]()の表記を利用できます。

---
// `public/images/`内の画像へアクセスします。
---
<img src="/images/logo.png" />

Astro公式の画像のインテグレーションは、最適化された画像をレンダリングするためのAstroコンポーネント<Image />と<Picture />を提供しています。これらのコンポーネントは全ての静的サイトと、一部のサーバーサイドレンダリングのデプロイホスト (EN)をサポートしています。

@astrojs/imageのインストール (EN)で、.astroと.mdxなどのAstroコンポーネントを利用できるファイル内でこの2つのコンポーネントを利用できます。

Astroの<Image />コンポーネント (EN)は1つの画像を最適化し、幅・高さ・アスペクト比を指定できます。また特定の出力フォーマットに画像を変換できます。

このコンポーネントはディスプレイ間で一貫したサイズを維持したい画像や、画質を厳密にコントロールしたいもの(ロゴなど)に有効です。

レスポンシブ画像の場合やアートディレクションの場合は、代わりに<Picture />コンポーネントを利用します。

(必須属性: src (EN)とalt (EN))

フロントマターで画像をインポートして、<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)はオプションです。

(必須属性: 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"/>

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だけが含まれます。

(必須属性: 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ファイル内では、インポートとエクスポートを通して<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>

CDNネットワーク上の画像をとAstroで利用するには、画像の完全なURLを<img>タグやMarkdownのsrc属性として利用します。

代わりに、もしCDNがNode.js SDKを提供している場合はプロジェクトでSDKを利用できます。例えば、CloudinaryのSDKは適切なsrcを利用して<img>タグを生成できます。

Astroの画像インテグレーションの<Image />を用いた外部画像や<Picture />コンポーネントを利用するには、リモート画像を扱うための適切なサイズとフォーマットを指定する必要があります。

画像が誰も同じように見えるわけではないため、画像を扱う上でアクセシビリティは特に重要になります。alt属性は画像にAltテキストによる記述を与えます。

この属性は画像インテグレーションの<Image />と<Picture />コンポーネントには必須です。Altテキストが指定されていない場合これらのコンポーネントはエラーを投げます。

画像が単なる飾り(ページの理解に貢献しない画像)の場合、スクリーンリーダーが画像を無視するようにalt=""を設定します。

公式の@astrojs/image (EN)インテグレーションに加え、Astroプロジェクトで画像の最適化や処理を行うためのサードパーティー製のコミュニティー画像インテグレーションがいくつかあります。