大約一年前,Chrome Aurora 團隊推出了 Angular NgOptimizedImage 指令。這項指令主要著重於改善效能,以 Core Web Vitals 指標為評估依據。它將常見的圖片最佳化和最佳做法整合至面向使用者的 API,而這個 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 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 中建立以效能為優先的圖片預留位置系統。請密切關注我們的網誌,掌握後續公告!