一年多前，Chrome Aurora 團隊推出了 Angular NgOptimizedImage 指令。這項指令主要著重於提升效能，依網站體驗核心指標指標衡量。此版本整合了常見的圖片最佳化和最佳做法，並納入面向使用者的 API，這比標準 <img> 元素簡單許多。
2023 年，我們增加了新功能的指令。本文將介紹這些功能中最重要的部分，並著重說明我們選擇優先處理各項功能的原因，以及這項功能如何協助改善 Angular 應用程式的效能。
新功能
隨著時間的推移，NgOptimizedImage 已大幅改善，包括以下新功能。
填滿模式
提供 width 和 height 屬性調整圖片大小是減少版面配置位移的重要最佳化做法，因為瀏覽器必須知道圖片的長寬比，才能節省圖片空間。然而，調整大小圖片對應用程式開發人員來說是額外的工作，且在部分圖片用途中並不合理。
開發人員預覽版圖片元件新增後，第一個主要功能就是協助解決這個張力：填滿模式。這個方法可讓開發人員加入未明確調整大小的圖片，也不會產生版面配置位移。
使用填滿模式時，系統會停用圖片大小規定，而圖片會自動調整樣式，填滿其所含元素。這會將圖片的顯示比例與所在網頁的空間分隔開來，方便您進一步掌控圖片符合網頁版面配置的方式。
填滿模式使用 NgOptimizedImage 做為 background-image css 屬性中成效較佳的替代方案。將圖片放在 <div> 或其他具有 background-image 樣式的元素中，然後啟用填滿模式 (如上述程式碼範例所示)。使用 <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 Vitals。
srcset 屬性的缺點是實作方式可能相當麻煩。手動撰寫 srcset 值，表示為應用程式中的每個圖片元素新增多行標記，並為每個 srcset 加入多個自訂網址。您也必須決定一組較為複雜的中斷點，因為這些中斷點分別可以代表一般裝置的螢幕密度和可視區域大小。
因此，在 NgOptimizedImage 指令中加入自動化的 srcset 產生，是推出後的主要里程碑。新增後，凡是使用 CDN 且支援圖片大小調整機制的應用程式，都能將具備完整且可自訂的 srcset 新增至 NgOptimizedImage 指令產生的每張圖片。
我們納入了簡化的 sizes 屬性設定 API，可用於確保每張圖片的 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 圖片，或者下載的檔案對網頁過大)，即使未使用 NgOptimizedImage，您也會收到通知。
圖片效能對所有應用程式而言都相當重要。我們很高興能持續開發防護機制，避免 Angular 應用程式發生的常見錯誤。
展望未來
我們已經開始努力開發 NgOptimizedImage 的下一組功能。雖然圖片效能仍是我們的核心考量，但我們也希望加入可改善開發人員體驗的功能，確保 NgOptimizedImage 仍是很有吸引力的選項，您可以在 Angular 應用程式中加入圖片。
其中一項功能是圖片預留位置。這類資料通常用於改善網頁應用程式上的圖片載入速度，但如果實作不正確，就會降低效能。我們希望在 NgOptimizedImage 中建構出效能優先的映像檔預留位置系統。敬請持續關注我們的網誌，掌握更多公告事項！