diff --git a/test/poster-image-availability.html b/test/poster-image-availability.html new file mode 100644 index 0000000..9ca4b27 --- /dev/null +++ b/test/poster-image-availability.html @@ -0,0 +1,448 @@ + +poster image availability + + + + + + + + + + + \ No newline at end of file diff --git a/youtube-thumbnail-urls.md b/youtube-thumbnail-urls.md index f192758..374842b 100644 --- a/youtube-thumbnail-urls.md +++ b/youtube-thumbnail-urls.md @@ -23,4 +23,31 @@ I've started with using hqdefault from `i.ytimg` to optimize for origin reuse. ## Annoying Youtube 404 behavior -When YouTube serves a response for a 404 thumbnail, they serve a true 404 response code (good), however they still serve [`content-type: image/jpeg` and valid JPEG data in the response body](https://stackoverflow.com/questions/58560120/why-do-image-and-picture-elements-display-images-despite-http-status-404). ([example](https://img.youtube.com/vi/lXMskKTw3Bc/maxresdefault.jpg)). I assume they do this to avoid people seeing broken image icons, but unfortunately this also means you can't rely on `img.onerror`. The linked SO post and [`amp-youtube` both](https://github.com/ampproject/amphtml/blob/186d10a0adadcc8367aaa047b58598b587958946/extensions/amp-youtube/0.1/amp-youtube.js#L519-L528) use `onload` plus a `naturalWidth` check to check instead. \ No newline at end of file +When YouTube serves a response for a 404 thumbnail, they serve a true 404 response code (good), however they still serve [`content-type: image/jpeg` and valid JPEG data in the response body](https://stackoverflow.com/questions/58560120/why-do-image-and-picture-elements-display-images-despite-http-status-404). ([example](https://img.youtube.com/vi/lXMskKTw3Bc/maxresdefault.jpg)). I assume they do this to avoid people seeing broken image icons, but unfortunately this also means you can't rely on `img.onerror`. The linked SO post and [`amp-youtube` both](https://github.com/ampproject/amphtml/blob/186d10a0adadcc8367aaa047b58598b587958946/extensions/amp-youtube/0.1/amp-youtube.js#L519-L528) use `onload` plus a `naturalWidth` check to check instead. + +## Aspect ratios + +`maxresdefault` and `mqdefault` are 30:17 (very close to 16:9, the HD standard aspect ratio). + +`sddefault`, `hqdefault`, `default` are 4:3. + +## WebP + +`https://i.ytimg.com/vi_webp/${videoid}/${width}.webp` + +I tested across some old and new videos and here's the best image they had available, counted: + +``` + "maxresdefault.webp (1280px)": 178, + "sddefault.webp (640px)" : 21, + "hqdefault.webp (480px)" : 8, + "maxresdefault.jpg (1280px)" : 6, + "sddefault.jpg (640px)" : 2, + "hqdefault.jpg (480px)" : 89, +``` + +I found no cases where it a smaller size was not available. For example, if they have the maxresdefault webp, then they definitely have the sddefault webp. + +All this means, it'd be very reasonable and efficient to try first for the `maxresdefault.webp`. If it isn't available (see annoying 404 behavior above), then fall back to `hqdefault.jpg`. + +In lite-youtube-embed's case though, we'll default to trying the `sddefault.webp` first, as that resolution is plenty for our uses. \ No newline at end of file