「回應式圖片」標記可分為兩種：情境。這類標記的目標是最有效率的圖片，以及在需要明確控制瀏覽器選取的圖片來源的情況下。您可以分別將這兩者視為「描述性」和「描述性」語法。
在本單元中，您將瞭解這兩種方式。首先，我們會說明 srcset 和 sizes，以及如何根據對於使用者、裝置和瀏覽情況的瞭解，協助瀏覽器做出最佳選擇。接著，您會看見 <picture> 元素，可根據可視區域大小和瀏覽器支援圖片格式等因素，明確控制來源選項。
描述性語法
描述性的語法可將圖片來源的相關資訊提供給瀏覽器，以及圖片來源的使用方式，但最終會讓瀏覽器做出決策。目前這是較常見的情況；對於絕大多數圖片，您都「不想」精細控管瀏覽器行為。與網頁程式開發人員相比，瀏覽器能夠取得更多資訊，而且可以根據這項資訊做出複雜的決策。您無法準確預測使用者的瀏覽情境，對於使用者的硬體、偏好和連線速度，這是您無法瞭解的。最好能夠讓您做出明智的猜測，但不確定不同使用者在網路上的體驗。從開發人員的角度來看，回應式圖片的主要用途僅限於目標：允許瀏覽器根據瀏覽器取得的資訊，盡可能提出最有效率的圖片要求。
為了讓瀏覽器做出這些選擇，srcset 可讓您為瀏覽器提供填入單一 <img> 的可能來源清單，而 sizes 則可讓您向瀏覽器提供 <img> 算繪方式的相關資訊。您將在下一個單元中瞭解如何使用這些選項。
描述性語法
使用指示性語法後，瀏覽器就能根據您指定的條件，決定要採取哪些動作，也就是要選取哪些來源。雖然這種使用案例並不常見，「只是載入最有效率的素材資源以顯示這張圖片」，但可讓我們為瀏覽器提供使用指示，藉此在資產轉移前沒有的資訊，例如來源內容或格式。
雖然 srcset 和 sizes 提供透過語法將資訊傳遞到使用者的瀏覽器，並允許該方法決定圖片來源，但有時候，您還是需要明確控制顯示哪個來源檔案和顯示的時間。舉例來說，您可能想要根據各個版面配置中斷點的不同設計處理方式，顯示具有不同顯示比例的相同圖片內容版本，或是確保只有支援特定編碼的瀏覽器可以接收特定來源。
在這類情況下，您需要明確控制要顯示的來源與顯示時機。我們確信 srcset 和 sizes 無法根據設計做出上述要求。如要取得該控制項，我們必須使用 <picture> 元素。