了解圖片處理和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(所有版本)。