Picture 圖片與影片格式測試

靜態圖片及副檔名

JPEG / JPG

image/jpeg

photo.jpg

JPEG 照片。

等待瀏覽器選擇來源

等待載入

JPEG / JPEG

image/jpeg

photo.jpeg

JPEG 副檔名案例。

等待瀏覽器選擇來源

等待載入

JPEG / JPE

image/jpeg

photo.jpe

JPEG 副檔名案例。

等待瀏覽器選擇來源

等待載入

JPEG / JIF

image/jpeg

photo.jif

JPEG 副檔名案例。

等待瀏覽器選擇來源

等待載入

JPEG / JFIF

image/jpeg

photo.jfif

JPEG 副檔名案例。

等待瀏覽器選擇來源

等待載入

JPEG / PJPEG

image/jpeg

photo.pjpeg

JPEG 副檔名案例。

等待瀏覽器選擇來源

等待載入

JPEG / PJP

image/jpeg

photo.pjp

JPEG 副檔名案例。

等待瀏覽器選擇來源

等待載入

PNG

image/png

photo.png

無損照片。

等待瀏覽器選擇來源

等待載入

AVIF

image/avif

photo.avif

靜態 AV1 圖片。

等待瀏覽器選擇來源

等待載入

JPEG XL

image/jxl

photo.jxl

保留原始格式，直接觀察此瀏覽器是否能解碼。

等待瀏覽器選擇來源

等待載入

WebP

image/webp

photo.webp

靜態 WebP 照片。

等待瀏覽器選擇來源

等待載入

BMP

image/bmp

photo.bmp

點陣照片。

等待瀏覽器選擇來源

等待載入

ICO

image/vnd.microsoft.icon

photo.ico

照片縮圖，ICO 尺寸上限為 256 × 256。

等待瀏覽器選擇來源

等待載入

CUR

image/x-icon

photo.cur

游標格式照片縮圖。

等待瀏覽器選擇來源

等待載入

TIFF / TIF

image/tiff

photo.tif

TIFF 照片，不使用解碼函式庫。

等待瀏覽器選擇來源

等待載入

TIFF / TIFF

image/tiff

photo.tiff

TIFF 副檔名案例。

等待瀏覽器選擇來源

等待載入

SVG

image/svg+xml

photo.svg

SVG 內嵌真實照片，測試 SVG 容器載入。

等待瀏覽器選擇來源

等待載入

SVGZ

image/svg+xml

photo.svgz

gzip 壓縮 SVG，HTTP 主機需回傳 Content-Encoding: gzip。

等待瀏覽器選擇來源

等待載入

XBM

image/x-xbitmap

photo.xbm

照片轉為黑白點陣，保留舊格式案例。

等待瀏覽器選擇來源

等待載入

HEIC / HEIF

image/heic

photo.heic

補充 MDN 提到的 HEIF 容器，這份樣本使用 HEIC 編碼。

等待瀏覽器選擇來源

等待載入

動畫圖片

請觀察照片是否持續移動，同時測試各格式的動態收集行為。

APNG / APNG

image/apng

animated.apng

照片縮放動畫，測試 .apng 副檔名。

等待瀏覽器選擇來源

等待載入

APNG / PNG

image/png

animated.png

照片縮放動畫，測試 .png 副檔名的 APNG。

等待瀏覽器選擇來源

等待載入

GIF

image/gif

animated.gif

照片縮放動畫，256 色調色盤。

等待瀏覽器選擇來源

等待載入

WebP 動畫

image/webp

animated.webp

照片縮放動畫。

等待瀏覽器選擇來源

等待載入

AVIF 動畫

image/avif

animated.avif

照片縮放動畫。

等待瀏覽器選擇來源

等待載入

影片作為圖片

MDN 提到 Safari 可將影片當作動畫圖片。此案例在 picture 中以 video/mp4 source 提供影片，並保留 JPEG fallback，與下方影片播放測試分開觀察。

MP4 放入 img

video/mp4

clip.mp4

Safari 特殊相容性案例，其他瀏覽器可能無法顯示。

等待瀏覽器選擇來源

等待載入

影片播放

影片使用 video 標籤直接指定單一檔案，沒有替代來源。中繼資料載入與實際播放是不同結果，請按播放確認。