コンポーネントの導入は見合わせることにしました。本サイトのブログ記事において、パフォーマンスのボトルネックとなっているのは画像ファイルです。使用するときにも、この課題に向き合わなければなりません。レスポンシブイメージを実装する方法を考えていきます。関数でレスポンシブイメージを実装する方法を解説していますが、問題点も見つかりました。ホスティングサービス側でビルドする場合には注意が必要です。ImageTools」のようなインテグレーションの導入ですが、できるだけライブラリへの依存度は下げたいので、選択肢には入れませんでした。/>)のページで以下の記述がありました。/>コンポーネントは含まれていません。/>タグを使用して、getImage()により画像やカスタムコンポーネントを生成できます。関数を使えば、レスポンシブイメージを実現できるようなので、こちらを使って実装方法を考えていきます。コンポーネントの構成」まずは、本サイトのブログ記事の構成です。以下にコンテンツコレクションとして格納しています。明示するために使用する任意の属性です。指定しない場合には、画像ファイルから自動的にサイズを取得します。コンポーネントを見ていきます。コンポーネントに渡しています。画像のキャプションを指定したときに表示されます。コンポーネントを見ていきます。</picture>)}ちょっと長いですが、このコードでは以下の処理をしています。コードの記述それでは、ひとつずつ見ていきましょう。変数に格納しています。関数を使用して、ブログ記事の画像ファイル一覧を取得しています。中身は以下のようなオブジェクトになります。ファイルで指定した画像ファイルのパスをキーに指定して、対象となる画像ファイルをインポートしています。ここでインポートした画像をもとに、レスポンシブイメージ用に変換・加工していきます。変数に画像のデフォルトデータを格納しています。対して、その値を割り当てています。形式の画像はレスポンシブイメージにする必要がありません。形式かどうかを判定しています。この真偽値は、その後のコードの条件分岐で使用します。変数にオブジェクトとして格納しています。デスクトップレイアウト用です。サポートされていません。形式も指定しています。形式がサポートされました。画像を変換・加工しています。場合には画像変換は不要なので、処理をスキップさせるためにデフォルト画像を返しています。コードを記述していきます。要素を使用したレスポンシブイメージを実装しています。属性による画像の出し分けを実装しています。ディスクリプタを指定した場合には必須で、メディア条件に応じてどのサイズの画像を表示させたいかを示すために使用します。取得した値を指定しています。(外部リンクを開く)これで、レスポンシブイメージの実装が完了しました。コードと画像ファイルが生成されます。使用して前後のパフォーマンスを測定します。点)「ウェブサイトの健康診断」とします。