Astro は静的サイト生成に優れたフレームワークで、特にパフォーマンスを重視した最適化機能が特徴です。その中でも Image と Picture コンポーネントは、画像の最適化とレスポンシブ対応に不可欠なツールです。このガイドでは、両コンポーネントの使用法、パフォーマンス、SEO への影響、そしてそれぞれの詳細な使い分けについて説明します。

共通点と基礎

インポート方法

両コンポーネントは astro:assets パッケージからインポートされ、画像の最適化と管理を行います。

import { Image, Picture } from 'astro:assets';

Astro の標準機能として提供されているため、セットアップはシンプルで、プロジェクトにインストールする追加のライブラリは必要ありません。

主要な目的

両コンポーネントの主な目的は以下の通りです。

• 画像の最適化
  ファイルサイズの縮小により、ページの読み込み時間を短縮し、パフォーマンスを向上させます。
• レスポンシブ画像の提供
  異なる画面サイズに応じて適切な画像を提供します。
• 遅延読み込みのサポート
  lazy ロードにより、ページの表示速度を最適化します。

主要な属性

どちらのコンポーネントも以下のような共通の属性を使用します。

• src: 画像のソース、ローカル画像ファイルのパス、もしくはリモートの画像URLを指定します。
• alt: 画像の代替テキストを指定します。アクセシビリティのために必須です。
• width / height: 画像の幅と高さ。これを指定することで、ブラウザはレイアウトのシフトを防ぎます（CLSの低減）。
• loading: 画像の読み込みタイミングを制御します。“lazy”（遅延読み込み）か “eager”（即時読み込み）を指定できます。

Image コンポーネント

基本的な使用方法

Image コンポーネントは、単一の最適化された画像を提供するシンプルなコンポーネントです。

<Image src={myImage} alt="説明" />

特徴

• 自動サイズ設定
  ローカル画像の場合、Astro はビルド時に width と height を自動的に設定します。
  つまり、ローカルファイルを参照するときにはwidthとheightの設定は不要となります。
  ただし、ローカルでもpublic内の画像は対象とらなないので注意点しましょう。
• フォーマット変換
  必要に応じて画像フォーマットを自動的に変換します。
• 単一の画像提供
  このコンポーネントは、単一の最適化された画像を生成し、出力します。

最適化オプション

Image コンポーネントにはフォーマットや画質を指定するオプションがあります。

• format: 画像の出力フォーマットを指定できます（“webp”, “avif”, “png”, “jpeg” など）。
• quality: 出力画像の品質を設定できます（0-100の範囲で指定します）。

使用例

ローカルおよびリモートの画像を扱う場合の例を以下に示します。

<Image 
  src={importedImage} 
  alt="ローカル画像" 
  format="webp" 
  quality={80} 
/>

<Image 
  src="https://example.com/image.jpg" 
  alt="リモート画像" 
  width={800} 
  height={600} 
/>

適用範囲と制約

単一の画像を使用する場合に最適で、特に複雑なレスポンシブ対応やフォーマット切り替えの必要がない場合に向いています。フォーマット指定をしない場合は、Astro が最適な形式で画像を生成しますが、特定のニーズがある場合は手動で設定する必要があります。

Picture コンポーネント

基本的な使用方法

Picture コンポーネントは、複数の画像フォーマットや解像度を提供し、レスポンシブ対応を可能にします。

<Picture src={myImage} alt="説明" widths={[400, 800, 1200]} sizes="(max-width: 800px) 100vw, 800px" />

特徴

• 複数のフォーマット。Picture コンポーネントは、複数の画像形式（例: WebP、AVIF、JPEG など）を生成し、ブラウザが最適なフォーマットを選択します。
• 複数の解像度。デバイスや画面サイズに応じて異なる解像度の画像を提供します。
• アートディレクションのサポート。デバイスや画面サイズに応じて異なる画像を提供することができます。

追加の属性

• widths: 複数の画像幅を指定し、各解像度に適した画像を生成します。
• sizes: レスポンシブ画像のサイズ指定です。ブラウザがこのサイズを基に適切な解像度の画像を選択します。
• formats: 出力する画像フォーマットを配列で指定します。Picture コンポーネントは、指定されたフォーマットに基づいて複数の <source> 要素を生成します。

使用例

以下は、複数の画像フォーマットと解像度を使用した例です。

<Picture 
  src={myImage} 
  alt="レスポンシブ画像" 
  widths={[400, 800, 1200]} 
  sizes="(max-width: 800px) 100vw, 800px" 
  formats={['avif', 'webp', 'jpeg']} 
/>

アートディレクションとメディアクエリ

Picture コンポーネントは、アートディレクションにも利用できます。以下の例では、特定の画面サイズに応じて異なる画像が表示されます。

