回應式圖片

「回應式圖片」標記可分為兩種:情境。這類標記的目標是最有效率的圖片,以及在需要明確控制瀏覽器選取的圖片來源的情況下。您可以分別將這兩者視為「描述性」和「描述性」語法。

在本單元中,您將瞭解這兩種方式。首先,我們會說明 srcsetsizes,以及如何根據對於使用者、裝置和瀏覽情況的瞭解,協助瀏覽器做出最佳選擇。接著,您會看見 <picture> 元素,可根據可視區域大小和瀏覽器支援圖片格式等因素,明確控制來源選項。

描述性的語法可將圖片來源的相關資訊提供給瀏覽器,以及圖片來源的使用方式,但最終會讓瀏覽器做出決策。目前這是較常見的情況;對於絕大多數圖片,您都「不想」精細控管瀏覽器行為。與網頁程式開發人員相比,瀏覽器能夠取得更多資訊,而且可以根據這項資訊做出複雜的決策。您無法準確預測使用者的瀏覽情境,對於使用者的硬體、偏好和連線速度,這是您無法瞭解的。最好能夠讓您做出明智的猜測,但不確定不同使用者在網路上的體驗。從開發人員的角度來看,回應式圖片的主要用途僅限於目標:允許瀏覽器根據瀏覽器取得的資訊,盡可能提出最有效率的圖片要求。

為了讓瀏覽器做出這些選擇,srcset 可讓您為瀏覽器提供填入單一 <img> 的可能來源清單,而 sizes 則可讓您向瀏覽器提供 <img> 算繪方式的相關資訊。您將在下一個單元中瞭解如何使用這些選項。

描述性語法

使用指示性語法後,瀏覽器就能根據您指定的條件,決定要採取哪些動作,也就是要選取哪些來源。雖然這種使用案例並不常見,「只是載入最有效率的素材資源以顯示這張圖片」,但可讓我們為瀏覽器提供使用指示,藉此在資產轉移前沒有的資訊,例如來源內容或格式。

雖然 srcsetsizes 提供透過語法將資訊傳遞到使用者的瀏覽器,並允許該方法決定圖片來源,但有時候,您還是需要明確控制顯示哪個來源檔案和顯示的時間。舉例來說,您可能想要根據各個版面配置中斷點的不同設計處理方式,顯示具有不同顯示比例的相同圖片內容版本,或是確保只有支援特定編碼的瀏覽器可以接收特定來源。

在這類情況下,您需要明確控制要顯示的來源與顯示時機。我們確信 srcsetsizes 無法根據設計做出上述要求。如要取得該控制項,我們必須使用 <picture> 元素