2022 年 5 月、Aurora チームと Angular チームは、Angular の画像ディレクティブの共同開発を発表しました。このディレクティブは、最近 Angular v14.2 の一部としてデベロッパー プレビュー版としてリリースされました。この投稿では、新しい画像ディレクティブ NgOptimizedImage が Angular で画像の最適化をサポートする方法について説明します。
背景
画像はウェブ ユーザー エクスペリエンスの一般的な重要なコンポーネントであり、ウェブページの99.9% が 1 つ以上の画像のリクエストを生成しています。画像はページの重量を最も大きく増やす要因でもあり、1 ページあたりの中央値は 982 キロバイトです。
画像の数とサイズが増加しているため、ウェブページのパフォーマンスが低下し、ウェブに関する主な指標の指標に影響する可能性があります。2021 年には、デスクトップ ページの 79.4% で、画像が Largest Contentful Paint（LCP）要素でした。そのため、最適化された画像の追求は、多くの人にとって絶え間ない取り組みとなっています。
Aurora チームは、フレームワークの力を活用して、デベロッパーの一般的な課題に対する組み込みソリューションを提供することを信条としています。画像の最適化分野への Google の最初の進出は、Next.js 画像コンポーネントでした。このコンポーネントは、画像最適化のデベロッパー エクスペリエンス（DX）を改善することで、フレームワークを使用しているより多くのアプリのパフォーマンスが向上するかどうかをテストするためのテスト環境と見なされていました。
Next.js ユーザーの Leboncoin による最初の結果は有望でした。Leboncoin は next/image の使用を開始した後、LCP が大幅に改善されました（2.4 秒から 1.7 秒）。その後、コミュニティで next/image が採用されたことで、LCP しきい値を満たす Next.js オリジンが増加しました。すぐに、他のフレームワークでも同様の機能のリクエストが寄せられました。そのうちの 1 つが Angular です。
そのため、Aurora は Angular と Nuxt にコンサルトし、これらのフレームワークの画像コンポーネントのプロトタイプを作成しました。Nuxt 画像コンポーネントは昨年リリースされました。Angular イメージ ディレクティブ（NgOptimizedImage）がリリースされ、画像の最適化のデフォルトが Angular に設定されるようになりました。
機会
Angular は、現在デベロッパーが使用している主要な JavaScript フレームワークの 1 つです。これは、モバイルで HTTPArchive によってクロールされる5 万を超えるオリジンで使用されており、NPM での週次ダウンロード数は300 万回近くに上ります。