Better YouTube Thumbnails


The First step in any design job is figuring out what your requirements are. From the horses Mouth:

  • Have a resolution of 1280x720 (with minimum width of 640 pixels).
  • Be uploaded in image formats such as .JPG, .GIF, .BMP, or .PNG.
  • Remain under the 2MB limit.
  • Try to use a 16:9 aspect ratio as it's the most used in YouTube players and previews.

But that's not the only platform that thumbnails will be shown. Facebook and Twitter are also things, and they like to squarify them. So I've made myself a little template showing how a thumbnail will look, and get sized according to Facebook, Twitter and YouTube.

Here is my Thumbnail Template.

Thumbnails on Youtube


The YouTube markers show where the scrub bar and the video length indicators are. They're in red for Brand Reasons™

Thumbnails on Facebook


There seem to be 2 different Facebook thumbnail types, one when the embedded player is available and one when not. So that's great.

The embedded player has a square thumbnail with a stylish play button in the center. The non embedded is just an off-center slice of the original thumbnail.

Thumbnails on Twitter


As you can tell, this is just goofytown. They have a giant-ass play button in the center. But hey, at least they verify Nazi's! That's sarcasm by the way. The fact I need to explicitly call that out as sarcasm exemplifies everything wrong with this timelime. Now get off my lawn.

My Personal Design

So given that there is some extra space that isn't shown on facebook and twitter, i think It would be cool to utilize that space. So we're going to have the top right be my Brand™®, and then the bottom left be an emoji for the kind of topics I cover.

Mixing and mastering
Brains and Learning
Canadian Politics
Empathy / Schmaltz
Humour (or Ham handed attempts)

The right side will be reserved for the season/episode number because that's a thing I do. I mean, how else can I have fun with numerology if I don't count things?

The bottom left has a bit of empty space, which means a Sierpinski's Triangle can make an appearance.

First Attempt

My first attempt was to just use the standard thumbnail size on the website, which was a big mistake. Boosting the size up to a width of 640 did make things slightly better, but then the size of the thumbnails on Facebook shifted.

'Debugging' Thumbnails

There are a few tools you can use to fix your thumbnails.


Conclusion Thus Far?

YouTube and their thumbnails are a bit of a tirefire.