Video Thumbnail Maker

A video thumbnail is designed on a big screen and read on a small one. The designer sees it at full size, with every letter crisp and every face clear. The viewer sees it as one tile in a scrolling list, often only a few centimetres wide, beside a dozen others asking for the same glance. Those are two different pictures, and only the second one matters.

That makes a thumbnail a poster in miniature. Posters have always been judged from across the street, not from the printer’s bench, and the habit transfers directly. The question is never whether the design looks good. The question is whether it still says something when it is small enough to fit under your thumb.

The arithmetic of shrinking

Start with plain scale. A design laid out on a frame 1,280 pixels wide and shown 120 pixels wide has been multiplied by 0.09375. Lettering set 64 pixels tall becomes 6 px tall. A headline at 150 pixels becomes a little over 14. Nothing about the design changed except that factor, and the factor is brutal.

The height that matters for reading lowercase text is not the type size but the x-height. The CSS specification defines its ex unit from the x-height of the font, noting that it is called that because it is often equal to the height of a lowercase x. Browsers report the measured bounds of drawn text through the canvas TextMetrics interface, including how far the ink rises above the baseline, so the x-height of the actual font on the actual device can be read rather than guessed.

Here is the worked example this page opens with, and you can reproduce it. The words “three words max” are set at 64 pixels in the working frame. On the Mac used for this essay, the system sans-serif measured an x-height of 8.4 pixels at the 320 pixel width. At 120 pixels the same letters had an x-height of 3.1 pixels and strokes about 0.94 of a pixel thick. The tool marks that block too weak at that width, and the eye agrees: the words become a yellow smudge with a texture.

Thickness fails before height does. A stroke thinner than one pixel cannot be drawn as a stroke at all; it can only be drawn as a paler pixel, which is why light weights vanish first and heavy weights survive. The W3C’s guidance on contrast makes the same point from the other direction: anti-aliasing can render thin or unusual fonts much fainter than their declared colour, so a combination that passes on paper can be far weaker in practice.

How the picture is shrunk matters too, and it is not something a browser promises. The HTML Standard says plainly that it does not define the precise algorithm used to scale an image down when drawing on a canvas, and it treats the quality setting only as a preference, naming bilinear, bicubic and Lanczos scaling as examples. A test that leaves the filter to the browser can give different answers on different machines. This tool therefore does the shrinking itself with a Lanczos filter, whose kernel is a sinc function windowed by a wider sinc, applied along rows and then along columns because the two-dimensional kernel is the product of two one-dimensional ones.

Why three or four words is usually the limit

There is no law that caps a thumbnail at four words. There is only the width of the tile and the size each letter needs. If a letter needs six pixels of x-height to keep its shape, and a short word needs four or five letters plus a space, then a line of capitals at that size eats much of a 168 pixel tile with two words. A third word means a second line, and the second line means smaller letters or a covered picture. The budget runs out fast.

Counting words sounds trivial until the text contains apostrophes, numbers, hyphens or a script that does not separate words with spaces. The page counts them with the browser’s own word segmenter, Intl.Segmenter with word granularity, which marks each segment as word-like or not; punctuation and spaces are not counted. It nudges you above four words in a block. That number is this tool’s own suggestion, not a rule from anywhere, and you can ignore it whenever the picture is mostly words on purpose.

The useful habit is to let the picture carry the subject and the words add the one thing the picture cannot say. A face, an object or a before and after explains itself at any size. A sentence does not.

Contrast against a busy photograph

Contrast is where a careful measurement beats a quick look. The WCAG 2.2 definitions give the method: convert each colour channel from its 8-bit value to a linear value, combine them into a relative luminance weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue, then divide the lighter luminance plus 0.05 by the darker one plus 0.05. Ratios run from 1:1 to 21:1. For text on web pages the guidelines ask for at least 4.5:1, and 3:1 for large text. The W3C’s own example of a pair at about 3:1 is a grey of #949494 against white.

Those numbers were written for text on web pages, over a background colour the author specifies. A thumbnail is a picture of text over another picture, and the background is not one colour at all. That is the trap. Take white letters laid over a background that is half black and half white in a fine pattern. Averaged, the background is a mid grey, and white against that grey scores 3.95:1, which sounds close to acceptable. But half of the letters sit on white. Against those pixels the contrast is 1:1, which is to say the letters are not there.

So the small-size test never uses an average. It renders the design without the block’s letters, shrinks that background and a map of where the letters fall with the same filter, and compares the letter colour with every pixel actually under the letters. It reports the lowest ratio and the 10th percentile, the value below which only a tenth of the letter pixels fall. Its own test suite includes the patterned case above, and a version of the code that compares against the average colour was run on purpose to show that the test catches it.

Outlines and backing plates exist because of this problem, and the W3C’s guidance explains why they work. A narrow border around a letter counts as part of the letter, so its colour is what meets the background. A wide border that fills in the inner details acts as a halo and counts as background, so the letter reads against the border, not against the photograph. The tool treats an outline that is still at least a pixel wide at the tested size both ways and keeps whichever is better. A plate does the same job by putting a flat colour under the words: near-black text on a yellow plate measures 13.08:1 no matter what the photograph does underneath.

The ratio here is a yardstick, not a verdict from a standard. The 4.5:1 figure is used because it is well documented and widely understood, not because any video service applies it. The thresholds for letter height and stroke thickness are this tool’s own, and they are printed beside every score so you can disagree with them.

The corner you do not own

A thumbnail is rarely shown alone. A list may print the running time over one corner or draw a progress bar along the bottom edge once someone has started watching, and you have no control over either. The safest assumption is that some part of the frame is not yours. The tool lets you mark a corner region and a bottom strip, sized as a share of the frame and set by you, then flags any text whose rendered ink reaches into them, and flags the focal point if it lands there. It does not claim to know where any particular service draws its badges. Check where yours does and set the regions to match.

The same caution applies to pixel sizes. The frame here is always 16 by 9, with the height worked out from the width and rounded, but the width is yours to type. Services change their recommended sizes and file limits, and a page that hard-codes them will eventually be wrong.

Judge variants with your own eyes

None of this predicts clicks, and it should not pretend to. A legibility score says whether the words survive the shrink; it says nothing about whether anyone wants to watch. The honest substitute is to make two or three versions and look at them side by side at the size people will meet them, on a light surround and a dark one, without the full-size original in view.

That is what the variant row is for. It shows up to four designs at one small width, pixel for pixel, the way a screen with one device pixel per CSS pixel would show them. Sharper screens help a little. Squint, step back, or look away and glance back. The version you can read in that glance is the better poster.

Two last things travel with the file. Pictures of text need a text alternative, and the W3C’s images tutorials show that when an image is mostly words, the alternative is usually those same words, so the export panel keeps an alt text field next to the button.

The exported file should carry pixels, not history. A PNG is a sequence of named chunks and a JPEG a sequence of marked segments, with application segments reserved for extra data; a WebP keeps its colour profile and metadata in chunks of their own. This tool writes its own PNG with only the header, image data and end chunks, compressed with the browser’s built-in zlib stream, removes metadata segments and chunks from the browser’s JPEG and WebP output, and reads every file back to list what is in it.

What the method cannot do is worth saying plainly. It cannot cut a person out of a photograph; you can place a picture that already has a transparent background. It measures the fonts on your device, so a different machine may give slightly different numbers. And it cannot tell you whether a stranger will care. It can only make sure that, if they glance, there is something there to read.