Astroで画像を使用する

Astroで画像を使用する方法についてメモ。

サンプルコード

画像を格納するディレクトリとして、srcディレクトリとpublicディレクトリがあります。

srcディレクトリに格納した画像は、使用時にAstroが変換や最適化、バンドルの処理を行います。
publicディレクトリに格納した画像は、変換処理などを行わずそのままビルドフォルダにコピーされるという違いがあります。
Astroでは基本的に、srcディレクトリに格納することを推奨しているようです。

srcディレクトリとpublicディレクトリにそれぞれ画像を格納して試してみます。
各ディレクトリ内にimagesディレクトリを作成して、01.jpgと02.jpgを格納します。

• src
  • images
    • 01.jpg
• public
  • images
    • 02.jpg

.astroのファイル内で、Imageコンポーネントを使って読み込んでみます。
まずはsrcディレクトリの画像です。

---
import Layout from '../../layouts/Layout.astro';
import { Image } from 'astro:assets';
import Img01 from '../../images/img01.jpg';
---

<Layout title="タイトル" description="説明文">
	<main>
		<h1>テストページ</h1>
		<Image src={Img01} alt=""/>
	</main>
</Layout>

srcディレクトリの画像を読み込む場合、最初にファイルをインポートする必要があります。

次にpublicディレクトリの画像です。

---
import Layout from '../../layouts/Layout.astro';
import { Image } from 'astro:assets';
import Img01 from '../../images/img01.jpg';
---

<Layout title="タイトル" description="説明文">
	<main>
		<h1>テストページ</h1>
		<Image src={Img01} alt=""/>
		<Image src="/images/img02.jpg" width="800" height="533" alt=""/>
	</main>
</Layout>

publicディレクトリの画像の場合、最初のファイルのインポートは不要です。
画像パスはpublicディレクトリからのパスになりますが、相対パスではなくルートパスでの指定が必要なようです。
Astroの設定ファイルでbaseの変更を行っている場合、その変更を踏まえたパスにする必要があります。

また、publicディレクトリの画像の場合はwidth属性やheight属性の指定が必須のようで、設定していないと以下のようなエラーが表示されました。

Missing width and height attributes for /images/img02.jpg. When using remote images, both dimensions are required in order to avoid CLS.

あと、srcディレクトリとpublicディレクトリ両方の画像ともalt属性の指定が必須で、未設定の場合以下のようなエラーになります。(設定した上で値が空の場合はOK)

Image missing "alt" property. "alt" text is required to describe important images on the page.

ビルド後は以下のような出力になりました。

<img
  src="/_astro/img01.BLiWM1Vi_ZWoLgv.webp"
  alt=""
  width="800"
  height="533"
  loading="lazy"
  decoding="async"
>
<img
  src="/images/img02.jpg"
  alt=""
  width="800"
  height="533"
  loading="lazy"
  decoding="async"
>

Imageで画像を表示するデモページ

前の例ではImageコンポーネントを使って読み込みましたが、imgタグでも使用できます。

---
import Layout from '../../layouts/Layout.astro';
import Img01 from '../../images/img01.jpg';
---

<Layout title="タイトル" description="説明文">
	<main>
		<h1>テストページ</h1>
		<img src={Img01.src} alt=""/>
		<img src="/images/img02.jpg" alt=""/>
	</main>
</Layout>

この場合、srcディレクトリの画像の処理はスキップされるようです。
ビルド後は以下のような出力になりました。

<img src="/_astro/img01.BLiWM1Vi.jpg" alt="">
<img src="/images/img02.jpg" alt="">

imgで画像を表示するデモページ

Imageコンポーネントはformatで画像形式、qualityで画像品質を指定できます。

---
import Layout from '../../layouts/Layout.astro';
import { Image } from 'astro:assets';
import Img01 from '../../images/img01.jpg';
---

<Layout title="タイトル" description="説明文">
	<main>
		<h1>テストページ</h1>
		<Image
			src={Img01}
			alt=""
			format="avif"
			quality="100"
		/>
		<Image
			src={Img01}
			alt=""
			format="avif"
			quality="20"
		/>
	</main>
</Layout>

ビルド後は以下のような出力になりました。

<img
  src="/_astro/img01.BLiWM1Vi_IsTfh.avif"
  alt=""
  width="800"
  height="533"
  loading="lazy"
  decoding="async"
>
<img
  src="/_astro/img01.BLiWM1Vi_ydzcA.avif"
  alt=""
  width="800"
  height="533"
  loading="lazy"
  decoding="async"
>

formatとqualityを設定するデモページ

Imageコンポーネントと同じように、Pictureコンポーネントも用意されています。

---
import Layout from '../../layouts/Layout.astro';
import { Picture } from 'astro:assets';
import Img01 from '../../images/img01.jpg';
---

<Layout title="タイトル" description="説明文">
	<main>
		<h1>テストページ</h1>
		<Picture
			src={Img01}
			alt=""
		/>
	</main>
</Layout>

ビルド後は以下のような出力になりました。

<picture>
  <source srcset="/_astro/img01.BLiWM1Vi_ZWoLgv.webp" type="image/webp">
  <img
    src="/_astro/img01.BLiWM1Vi_ZDlLIy.jpg"
    alt=""
    width="800"
    height="533"
    loading="lazy"
    decoding="async"
  >
</picture>

Pictureで画像を表示するデモページ

formats属性を指定することで、source要素で追加する画像形式を設定できます。

---
import Layout from '../../layouts/Layout.astro';
import { Picture } from 'astro:assets';
import Img01 from '../../images/img01.jpg';
---

<Layout title="タイトル" description="説明文">
	<main>
		<h1>テストページ</h1>
		<Picture
			src={Img01}
			alt=""
			formats={['avif', 'webp']}
		/>
	</main>
</Layout>

ビルド後は以下のような出力になりました。

<picture>
  <source srcset="/_astro/img01.BLiWM1Vi_Zky7xo.avif" type="image/avif">
  <source srcset="/_astro/img01.BLiWM1Vi_ZWoLgv.webp" type="image/webp">
  <img
    src="/_astro/img01.BLiWM1Vi_ZDlLIy.jpg"
    alt=""
    width="800"
    height="533"
    loading="lazy"
    decoding="async"
  >
</picture>

formatsを設定するデモページ