Video Thumbnail Design

You make the image that decides whether anyone watches the video. A good thumbnail shows one idea, a real emotion or stake, at most four words that add to the title rather than repeat it, and it reads at the size people actually see it: a few hundred pixels on a phone, 168 px in a sidebar. You build it in HTML and CSS, render it with headless Chromium, and check it small with your own eyes before the owner sees it.

When to use

• "Make the thumbnail for this video" (with the video file, a link the owner can share, or frames).
• "Give me three thumbnail options to test."
• "Our thumbnails all look the same and nobody clicks; redo the last one."
• "Make a poster frame for the video on our site", "podcast episode art".
• After a launch or explainer video is rendered and needs its cover.
• A video in the owner's content plan is about to be published without a custom thumbnail.

What you need

• The video's title (final or working) and its one-sentence payoff: the thumbnail completes the title, so you need both.
• Source imagery: the video file (to grab frames), the creator's photos, or product shots. A generated image only for backgrounds, objects or concepts, never as the creator's face.
• The channel's look: two or three existing thumbnails, its fonts and colours. Ask with clarify if there are none and it matters.
• Your computer set up: run the check in references/setup.md first, every time (installs outside /home/user are lost when the computer is rebuilt); step 7 there installs background removal. Copy scripts/render.py, scripts/gfx_check.py, scripts/get_font.py and references/templates/subject-and-words.html into the job.

Method

1. Split the job between title and thumbnail.
   • Write the title and, next to it, what the thumbnail adds: the face and emotion, the result, the object, the contrast.
   • If the thumbnail would repeat the title, change the thumbnail.
2. Choose the concept in two words
   • (for example "shocked face plus broken laptop", "$4 vs $400 split", "before and after").
   • The five decisions, specs and player overlays: references/thumbnail-craft.md; seven tested layouts with coordinates: references/thumbnail-patterns.md.
3. Get the subject.
   • From the video: make a contact sheet (ffmpeg ... -vf "fps=1/2,scale=320:-1,tile=6x5", in references/thumbnail-craft.md), look at it with vision_analyze, then grab the best moment at full resolution. Open eyes, clear expression, no motion blur.
   • Cut it out: ~/.venvs/rembg/bin/rembg i -m u2net_human_seg frame.png subject.png for people, -m isnet-general-use for objects. Composite the cut-out on dark and light backgrounds and look at the edges.
   • Background or concept art: image_generate with aspect_ratio landscape, described with a simple, low-detail area where the words go, no text, no logos.
4. Build it from subject-and-words.html or from scratch at 1280 x 720:
   • Subject large (often 40 to 60% of the frame), bold crop, on one third; words on the other.
   • 0 to 4 words, heavy display face, 120 to 170 px, 2 or 3 lines, white or the channel colour with a dark stroke or shadow; one word may take the accent colour.
   • Separation: a value or colour contrast between subject and background, plus a rim glow or shadow on the cut-out.
   • Keep the bottom-right duration badge area (about 1130,650 to 1270,710) and the bottom edge empty.
5. Render:
   • ~/.venvs/gfx/bin/python tools/render.py thumb.html out/thumb-a.png --size 1280x720.
   • If the PNG is over the platform's limit (YouTube has stated 2 MB; confirm), save as JPEG quality 90.
6. Check small, then fix.
   • tools/gfx_check.py preview out/thumb-a.png --widths 320,168, and vision_analyze both: the words readable at 168, the focal point first, the emotion legible.
   • tools/gfx_check.py zones out/thumb-a.png --box 1130,650,1270,710: nothing important under the badge.
   • tools/gfx_check.py contrast for the word colour against the background behind it (3:1 at the least; these are huge words, but aim higher).
   • vision_analyze the full size for cut-out halos, typos, an odd crop of a face, anything misleading.
7. Make variants for testing.
   • When the channel can test (YouTube Test & Compare takes up to three): change one big thing per variant (face vs object, words vs none, background colour).
   • Name them -a, -b, -c.
8. Hand over.
   • With show_card (type media) showing each variant and its 168 px preview, which one you recommend and why in one sentence, and the file paths.
   • Uploading it is the owner's call, or follow the publishing skill they use if they ask you to.

Output

• out/thumb-a.png (and -b, -c when testing), 1280 x 720, under the platform's size limit.
• The HTML source, fonts and cut-outs next to them, so a variant can be changed in minutes.
• A note: the concept in two words, how it complements the title, which variant you would lead with.

  Title:     I tried every budget espresso machine
  Concept:   face plus cheap machine (variant a)
  Adds:      the reaction and the object; the title carries "every budget"
  Words:     "$40?!" (a), none (b), "Worth it?" (c)
  Lead with: a; b is the control for Test and Compare
  Checks:    readable at 168 px, badge area clear, cut-out edges clean
  

Checks before you finish

• 1280 x 720 exactly (render.py prints the size), 16:9, file within the platform limit.
• 4 words or fewer, none repeating the title, spelled correctly.
• At 168 px wide the words read and the subject is clear.
• Nothing important under the duration badge, at the bottom edge or in the top-right hover icons.
• The creator's face is real (from their footage or photos); nothing shown is absent from the video.
• Cut-out edges clean on the final background.

Pitfalls

• Repeating the title in the image. Wasted space; add what the title can't say.
• Too many elements. Three objects, two faces and a sentence read as nothing at 168 px.
• Thin or small type. Use a heavy face at 120 px or more, with a stroke or shadow against busy areas.
• A generated face standing in for the creator, or imagery the video doesn't contain. It misleads viewers and breaks platform policy.
• Low-separation cut-outs. A dark-haired subject on a dark background disappears; add a rim light or change the background value.
• Text under the duration badge. Check the zones overlay every time.
• Variants that differ in small ways. A test only teaches when the variants differ in one big idea.
• Designing at full size only. Judge it at 320 and 168 px, where it is actually seen.
• Changing the channel's look every video. Keep the series system (type, colour, layout) unless the owner wants a rebrand.