<Picture 
  src={desktopImage} 
  alt="レスポンシブ画像" 
  widths={[400, 800, 1200]} 
  sizes="(max-width: 800px) 100vw, 800px" 
  formats={['avif', 'webp', 'jpeg']} 
>
  <source media="(max-width: 640px)" srcset={mobileImage.src} />
</Picture>

このアプローチにより、モバイルユーザーには小さな画像、デスクトップユーザーには大きな画像が提供されます。

適用範囲と制約

複数の解像度やフォーマットを使いたい場合に最適です。フォーマットや解像度が多くなるほど、ビルド時間とストレージ使用量が増加します。

主な違い

生成される HTML

• Image: 単一の <img> タグを生成し、最適化された画像を1つ提供します。
• Picture: <picture> タグを生成し、複数の <source> 要素と1つの <img> 要素を含めます。ブラウザは最適な画像フォーマットと解像度を自動的に選択します。

フォーマットサポート

• Image: 単一フォーマットのみをサポートします。
• Picture: 複数フォーマット（例: WebP、AVIF、JPEG など）を同時に提供し、ブラウザに最適なフォーマットを選択させます。

サイズ指定

• Image: 単一サイズ（リサイズは可能）。
• Picture: 複数サイズ（widths 属性で指定）をサポートし、デバイスに応じて最適なサイズを選択します。

使用シナリオ

• Image: 単純な画像最適化に使用します。特に複雑なレスポンシブ対応やフォーマットの切り替えが必要ない場合に向いています。
• Picture: 高度なレスポンシブ対応、複数フォーマット対応、アートディレクションが必要な場合に使用します。

パフォーマンスと SEO への影響

画像最適化

両コンポーネントは画像を最適化し、ファイルサイズ

を削減することで、ページ読み込み速度を向上させます。最適化された画像は、より速く読み込まれるため、ユーザー体験が向上します。

Cumulative Layout Shift (CLS)の軽減

width と height を指定することで、ページ読み込み時に画像の位置が確保され、レイアウトが崩れることを防ぎます。これにより、CLS が軽減され、Google の Core Web Vitals において良好な評価を得ることができます。

遅延読み込み

loading="lazy" を指定することで、画面外にある画像を遅延して読み込むことができ、初期読み込みのパフォーマンスが向上します。

画像の発見可能性

SEO の観点から、適切な alt テキストを設定することで、検索エンジンが画像を理解しやすくなり、画像検索のランキングが向上します。

画像フォーマットの影響

次世代フォーマット（WebP や AVIF）を使用することで、画像サイズがさらに圧縮され、パフォーマンスが向上します。また、これによりサーバー負荷も軽減されます。

ベストプラクティス

適切な alt テキスト

常に意味のある代替テキストを設定しましょう。これにより、アクセシビリティが向上し、SEO も改善されます。

サイズ最適化

表示サイズに適した width と height を指定し、レイアウトシフトを防ぎます。また、指定することでページパフォーマンスが向上します。

フォーマット選択

次世代フォーマット（AVIF や WebP）を使用し、画像サイズを最小化しましょう。Picture コンポーネントでは、複数のフォーマットを提供することで、すべてのブラウザに対応することができます。

アートディレクション

必要に応じて <source> 要素を使用し、デバイスに適した画像を提供しましょう。特に高解像度の画像が必要な場合や、デザインの異なる画像を提供する際に有効です。

パフォーマンスを考慮した読み込み

重要でない画像には loading="lazy" を使用し、初期ページロードの速度を向上させましょう。これにより、必要なリソースが優先して読み込まれ、ユーザー体験が向上します。

注意点

ビルド時間

大量の画像や複数のフォーマットを生成する場合、ビルド時間が増加する可能性があります。これは、すべての画像の最適化処理がビルド時に行われるためです。

ストレージ使用量

複数のサイズやフォーマットの画像を生成すると、プロジェクトのストレージ使用量が増加します。適切な数のフォーマットやサイズを指定し、無駄なリソースの生成を防ぎましょう。

ブラウザ互換性

古いブラウザでは、次世代フォーマット（WebP や AVIF）をサポートしていない場合があります。そのため、フォールバック用の JPEG や PNG などのフォーマットを用意しておく必要があります。

まとめ

このガイドでは、Astro の Image および Picture コンポーネントの詳細な使用方法、パフォーマンス向上、SEO への影響、適切な実装方法について解説しました。これらのコンポーネントを適切に活用することで、ウェブサイトのパフォーマンスを最大限に引き出し、ユーザー体験を向上させることができます。

• Astroの公式ドキュメント - Images | Docs
• Astroの公式ドキュメント - Astro 3.3: Picture component | Astro