本文首發於微信公眾號：大遷世界, 我的微信：qq449245884，我會第一時間和你分享前端行業趨勢，學習途徑等等。
更多開源作品請看 GitHub https://github.com/qq449245884/xiaozhi ，包含一線大廠面試完整考點、資料以及我的系列文章。
本節，我們來深入瞭解一下響應式圖片。
響應式影像標記可以分為兩種情況：一種情況是目標是最有效的影像，另一種是需要對瀏覽器選擇的影像源進行明確控制的情況。分別可以將它們視為描述性和規範性語法。
在本模組中，我們將學習這兩種方法。首先，介紹srcset和sizes，以及如何根據瀏覽器瞭解使用者、裝置和瀏覽情況的情況做出最佳選擇。然後使用下<picture>元素，它能根據視口大小和瀏覽器支援的影像格式等因素對源選擇進行合理控制。
描述性語法
描述性語法提供瀏覽器有關影像源及其如何使用的資訊，但最終決策留給瀏覽器。這是迄今為止更常見的情況；對於絕大多數影像，我們不會想要精細控制瀏覽器行為。瀏覽器擁有比Web開發人員更多的資訊，並且可以根據此資訊做出複雜的決策。
我信無法準確預測使用者的瀏覽上下文——關於他們的硬體、偏好和連線速度的資訊太多，無法知道。最好的情況是，我們可以做出有根據的猜測，但無法確定每個使用者如何體驗 Web。從開發人員的角度來看，響應式影像的核心用例是嚴格以目標為導向的：允許瀏覽器根據手頭擁有的資訊發出最高效的影像請求。
為了使瀏覽器能夠做出這些選擇，srcset允許我們提供潛在源列表，以填充單個<img>，而sizes則允許我們向瀏覽器提供有關如何呈現該<img>的資訊。在下一個模組中，我們再來學習如何使用這些內容。
規定性語法
透過規定性語法，你告訴瀏覽器應該做什麼--根據你定義的特定標準選擇什麼資源。雖然這種用例並不像 "只需載入最有效的資產來渲染這張圖片 "那樣常見，但它允許我們向瀏覽器提供使用說明，以說明它在傳輸資產之前所沒有的資訊，比如源的內容或其格式。
雖然srcset和 sizes為你提供了一個語法，用於向使用者的瀏覽器傳遞資訊，並允許它對影像源做出決定，但有時你需要明確控制哪個原始檔在什麼時候被呈現。例如，你可能想根據不同的設計處理，在不同的佈局斷點上顯示不同長寬比的同一影像內容的版本，或者確保只有支援特定編碼的瀏覽器才能收到特定的來源。
在這些情況下，你需要明確地控制哪個源被顯示，以及何時顯示。這些都是srcset和size在設計上不能給我們的保證。為了獲得這種控制，我們需要使用<picture>元素。
程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
原文：https://web.dev/learn/images/...
交流
有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。
