Terry Yao's Blog

HTML 媒體標籤：img srcset、picture、video、fetchpriority

HTML 媒體標籤：img srcset、picture、video、fetchpriority

閱讀時間約 4 分鐘

為什麼一張圖片不夠

一張 2000px 寬的圖片下載到 375px 寬的手機上，多載了超過 95% 的像素——白白消耗頻寬、拖慢頁面。HTML 的媒體標籤解的就是這個問題：讓瀏覽器根據裝置和條件選最合適的資源。

<img> 的現代屬性

srcset + sizes：響應式圖片

<img
  src="hero-800.jpg"
  srcset="
    hero-400.jpg  400w,
    hero-800.jpg  800w,
    hero-1200.jpg 1200w,
    hero-1600.jpg 1600w
  "
  sizes="
    (max-width: 480px)  100vw,
    (max-width: 1024px) 80vw,
    1200px
  "
  alt="首頁主視覺"
  width="1200"
  height="600"
>
  • srcset：列出所有可用的圖片版本和它們的實際寬度（w 單位）
  • sizes：告訴瀏覽器圖片在不同視窗寬度下顯示多大（CSS 寬度）
  • 瀏覽器根據這兩個資訊 + 螢幕 DPR 自己選哪張

src 是必要的 fallback，瀏覽器不支援 srcset 時用它。

loading：延遲載入

<!-- 預設：立刻載入（above the fold 的圖片） -->
<img src="hero.jpg" loading="eager" alt="...">
 
<!-- 延遲：滾到視窗附近才載入（below the fold 的圖片） -->
<img src="thumbnail.jpg" loading="lazy" alt="...">

loading="lazy" 是最簡單的效能優化，一行屬性。不要對 hero 圖片用 lazy——使用者進來就要看到的圖片如果 lazy，LCP 分數會很差。

fetchpriority：提示瀏覽器優先序

<!-- LCP 圖片：提高優先序，讓瀏覽器早點下載 -->
<img src="hero.jpg" fetchpriority="high" alt="...">
 
<!-- 裝飾圖片 / 輪播後幾張：降低優先序 -->
<img src="carousel-3.jpg" fetchpriority="low" loading="lazy" alt="...">

fetchpriority="high" 配合 <link rel="preload"> 是優化 LCP 的標準組合。

width + height：防止 CLS

<!-- 一定要標 width / height，讓瀏覽器預留空間 -->
<img src="photo.jpg" width="800" height="450" alt="...">

沒有 width / height，圖片載入前高度是 0，載入後頁面跳動——這就是 CLS（Cumulative Layout Shift）。不需要精確到 1px，正確的比例就夠了。

<picture>：格式切換與 art direction

現代格式優先，舊瀏覽器 fallback

<picture>
  <!-- 支援 AVIF 的瀏覽器用 AVIF（最小） -->
  <source srcset="hero.avif" type="image/avif">
  <!-- 支援 WebP 的瀏覽器用 WebP -->
  <source srcset="hero.webp" type="image/webp">
  <!-- fallback：所有瀏覽器都支援的 JPEG -->
  <img src="hero.jpg" alt="首頁主視覺" width="1200" height="600">
</picture>

瀏覽器從上到下找第一個支援的 <source>，都不支援才用 <img>。

Art Direction：不同螢幕裁切不同構圖

<picture>
  <!-- 手機：直式裁切，主體置中 -->
  <source
    media="(max-width: 480px)"
    srcset="hero-portrait.jpg"
  >
  <!-- 平板以上：橫式全景 -->
  <img src="hero-landscape.jpg" alt="..." width="1200" height="500">
</picture>

srcset + sizes 是「同一張圖的不同解析度」；<picture> 的 art direction 是「完全不同構圖的圖片」。

<video> 基本屬性

<video
  src="demo.mp4"
  width="800"
  height="450"
  controls
  muted
  playsinline
  preload="metadata"
  poster="thumbnail.jpg"
>
  <!-- 字幕 -->
  <track kind="subtitles" src="subs-zh.vtt" srclang="zh" label="繁體中文">
  <!-- 不支援 video 的 fallback -->
  <p>您的瀏覽器不支援影片播放。<a href="demo.mp4">點此下載</a></p>
</video>

幾個重要屬性：

  • muted：靜音，自動播放必要條件（瀏覽器阻擋有聲音的自動播放）
  • playsinline：iOS Safari 行內播放，不強制全螢幕
  • preload="metadata"：只預載元資料（時長、尺寸），不預載影片內容
  • poster：影片未播放時顯示的封面圖

多格式 fallback

<video controls>
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4"  type="video/mp4">
</video>

相關文章

關係圖譜