回應式圖片
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
「回應式圖片」標記可分為兩種:情境。這類標記的目標是最有效率的圖片,以及在需要明確控制瀏覽器選取的圖片來源的情況下。您可以分別將這兩者視為「描述性」和「描述性」語法。
在本單元中,您將瞭解這兩種方式。首先,我們會說明 srcset
和 sizes
,以及如何根據對於使用者、裝置和瀏覽情況的瞭解,協助瀏覽器做出最佳選擇。接著,您會看見 <picture>
元素,可根據可視區域大小和瀏覽器支援圖片格式等因素,明確控制來源選項。
描述性語法
描述性的語法可將圖片來源的相關資訊提供給瀏覽器,以及圖片來源的使用方式,但最終會讓瀏覽器做出決策。目前這是較常見的情況;對於絕大多數圖片,您都「不想」精細控管瀏覽器行為。與網頁程式開發人員相比,瀏覽器能夠取得更多資訊,而且可以根據這項資訊做出複雜的決策。您無法準確預測使用者的瀏覽情境,對於使用者的硬體、偏好和連線速度,這是您無法瞭解的。最好能夠讓您做出明智的猜測,但不確定不同使用者在網路上的體驗。從開發人員的角度來看,回應式圖片的主要用途僅限於目標:允許瀏覽器根據瀏覽器取得的資訊,盡可能提出最有效率的圖片要求。
為了讓瀏覽器做出這些選擇,srcset
可讓您為瀏覽器提供填入單一 <img>
的可能來源清單,而 sizes
則可讓您向瀏覽器提供 <img>
算繪方式的相關資訊。您將在下一個單元中瞭解如何使用這些選項。
描述性語法
使用指示性語法後,瀏覽器就能根據您指定的條件,決定要採取哪些動作,也就是要選取哪些來源。雖然這種使用案例並不常見,「只是載入最有效率的素材資源以顯示這張圖片」,但可讓我們為瀏覽器提供使用指示,藉此在資產轉移前沒有的資訊,例如來源內容或格式。
雖然 srcset
和 sizes
提供透過語法將資訊傳遞到使用者的瀏覽器,並允許該方法決定圖片來源,但有時候,您還是需要明確控制顯示哪個來源檔案和顯示的時間。舉例來說,您可能想要根據各個版面配置中斷點的不同設計處理方式,顯示具有不同顯示比例的相同圖片內容版本,或是確保只有支援特定編碼的瀏覽器可以接收特定來源。
在這類情況下,您需要明確控制要顯示的來源與顯示時機。我們確信 srcset
和 sizes
無法根據設計做出上述要求。如要取得該控制項,我們必須使用 <picture>
元素。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2023-02-01 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2023-02-01 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2023-02-01 (世界標準時間)。"],[],[]]