一年多前，Chrome Aurora 團隊推出了 Angular NgOptimizedImage 指令。根據網站體驗核心指標指標測量的結果，這個指令主要著重於改善效能。它可將常見的圖片最佳化和最佳做法，整合成面向使用者的 API，而不是像標準 <img> 元素那麼複雜。
在 2023 年，我們新增了更多指令強化功能。本文章將介紹大部分的新功能，並著重說明我們為何選擇優先推出各項功能，以及這項功能如何協助改善 Angular 應用程式的效能。
新功能
與此同時，NgOptimizedImage 有大幅改善，其中包括下列新功能。
填滿模式
透過提供 width 和 height 屬性來調整圖片大小是減少版面配置位移的重要最佳化做法，因為瀏覽器需要知道圖片的長寬比，才能節省圖片的空間。不過，調整圖片尺寸對應用程式開發人員來說是額外工作，對於部分圖片用途來說並不合理。
為解決這個問題，我們先在開發人員預覽版圖片元件後加入第一項主要功能：填滿模式。這樣一來，開發人員就能在不明確設定大小的情況下，加入圖片，且不會發生版面配置位移。
使用填滿模式時，系統會停用圖片大小大小規定，屆時圖片會自動設定樣式，以填滿所含元素。這會將圖片的顯示比例與頁面佔用的空間區分開來，讓您進一步掌控圖片融入網頁版面配置的方式。
填滿模式會使用 NgOptimizedImage，做為 background-image CSS 屬性成效較佳的替代方案。將圖片放入具有 background-image 樣式的 <div> 或其他元素，然後啟用填滿模式，如上述程式碼範例所示。使用 <div> 上的 object-fit 和 object-position CSS 屬性來控制圖片在背景的位置。
// Height and width are required
<img ngSrc="example.com" height="300" width="400">
// Unless you use fill mode!
<div style="width: 100vw; height: 50em; position: relative">
<img ngSrc="example.com" fill>
</div>
產生弧形
最有效的圖片最佳化技巧之一，就是使用 srcset 屬性，確保任何可存取應用程式的裝置都能下載適當大小的圖片。在整個應用程式中使用 srcset，可以避免您浪費頻寬，並大幅改善 LCP Core Web Vitals。
srcset 屬性的缺點是實作起來可能很麻煩。手動編寫 srcset 值是指在應用程式中為每個圖片元素新增多行標記，並為每個 srcset 設定多個自訂網址。您也必須決定一系列相當複雜的中斷點，因為中斷點可能同時代表螢幕密度和常見裝置的可視區域大小。
因此，在 NgOptimizedImage 指令中加入自動化 srcset 產生功能，是產品發布後的重要里程碑。有了這項新增功能，凡是使用 CDN 支援圖片大小調整功能的應用程式，都能將 NgOptimizedImage 指令產生的圖片完整加入可自訂的 srcset，
我們加入簡化的 API，方便您設定 sizes 屬性，確保每張圖片都能取得正確的 srcset 類型。如未加入 sizes 屬性，我們會知道圖片為固定尺寸，且應取得與密度相關的 srcset，如下所示：
<img src="www.example.com/image.png" srcset="www.example.com/image.png?w=400 1x, www.example.com/image.png?w=800 2x" >
這類 srcset 能確保圖片呈現的大小時，會將使用者裝置的像素密度列入考量。
另一方面，如果您納入 sizes 屬性，NgOptimizedImage 會產生回應式 srcSet，其中包含多種常見裝置和圖片大小的中斷點，可使用下方的預設中斷點清單：
[16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]
產生預先連線
如要改善 LCP 品質，請務必減少使用者下載 LCP 圖片的時間。在上一節中，您已瞭解 srcset 如何傳輸較小的圖片檔，但還有同樣重要的最佳化方法，就是盡早展開轉移作業。其中一個方法是使用 link rel="preconnect" 標記來快速連線至您的圖片網域。
一開始，如果您無法預先連線至 LCP 映像檔的網域，NgOptimizedImage 會顯示警告，但這並非理想的解決方案，我們只需為您解決問題。這就是 NgOptimizedImage 目前的功能，而有了自動產生預先連線功能的功能。
為支援這項功能，我們會使用靜態程式碼分析來嘗試偵測 NgOptimizedImage 載入器中的圖片網域，並自動產生這些網域的預先連線連結標記。不過，您可能還是必須使用手動預先連結連結。不過，對大部分的使用者來說，自動預先連線功能讓您可以更輕鬆地完成一項設定，降低圖片效能。
強化對自訂載入器的支援
NgOptimizedImage 的一大要素是載入器架構，可讓指令自動產生專為應用程式圖片 CDN 設計的網址。廣泛使用的 CDN 內含一組內建載入器。您也可以使用自訂載入器，將 NgOptimizedImage 與絕大多數圖片代管解決方案整合。
推出時，這些自訂載入器會受到處理範圍限制，且只能從圖片元素讀取 width 屬性。為了回應使用者的意見回饋，我們新增了可自訂的 loaderParams 資料結構，以便將任意資料從圖片元素傳送至自訂載入器。擴大之後，自訂載入器可以根據應用程式的影像基礎架構而變得簡單或複雜。
以下範例說明簡易的自訂載入器如何使用 loaderParams API，在兩個替代圖片網域之間選取：
const myCustomLoader = (config: ImageLoaderConfig) => {
if (config.loaderParams?.alternateDomain) {
return `https://alternate.domain.com/images/${config.src}`
}
return `https://primary.domain.com/images/${config.src}`;
};
如需較複雜的自訂載入器範例，請參閱 Angular 說明文件。
更多圖片效能指南
截至目前，所有新增至 Angular 的圖片效能警示都已納入 NgOptimizedImage 指令。如果您不在應用程式中使用指令，系統就不會針對圖片效能問題提供任何指引。
在 Angular 17 中，我們擴大圖片效能指南的適用範圍，納入所有 Angular 應用程式。現在，如果我們發現有圖片模式會降低效能的錯誤 (例如延遲載入 LCP 圖片，或下載的檔案過大)，Google 會通知您，即使並未使用 NgOptimizedImage，
圖像效能對於所有應用程式來說都很重要，我們很高興能夠繼續打造防護機制，避免 Angular 應用程式發生常見錯誤。
展望未來
我們已經在努力為 NgOptimizedImage 開發下一組功能。雖然圖像效能仍是我們首要考量，但我們也希望加入可提升開發人員體驗的功能，確保 NgOptimizedImage 仍然是引人入勝的選擇，將圖片納入 Angular 應用程式。
我們的優先功能之一是圖片預留位置。這類設定檔常可讓網頁應用程式在載入圖片時看起來更美觀，但如果實作方式錯誤，效能可能會降低。我們希望在 NgOptimizedImage 中建構出首重效能優先的圖片預留位置系統。敬請持續關注我們的網誌，掌握更多最新消息！