{"id":845,"date":"2015-06-04T10:30:54","date_gmt":"2015-06-04T04:30:54","guid":{"rendered":"http:\/\/promincproductions.com\/blog\/?p=845"},"modified":"2024-03-08T20:46:37","modified_gmt":"2024-03-09T02:46:37","slug":"youtube-image-thumbnail-urls","status":"publish","type":"post","link":"https:\/\/promincproductions.com\/blog\/youtube-image-thumbnail-urls\/","title":{"rendered":"YouTube Image Thumbnail URLs"},"content":{"rendered":"

I’ve always known there were a few different URLs to jpeg images of your YouTube videos, but I’ve just realized there are a few more URLS for YouTube thumbnail images than I previously thought and thus wanted to document the options.  To the best of my knowledge YouTube doesn’t post these image URLs all for developers to use YouTube thumbnails. So here is the list I have come up with.<\/p>\n\n\n\n

If you don’t do this already, use YouTube thumbnail images on your web site where you can. \u00a0It saves you the hassle of doing image management, and if you are loading more than one video on a page, you should be embedding the thumbnails and doing some Javascript work to load the YouTube video when a user chooses which they want to watch. \u00a0This will make your page load times SO much faster and more efficiently, and your visitors will love you for it.<\/p>\n\n\n\n

YouTube Image URLs<\/h2>\n\n\n\n

The base URL to YouTube thumbnail image URL is http:\/\/img.youtube.com\/vi<\/strong><\/em>. The video ID and the image format need to be added to the URL as well.<\/p>\n\n\n\n

The full URL pattern looks like:<\/p>\n\n\n\n

http:\/\/img.youtube.com\/vi\/YouTubeID<\/strong>\/ImageFormat<\/strong>.jpg<\/em><\/p>\n\n\n\n

The YouTubeID<\/strong><\/em> is unique to the video you are using, so that’s up to you to find from the YouTube video it self.<\/p>\n\n\n\n

The ImageFormat<\/strong><\/em> portion of the URL can be chosen from the table below.<\/p>\n\n\n\n

webp image versions<\/h3>\n\n\n\n

You can also request images in the webp image format if you’d like.  The same logic and image formats exist, you just need to use this alternate URL pattern. webp<\/code> images are highly optimized images and thus are smaller in file size. This of course reduces page load time and makes a better user experience for website visitors. webp<\/code> is great for mobile devices and all major desktop browsers support webp<\/code> as well now.<\/p>\n\n\n\n

http:\/\/img.youtube.com\/vi_webp\/YouTubeID<\/strong>\/ImageFormat<\/strong>.webp<\/em><\/p>\n\n\n\n

Alternate Domains<\/h3>\n\n\n\n

There are various domains that YouTube image thumbnail URLs can be requested from:<\/p>\n\n\n\n

    \n
  • http:\/\/img.youtube.com<\/li>\n\n\n\n
  • http:\/\/i.ytimg.com<\/li>\n\n\n\n
  • http:\/\/i3.ytimg.com<\/li>\n<\/ul>\n\n\n\n

    HTTPS<\/h3>\n\n\n\n

    All of these URLs can and should be called from HTTPS instead of HTTP<\/p>\n\n\n\n

    YouTube Thumbnail Image Options<\/h2>\n\n\n\n

    Some of the image formats add what I’m calling 16×9 bars to the image.  What I mean is that the image is in a 4×3 aspect ratio (nearly square) yet the video it self is of a 16×9 aspect ratio (rectangular).  Because of this, black bars are added to the top and bottom of the 4×3 image where the 16×9 image leaves a void.<\/p>\n\n\n\n

    When a video is uploaded to YouTube, YouTube will generate 3 thumbnail images and designates one of those as the default.  The owner of the video can choose one of the other 2 images as the default.  In addition, the owner can upload a custom thumbnail image and use that as the default thumbnail.  In that scenario, images 1, 2, and 3 listed below are the three auto-generated images mentioned above, and image 0 would be the custom image uploaded (if set as default).<\/p>\n\n\n\n

    If you know of any other image formats that I’m missing here, please comment below – I’d love for this to become a complete resource for all to use.<\/p>\n\n\n\n

    ImageFormat<\/strong><\/th>Size<\/strong><\/th>Resolution<\/strong><\/th>16×9 Bars<\/strong><\/th>Default Image<\/strong><\/th><\/tr><\/thead>
    0<\/td>480 x 360<\/td>High<\/td>Yes<\/td>Yes<\/td><\/tr>
    1<\/td>120 x 90<\/td>Low<\/td>Yes<\/td>\n

    No<\/p>\n<\/td><\/tr>

    2<\/td>120 x 90<\/td>Low<\/td>Yes<\/td>No<\/td><\/tr>
    3<\/td>120 x 90<\/td>Low<\/td>Yes<\/td>No<\/td><\/tr>
    default<\/td>120 x 90<\/td>Low<\/td>Yes<\/td>Yes<\/td><\/tr>
    mqdefault<\/td>320 x 180<\/td>Medium<\/td>No<\/td>\n

    Yes<\/p>\n<\/td><\/tr>

    hqdefault<\/td>480 x 360<\/td>High<\/td>Yes<\/td>Yes<\/td><\/tr>
    sddefault<\/td>640 x 480<\/td>High<\/td>Yes<\/td>Yes<\/td><\/tr>
    maxresdefault<\/td>\n

    Matches the resolution of the uploaded video<\/p>\n

    NOTE: May not be available for non-highres videos.<\/p>\n<\/td>

    		Highest possible<\/td>No<\/td>Yes<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Removing the 16×9 Bars<\/h2>\n\n\n\n

    I’ve often wanted to use an image that has the 16×9 bars on it, but don’t want to show the black bars.  To do this, you’ll need to use the image as a background-image of an element, and use CSS to crop off the top and bottom bars.<\/p>\n\n\n\n

    \n

    Original Image from YouTube<\/h3>\n<\/td><\/tr>

    \"\"<\/td><\/tr>
    \n
    <img src=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/06\/0.jpg\" alt=\"\" \/><\/code><\/pre>\n<\/td><\/tr>
    \n

    Background Image with Bars Hidden<\/h3>\n<\/td><\/tr>

    \n
     <\/div>\n<\/td><\/tr>
    \n
    <div style=\"background-image: url('https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/06\/0.jpg'); width: 480px; height: 270px; background-position-y: -45px;\"> <\/div><\/code><\/pre>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    Example Embedded YouTube Thumbnail Images<\/h2>\n\n\n\n
    ImageFormat<\/th>URL<\/th>Example<\/th><\/tr><\/thead>
    0<\/td>https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/06\/0.jpg<\/a><\/td>\"\"<\/td><\/tr>
    1<\/td>https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/06\/1.jpg<\/a><\/td>\"\"<\/td><\/tr>
    2<\/td>https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/06\/2.jpg<\/a><\/td>\"\"<\/td><\/tr>
    3<\/td>https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/06\/3.jpg<\/a><\/td>\"\"<\/td><\/tr>
    default<\/td>https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/06\/default.jpg<\/a><\/td>\"\"<\/td><\/tr>
    mqdefault<\/td>https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/06\/mqdefault.jpg<\/a><\/td>\"\"<\/td><\/tr>
    hqdefault<\/td>https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/06\/hqdefault.jpg<\/a><\/td>\"\"<\/td><\/tr>
    sddefault<\/td>https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/06\/sddefault.jpg<\/a><\/td>\"\"<\/td><\/tr>
    maxresdefault<\/td>https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/06\/maxresdefault-1.jpg<\/a><\/td>\"\"<\/td><\/tr><\/tbody><\/table>
    Example of the different YouTube Image Thumbnail sizes and displays<\/figcaption><\/figure>\n\n\n\n
    Other Options?<\/h2>\n\n\n\n
    In YouTube itself, they use a URL like:<\/p>\n\n\n\n
    https:\/\/i.ytimg.com\/vi\/gp66iFdRB1c\/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=LsmavCnhh0YCRQ0D-IW_vjDslqY<\/pre>\n\n\n\n
    This is very intriguing – this would mean that you could actually come up with your own specifications to the image dimensions, etc.  However you can’t just drop in any video ID and get the same results.  It appears that the sigh<\/strong> query parameter is unique to this video or image.  So determining what the sigh<\/strong> query parameter is would allow us to create our own URLs that mimic this pattern and thus give us full reign to define custom images.<\/p>\n\n\n\n
    If anyone has more insight to what the sigh<\/strong> parameter is and how to set it I’d LOVE to hear from you.  Please comment below with your input.<\/p>","protected":false},"excerpt":{"rendered":"
    I’ve always known there were a few different URLs to jpeg images of your YouTube videos, but I’ve […]<\/p>\n","protected":false},"author":1,"featured_media":854,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[4,5],"tags":[524],"class_list":["post-845","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-photo-video","category-website-development","tag-youtube"],"jetpack_featured_media_url":"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/06\/maxresdefault.jpg","jetpack_shortlink":"https:\/\/wp.me\/p4BbcR-dD","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/845","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/comments?post=845"}],"version-history":[{"count":15,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/845\/revisions"}],"predecessor-version":[{"id":3584,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/845\/revisions\/3584"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media\/854"}],"wp:attachment":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media?parent=845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/categories?post=845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/tags?post=845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}