了解圖片處理和HTML picture
標籤的基礎知識,以及如何使它們具有響應性。
HTML為我們提供了picture
標籤,它與img
標籤的srcset
屬性非常相似,但兩者之間的差異非常細微。
當你想要完全改變圖片,或者提供不同的圖片格式時,你可以使用picture
。
我發現最好的用例是用於提供WebP圖片,這是一種目前還不被廣泛支援的格式。在picture
標籤中,你可以指定一個圖片列表,它們會按順序使用。所以在下面的例子中,支援WebP的瀏覽器會使用第一張圖片,否則會回退到JPG圖片:
<picture>
<source type="image/webp" srcset="image.webp">
<img src="image.jpg" alt="一張圖片">
</picture>
source
標籤為圖片定義了一個(或多個)格式。img
標籤則是一個後備選項,用於在瀏覽器過於老舊,不支援picture
標籤的情況下。
在picture
標籤內的source
標籤中,你可以添加media
屬性來設置媒體查詢。
下面的例子與上面使用srcset
的例子類似:
<picture>
<source media="(min-width: 500w)" srcset="dog-500.png" sizes="100vw">
<source media="(min-width: 800w)" srcset="dog-800.png" sizes="100vw">
<source media="(min-width: 1000w)" srcset="dog-1000.png" sizes="800px">
<source media="(min-width: 1400w)" srcset="dog-1400.png" sizes="800px">
<img src="dog.png" alt="一張狗圖片">
</picture>
但這不是它的用例,因為正如你所看到的,這樣更冗長。
picture
標籤是一個相對較新的標籤,現在已經被所有主要瀏覽器支援,除了Opera Mini和IE(所有版本)。