/

HTML的`picture`標籤

HTML的picture標籤

了解圖片處理和HTML picture標籤的基礎知識，以及如何使它們具有響應性。

HTML為我們提供了picture標籤，它與img標籤的srcset屬性非常相似，但兩者之間的差異非常細微。

當你想要完全改變圖片，或者提供不同的圖片格式時，你可以使用picture。

我發現最好的用例是用於提供WebP圖片，這是一種目前還不被廣泛支援的格式。在picture標籤中，你可以指定一個圖片列表，它們會按順序使用。所以在下面的例子中，支援WebP的瀏覽器會使用第一張圖片，否則會回退到JPG圖片：

1
2
3
4
<picture>
 <source type="image/webp" srcset="image.webp">
 <img src="image.jpg" alt="一張圖片">
</picture>

source標籤為圖片定義了一個（或多個）格式。img標籤則是一個後備選項，用於在瀏覽器過於老舊，不支援picture標籤的情況下。

在picture標籤內的source標籤中，你可以添加media屬性來設置媒體查詢。

下面的例子與上面使用srcset的例子類似：

1
2
3
4
5
6
7
<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（所有版本）。

tags: [“HTML圖片處理”, “HTML picture標籤”, “WebP圖片”]