How YouTube Stores Thumbnail Images: CDN Structure, Resolutions, and the MaxRes Fallback

#javascript #webdev #tutorial #youtube

If you've ever tried to grab a YouTube thumbnail directly from the CDN and hit a 404 on maxresdefault.jpg, you're not alone. Here's how YouTube's thumbnail storage actually works.

The CDN URL Pattern

**
YouTube stores thumbnails at a predictable CDN path:

https://i.ytimg.com/vi/[VIDEO_ID]/[FILENAME].jpg
The filenames map to specific resolutions:

maxresdefault.jpg — 1920×1080
Only exists if the creator uploaded a custom thumbnail.
- sddefault.jpg — 640×480 Available on most videos.
hqdefault.jpg — 480×360
Almost always available.
mqdefault.jpg — 320×180
Standard fallback size.
default.jpg — 120×90
Always exists.

Why MaxRes Isn't Always There

maxresdefault.jpg
only exists when the creator uploaded a custom thumbnail at 1920×1080. Auto-generated thumbnails (captured frames) cap at 1280×720. Most videos uploaded before 2015 don't have MaxRes stored at all because YouTube wasn't accepting custom thumbnails at that resolution yet.

## How to Handle This in Code
If you're building anything that fetches YouTube thumbnails, you need fallback logic. A simple approach in JavaScript:

javascriptconst resolutions = [
  'maxresdefault',
  'hqdefault',
  'mqdefault',
  'sddefault',
  'default'
];

async function getThumbnail(videoId) {
  for (const res of resolutions) {
    const url = `https://i.ytimg.com/vi/${videoId}/${res}.jpg`;
    const response = await fetch(url, { method: 'HEAD' });
    if (response.ok) return url;
  }
  return null;
}

YouTube Shorts Are Different

**
Shorts use a vertical 9:16 format. Their thumbnails are stored under a different CDN path:

https://i.ytimg.com/vi/[VIDEO_ID]/oar2.jpg
The standard landscape filenames still exist for Shorts but will return the letterboxed version, not the true vertical crop.

Extracting the Video ID

YouTube URLs come in several formats. You need to handle all of them:

https://www.youtube.com/watch?v=VIDEO_ID
https://youtu.be/VIDEO_ID
https://youtube.com/shorts/VIDEO_ID
https://m.youtube.com/watch?v=VIDEO_ID
https://www.youtube.com/embed/VIDEO_ID
https://www.youtube.com/watch?v=VIDEO_ID&t=30s

A regex that covers all of these:

javascriptfunction extractVideoId(url) {
  const regex = /(?:youtube\.com\/(?:watch\?v=|shorts\/|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
  const match = url.match(regex);
  return match ? match[1] : null;
}

Practical Use

This is the same logic powering Picknar, a free YouTube thumbnail downloader that handles all of the above URL parsing, resolution fallback, Shorts detection, and format conversion without requiring login or a browser extension.

If you're building something similar, the main edge cases to cover are: pre-2015 videos with no MaxRes, auto-generated thumbnails, Shorts vertical format, and timestamp URLs (the