根據目前為止，圖片是網路上最大的資產，從傳輸總大小和每頁要求數量皆納入考量。截至 2022 年 6 月為止，平均網頁傳輸大小約為 2 MB，其中圖片僅佔了將近一半。想說，將圖片要求最佳化可能是可以進行最大的效能最佳化，這一點並無急迫性。
您稍後會說明回應式圖片如何改進，以便嘗試向所有最終活動放送一張圖片，藉此解決建立的問題。在本節中，您將探索與圖片相關的主要成效指標，以及如何改善圖片。
延遲圖片要求
如果您正在瞭解如何確保圖片要求的大小和效率，還有許多方法可以達成，則最快的圖片要求一定會是從未提出過的要求。因此，我想先說明您可以採用 loading="lazy" 屬性，向使用者提供圖片素材資源時，可以進行的哪些調整，可能會帶來最大的影響。
<img src="image.jpg" loading="lazy" alt="…">
這項屬性可確保系統只有在接近使用者的可視區域時，才會提出圖片要求，從初始頁面載入 (也就是瀏覽器最忙碌的時間)，並從關鍵轉譯路徑移除這些要求。
如同實務上的情況，使用這個屬性會對效能帶來極大的助益：無論圖片是否位於使用者的可視區域，我們一律不會要求圖片，也不會浪費使用者從未看到的圖片而浪費頻寬。
不過，請注意，延遲這些要求代表不能利用瀏覽器的超最佳化程序，盡早要求圖片。如果將 loading="lazy" 用於 img 元素朝向版面配置的頂端，因此更可能在網頁首次載入時位於使用者的可視區域，這些圖片對使用者來說速度會明顯變慢。
擷取優先順序
loading 屬性是更大的網路標準範例，可讓開發人員進一步強化網路瀏覽器的優先順序，以決定要求的優先順序。
您可能已經知道瀏覽器擷取優先順序的基本方法：舉例來說，在文件的 <head> 中，要求外部 CSS 檔案要求非常重要，這樣才能封鎖轉譯；而針對 </body> 上方的外部 JavaScript 檔案要求，系統會延後到轉譯完成為止。如果 <img> 上的 loading 屬性值為「延遲」，系統會延後相關圖片要求，直到瀏覽器判定向使用者顯示的圖片要求為止。否則，該圖片的優先順序會與網頁上的任何其他圖片相同。
fetchpriority 屬性可讓開發人員更精細地控管資產的優先順序，以便將特定資源的優先順序設為「高」和「低」。fetchpriority 的用途與 loading 屬性類似，但較為廣泛。舉例來說，您可以針對在發生使用者互動後 (無論圖片是否位於使用者的可視區域) 後顯示的圖片使用 fetchpriority="low"，以便優先顯示網頁其他位置顯示的圖片，或使用 fetchpriority="high" 優先顯示已知的圖片，一旦網頁轉譯，就會立即在可視區域中顯示。
請注意，fetchpriority 與 loading 的差別在於，它不會徹底變更瀏覽器行為。不會指示瀏覽器先載入某些素材資源，而是提供有關要求資產時做出決定的重要背景資訊。
測量圖片的影響
對圖片素材資源進行最佳化時，與單獨傳輸總大小相比，「感知」效能通常更重要，也更難評估。
網站體驗指標提供可評估、可做為行動依據的指標和指引，可協助您改善網路使用者體驗，並醒目顯示網頁伺服器回應時間緩慢、轉譯問題和互動延遲等問題。網站體驗核心指標是這些目標的子集，這些目標著重的是使用者直接瀏覽個別網頁的體驗。這是一組技術評估，可共同決定使用者「體驗」的「速度」。
累計版面配置轉移
累計版面配置位移 (CLS) 是測量視覺穩定性的指標。這項指標可用來擷取頁面載入素材資源及轉譯頁面時，內容版面配置的位移情形。因為網頁字型或圖片來源突然轉譯，或有互動元素突然從指標移開，導致長時間使用網頁的人長期使用網路，導致長時間使用網頁而失去定位。CLS 較高是最理想的原因，最糟的是使用者出錯。舉例來說，「取消」按鈕會移到原本由「確認」按鈕佔用的空間，方便使用者點選按鈕。
由於載入時間過長，且會在版面配置中佔用的空間較多，這表示圖片是導致 CLS 分數較高的常見原因。
由於新式瀏覽器近期發生的變動，所以可比您想避免因圖片而造成 CLS 分數過高。
如果您開發了前端幾年，相信熟悉 <img> 上的 width 和 height 屬性：在廣泛採用 CSS 之前，只有這些是控管圖片大小的唯一方法。
<img src="image.jpg" height="200" width="400" alt="…">
我們之所以無法使用這些屬性，目的是將樣式問題與標記分開，特別是由於回應式網頁設計，必須透過 CSS 指定尺寸的尺寸。在回應式網頁設計初期，「移除未使用的 width」和「height屬性」是常見的建議，因為我們在 CSS 中指定了值，max-width: 100% 和 height: auto就會覆寫這些設定。
<img src="image.jpg" alt="…">
img {
max-width: 100%;
height: auto;
}
依照上述範例移除 height 和 width 屬性後，瀏覽器在這種情況下，唯一需要的方法就是要求來源、剖析圖片，然後根據其內建顯示比例，在套用樣式表後根據其在版面配置中所佔的比例，顯示圖片。這個程序會在頁面算繪後執行，而新計算的高度會導致額外的版面配置位移。
自 2019 年起，我們更新了瀏覽器行為，以不同的方式處理 width 和 height 屬性。使用這些屬性的值來決定版面配置中 img 元素的固定像素大小，而非使用這些屬性的值來判斷版面配置的長寬比 (但語法相同)。新式瀏覽器會將這些值互相區隔，以便在轉譯網頁前決定 img 元素的內建顯示比例，藉此保留圖片算繪後所佔用的空間。
建議您一律在 <img> 上使用 height 和 width 屬性，並讓值與圖片來源內建函式的尺寸相符，因此請務必同時指定 height: auto 和 max-width: 100%，以覆寫 HTML 屬性的高度。
<img src="image.jpg" height="200" width="400" alt="…">
img {
max-width: 100%;
height: auto;
}
在 <img> 元素中使用 width 和 height 屬性，就能避免因圖片而產生高 CLS 分數。
值得注意的是，這種做法完全仰賴長久的瀏覽器行為，因此任何支援基本 CSS 的瀏覽器都會以往常的方式運作，但標記中的 height 和 width 屬性會由樣式覆寫。
雖然 width 和 height 屬性能為圖片保留必要的版面配置空間，藉此解決 CLS 問題，但在等待圖片傳輸並轉譯時，向使用者顯示空白的間隔或品質不佳的預留位置並非理想。雖然您可以採取一些措施來減輕圖片載入速度緩慢的可評估及感知影響，但如要更快將完整轉譯的圖片呈現給使用者，唯一的方法就是縮減傳輸大小。
最大內容繪製
「最大內容繪製」(LCP) 會評估轉譯使用者可視區域中最大「內容」元素所需的時間，也就是佔用最大顯示頁面百分比的內容元素。表面上看似過於具體的指標，但從使用者的角度來看，這個元素可做為實際轉譯網頁的大部分內容。LCP 是衡量 (感知) 效能的重要指標。
DOMContentLoaded 或 window.onload 事件等指標有助於判斷目前網頁的載入程序在技術上完成的時間，但這些指標並不一定能對應使用者網頁的體驗。系統在顯示其中一個指標時，稍微延遲轉譯使用者可視區域以外的元素，會將其納入考量，但實際上可能會無法偵測到這些資料。LCP 較長時，表示使用者第一次瀏覽的網頁 (在目前可視區域中，最重要的內容) 是指網頁速度緩慢或異常中斷。
LCP 擷取的使用者觀感會對使用者體驗產生直接影響。Vodafone 去年完成的實驗發現，LCP 提升了 31% 的銷售量 (結果本身成長了 8%)，但使用者總數發現，成為潛在客戶的訪客人數成長了 15% (「購物車訪客成為待開發客戶率」)，以及造訪率提高 11%。
在超過 70% 的網頁上，初始可視區域中最大的元素會以獨立 <img> 元素的形式或顯示圖片元素呈現。換句話說，70% 的 LCP 分數是根據圖片效能而定。看來沒有什麼想像力可以找出原因：搶眼的大型圖片和標誌通常位於「不需捲動位置」。
如要避免 LCP 延遲，可以採取幾個步驟：首先，請勿在「不需捲動位置」圖片上指定 loading="lazy"，因為如果將要求延遲到頁面轉譯完成，就可能會對 LCP 分數造成嚴重的負面影響。
第二，使用 fetchpriority="high" 可通知瀏覽器，圖片的傳輸優先順序應在網頁其他位置的上方。
記住這些規則後，如要改善網頁的 LCP 分數，最重要的方法就是減少傳輸及轉譯這些圖片所需的時間。如要達到這個目標，您必須盡可能縮減圖片來源的規模與效率 (當然不能犧牲品質)，並確保使用者只獲得最合理的圖片素材資源，能滿足他們的瀏覽情境。
結語
圖片素材資源消耗最大的使用者頻寬，意即在傳送網頁所需的其他所有素材資源時，佔用的頻寬。無論是在周圍頁面版面配置顯示期間或前後，圖片都會在感知效能方面造成重大問題。簡單來說，圖片素材資源會損害。
難以察覺，雖然「以較少圖片呈現網路效果會更好」，但光是提升效能肯定肯定會不夠，使用者也會獲得相當不利的服務。圖片是網路的重要一環，因此不應為了單憑效能而犧牲優質內容的品質。
在接下來的課程中，您將瞭解圖片素材資源採用的技術，以及在不影響品質的情況下，降低效能影響的技術。