大約一年前，Chrome Aurora 團隊推出了 Angular NgOptimizedImage 指令。根據網站體驗核心指標指標測量的結果，這個指令主要著重於改善效能。它將常見的圖片最佳化和最佳做法整合至面向使用者的 API，而這個 API 的複雜度與標準 <img> 元素相差無幾。
在 2023 年，我們為directive增添了新功能。這篇文章將說明這些新功能中最主要的部分，並著重說明我們選擇將各項功能列為優先的原因，以及這些功能如何有助於改善 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 屬性是最有效的圖片最佳化技巧之一，可確保任何存取應用程式的裝置都能下載適當大小的圖片。在應用程式中使用 srcset 可避免浪費頻寬，並大幅改善 LCP Core Web Vital。
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 應用程式。如今，即使您未使用 NgOptimizedImage，如果我們偵測到會影響效能的錯誤圖片模式 (例如延遲載入 LCP 圖片，或下載的檔案太大)，也會通知您。
圖片效能對所有應用程式都很重要，我們很高興能持續建構防護機制，協助避免 Angular 應用程式發生常見錯誤。
展望未來
我們正努力開發 NgOptimizedImage 的下一組功能。雖然圖片效能仍是我們的主要關注重點，但我們也想新增可改善開發人員體驗的功能，確保 NgOptimizedImage 在 Angular 應用程式中加入圖片時，仍是吸引人的選項。
我們優先考量的功能之一是圖片預留位置。這些通常用於讓圖片在網頁應用程式中載入時看起來更美觀，但如果實作方式不正確，可能會影響效能。我們希望在 NgOptimizedImage 中建構以效能為優先的圖片預留位置系統。請密切關注我們的網誌，掌握後續公告！