如目前所知，圖片在總傳輸大小中，是網路上最大的資產 以及每個網頁的要求數量中位數網頁的總傳輸大小約為 截至 2022 年 6 月 2 MB，僅佔整體圖片的一半。這不算是誇張 說到，圖片請求最佳化也許可帶來最大的成效最佳化。
稍後，您將瞭解回應式圖片如何演變，以便解決各種問題 (也就是嘗試放送所有事件的圖片)。 本節說明與圖片相關的主要成效指標，以及如何改善。
延遲圖片要求
此外，我們將說明如何透過多種方式確保圖片要求盡可能縮小且效率，也是最快的圖片請求
我們總是能不懈地精進因此，我想分享一下，這項異動能帶來最重大的改變
您向使用者提供圖片素材資源：loading="lazy" 屬性。
<img src="image.jpg" loading="lazy" alt="…">
這個屬性可確保圖片請求只有在與使用者可視區域接近時才會提出，並從初始時間延遲 就是載入網頁 (瀏覽器最忙碌的時間)，並從重要的轉譯路徑移除這些要求。
顧名思義，使用這項屬性能對成效產生巨大的正面影響：不超出預期範圍的圖片 系統絕不會請求使用者的檢視區，也不會在使用者原本看不到的圖片上浪費任何頻寬。
但還有一個洞見：延遲這些要求意味著不善用瀏覽器」高度最佳化處理
及早上傳圖片如果將 loading="lazy" 用於 img 元素靠近版面配置頂端的位置，
顯示在使用者的可視區域中，這些圖片對使用者來說可能會大幅減慢。
擷取優先順序
loading 屬性是較大型的網路標準範例，可讓開發人員進一步掌控網路瀏覽器的運作方式
以處理要求的優先順序
你可能會知道擷取優先順序的基本方法：
舉例來說，如果要求文件 <head> 中的外部 CSS 檔案，這類請求就視為必須阻擋轉譯，
系統會延遲 </body> 上方的外部 JavaScript 檔案，直到轉譯完成為止。如果 <img> 上的 loading 屬性值為「lazy」，
觸發相關圖片要求，直到瀏覽器決定向使用者顯示該圖片為止。否則圖片就會
比網頁上任何其他圖片一樣。
fetchpriority 屬性的作用是
開發人員精細控管資產的優先順序，藉此標記資源
「高」和「low」做為優先順序fetchpriority 的用途與 loading 類似
屬性。舉例來說，您可以在只顯示使用者互動後的圖片上使用 fetchpriority="low"
(無論圖片是否位於使用者的可視區域中)，藉此優先顯示網頁上其他位置的圖片，fetchpriority="high"
。
請注意，fetchpriority 與 loading 的差異，它並不會變更瀏覽器的行為。不會指示瀏覽器
優先載入某些資產，而不是提供資源要求的重要背景資訊。
評估圖片的影響
最佳化圖片素材資源時，相較於總轉移量，「感知」的成效通常更重要，也更難評估 大小。
網站體驗指標提供可評估且可做為行動依據的指標和指引，協助您改善使用者的並突顯出 例如網路伺服器回應時間慢、轉譯問題和互動延遲。Core Web Vitals 是這類目標的一部分，著重於雷射 計算使用者在個別網頁的直接體驗後，系統會將這些技術評估機制一併納入考量，藉此判斷使用者體驗「感覺」對使用者的「速度」。
累計版面配置轉移
累計版面配置位移 (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 屬性，且其值與圖片來源的內建大小相符，因此
只要您有確定已使用 max-width: 100% 指定 height: auto 來覆寫 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 問題發生，
空白間隔或低品質預留位置的使用者，
等候圖片資料轉移並轉譯，也不是最理想的情況。雖然您可以採取一些措施來減輕可評估的可評估和影響
對載入速度緩慢的圖片的影響，如要更快向使用者呈現完整圖片，只能縮減傳輸大小。
最大內容繪製
「Largest Contentful Paint (LCP)」用來評估在使用者可視區域中顯示最大「內容」元素所需的時間， 佔據可見網頁最大比例的內容元素。乍看之下，這似乎指標太過具體，但 元素則可做為實際 Proxy 處理，從使用者的角度而言，頁面佔據大部分顯示時間的時間點。LCP 衡量 (感知) 效能。
DOMContentLoaded 或 window.onload 事件等指標可用於判斷載入目前頁面的程序
技術上已完成，但不一定能反映網頁使用者體驗。元素轉譯作業稍有延遲
至於使用者可視區域外的部分，則會計入這兩個指標，但實際上可能不會被真人偵測到的情況。
較長的 LCP 代表使用者對網頁的第一印象 (目前可視區域內最重要的內容)，是指網頁載入速度過慢。
或損壞
LCP 擷取到的使用者認知會對使用者體驗產生直接影響。去年 Vodafone 完成的實驗 發現 LCP 提升 31% 的銷售量，不僅使業績提升 8% (單方面成效也很出色)，使用者總數中也發現 15% 成為潛在客戶的訪客人數 (「訪客成為待開發客戶率」) 增幅，使用者數量則增加 11% 或逛過購物車的使用者 (「造訪購物車率」)。
在超過 70% 的網頁上，開頭元素是初始元素的最大元素
可視區域包含圖片，可以是獨立的 <img> 元素或含有背景圖片的元素。也就是
70% 的網頁LCP 分數取決於圖片效能。不必太多想像力，就能瞭解原因為何：引人注目、引人注意
圖片和標誌幾乎會顯示在「不需捲動位置」。
建議您採取以下幾個步驟，避免 LCP 延遲：首先，切勿在「不需捲動位置」指定 loading="lazy"圖片、
因為延遲載入網頁才載入之後，可能會對 LCP 分數造成嚴重的負面影響。
第二，使用 fetchpriority="high" 可指示瀏覽器應優先轉移這張圖片，位置要放在網頁上其他位置的圖片上方。
審慎考量過這些規則後，如要提高網頁 LCP 分數，最重要的做法就是減少時間 轉移及轉譯這些圖片所需的時間為達成此目標，請讓圖片來源維持精簡且效率 在不犧牲品質的情況下，確保使用者只取得成效最佳的圖片素材資源 以便根據讀者瀏覽環境
結論
圖片素材資源是使用者耗電量最多的平台頻寬 - 轉移其他所有必要素材資源所佔用的頻寬 轉譯網頁圖片在網頁期間和之後都會帶來明顯的感知效能問題 版面配置畫面。簡而言之，圖片素材資源會遭到「損害」。
痛苦了，雖然「減少圖片，網路反而會更好」可以說是真的 也會讓使用者感到驚艷網路是網路的重要一環，您不應犧牲圖片品質 以便單單單純提升成效
在本課程的其他部分中，您將瞭解 Google 圖片素材資源採用的技術，以及這類技術 ，且不影響品質。