YouTube 影片縮圖網址怎麼取得？各種尺寸的縮圖網址一次整理

做網站、寫部落格或整理影片清單時，常常需要 YouTube 影片的縮圖。其實不用截圖，YouTube 的縮圖都有固定的網址，只要知道影片 ID，就能直接組出來。

第一步：找到影片 ID

影片 ID 是一串 11 個字元的英數字。不同形式的網址，ID 的位置不太一樣（下面以 9IEkEZ_qEgE 為例）：

• 一般網址：https://www.youtube.com/watch?v=9IEkEZ_qEgE，v= 後面那一串
• 分享短網址：https://youtu.be/9IEkEZ_qEgE
• Shorts：https://www.youtube.com/shorts/9IEkEZ_qEgE
• 嵌入網址：https://www.youtube.com/embed/9IEkEZ_qEgE

網址後面如果還有 &t=30s、?si=… 之類的參數，那些都不是 ID，不要一起複製。

第二步：套進縮圖網址

把下面網址裡的「影片ID」換成你的影片 ID：

• 最高解析度（1280×720）：https://img.youtube.com/vi/影片ID/maxresdefault.jpg
• 標準畫質（640×480）：https://img.youtube.com/vi/影片ID/sddefault.jpg
• 高畫質（480×360）：https://img.youtube.com/vi/影片ID/hqdefault.jpg
• 中畫質（320×180）：https://img.youtube.com/vi/影片ID/mqdefault.jpg
• 預設小圖（120×90）：https://img.youtube.com/vi/影片ID/default.jpg

另外還有 0.jpg（跟 hqdefault 一樣大），以及 1.jpg、2.jpg、3.jpg 三張從影片中自動擷取的小圖（120×90）。

想要檔案更小的 WebP 格式，把網址換成 https://i.ytimg.com/vi_webp/影片ID/maxresdefault.webp 即可。

找不到最高解析度的縮圖？

maxresdefault.jpg 只有在影片本身有 720p 以上畫質時才會產生。比較舊的影片、或上傳畫質較低的影片，打開這個網址會看到一張灰色的小圖。這時候改用 hqdefault.jpg，所有影片都一定有。

另外 sddefault、hqdefault 是 4:3 比例，16:9 的影片上下會有黑邊；maxresdefault 和 mqdefault 才是 16:9 沒有黑邊。

用程式自動抓影片 ID

如果要在網站上批次處理很多影片，可以用這段 JavaScript 從各種網址格式取出 ID，再組出縮圖網址：

function getYouTubeId(url) {
  const match = url.match(/(?:v=|youtu\.be\/|embed\/|shorts\/)([A-Za-z0-9_-]{11})/);
  return match ? match[1] : null;
}

function getYouTubeThumbnail(url, size = 'hqdefault') {
  const id = getYouTubeId(url);
  return id ? `https://img.youtube.com/vi/${id}/${size}.jpg` : null;
}

// 例:
getYouTubeThumbnail('https://youtu.be/9IEkEZ_qEgE');
// → https://img.youtube.com/vi/9IEkEZ_qEgE/hqdefault.jpg

實用技巧：用縮圖取代嵌入影片，網頁更快

在網頁上嵌入 YouTube 影片（iframe），就算訪客沒按播放，瀏覽器也會先載入一大包播放器程式，手機上會明顯拖慢網頁速度。

比較輕巧的做法，是先放縮圖加上連結，訪客點了再去看影片：

<a href="https://www.youtube.com/watch?v=9IEkEZ_qEgE" target="_blank" rel="noopener">
  <img
    src="https://i.ytimg.com/vi/9IEkEZ_qEgE/hqdefault.jpg"
    alt="影片標題"
    width="480"
    height="360"
    loading="lazy">
</a>

• loading="lazy"：圖片捲到附近才載入。
• width、height：先保留圖片位置，載入時版面不會跳動。
• alt：寫上影片標題，搜尋引擎和使用螢幕報讀軟體的人都看得懂。

使用注意

縮圖的著作權屬於影片的創作者。拿來介紹、連結到該影片沒有問題；如果要用在廣告、商品或其他商業用途，請先取得創作者同意。

延伸閱讀

• iframe 嵌入網頁語法：基本寫法、RWD 自適應寬度與網頁無法嵌入的原因
• iframe 自動適應高度怎麼做？同網域與跨網域的寫法（含 postMessage 範例）

公司形象影片、產品介紹影片要放上官網，放在哪裡、怎麼放才不會拖慢網站，都會影響效果。正威網路行銷提供基隆網頁設計與攝影剪輯服務，影片拍好、剪好也能幫你放進網站。