使用 WebP 配合回應式圖像設計

使用 Responsive Image Design with WebP，網頁可以根據用家裝置的屏幕解像度提供不同格式和大小的圖像。這樣可確保圖像在各種螢幕大小和解像度的設備上都能準確顯示，這也可提高網頁載入的效能和速度。

使用 <picture>

讓我們看看如何在網頁中，根據螢幕的解像度提供不同格式和大小的圖像。以下是一個例子：

<picture>
// 按不同解像度載入 WebP 圖像
<source media="(min-width: 1025px)" 
    srcset="image-full.webp"
    type="image/webp">
<source media="(max-width: 1024px)"
    srcset="image-1024.webp" 
    type="image/webp">
<source media="(max-width: 768px)" 
    srcset="image-768.webp"
    type="image/webp">

// 若瀏覽器不支援 
// 載入 JPG 圖像
<source media="(min-width: 1025px)"
    srcset="image-full.jpg" 
    type="image/jpeg">
<source media="(max-width: 1024px)"
    srcset="image-1024.jpg" 
    type="image/jpeg">
<source media="(max-width: 768px)"
    srcset="image-768.jpg" 
    type="image/jpeg">

// 最後載入標準 img 圖像
<img 
    srcset="image-full.jpg 1024w, 
        image-768.jpg 768w,
        image-500.jpg 500w"
    sizes="(max-width: 1024px) 1024px,
            (max-width: 768px) 768px,
            (max-width: 500px) 500px"
    src="image-full.jpg" 
    alt="image description">
</picture>

'<picture>' 包含了一組 '<source>' 標籤。前三個是針對不同螢幕大小提供的 WebP 圖像。如果瀏覽器不支援 WebP 格式，它將嘗試載入緊接的三個 '<source>' 標籤，就是載入 JPG 格式的圖像檔案。最後，還有一個 '<img>' 標籤作為後備，以防瀏覽器不支援 '<source>' 標籤。

在 '<img>' 標籤中，指定了 'srcset' 和 'size' 屬性，可根據屏幕大小載入不同的 JPG 圖像；而 'src' 屬性就作為載入圖像的最終後備選項。

通過這種方法，可以利用不同格式和大小的圖像，以便新型瀏覽器可以更好地載入網頁圖像，這也可確保舊版瀏覽器可以使用標準的 '<img>' 標籤載入圖像。