ThumbProof
Give every thumbnail one focal point that covers roughly 25–45% of the frame. If it is a face, crop tight so the face fills at least 10–15% of the image, show one clear expression, and keep good contrast around the eyes and mouth. Place it on the left or center third, away from the bottom-right corner, and confirm with a squint test and a detail heatmap that it is the first thing the eye finds.
Why a single focal point matters
A feed is a grid of competing images. The eye jumps between them in quick fixations and stops only where something clearly stands out. A thumbnail with one dominant shape gives the eye a landing point; a thumbnail with five equal elements gives it nothing to hold on to, so it moves on.
Studies of how people scan web pages describe this pattern: people do not read every element, they scan for signals and skip the rest. At 168×94 pixels the effect is stronger, because small details disappear and only the largest, highest-contrast shape remains.
“Users often read Web pages in an F-shaped pattern”
F-Shaped Pattern of Reading on the Web — Nielsen Norman Group
How big the face or subject should be
Size is the single most important factor. A face that fills 3% of the frame becomes a few pixels wide at sidebar size, too small to read an expression. ThumbProof warns when detected faces cover less than 4% of the frame and treats a busiest region of 5–60% as a healthy main subject.
| Face area (share of frame) | At 168×94 | Expression readable? | Verdict |
|---|---|---|---|
| < 4% | Face ~12 px wide | No | Too small |
| 4–10% | ~20 px wide | Sometimes | Borderline |
| 10–25% | ~30–45 px wide | Yes | Good |
| 25–45% | ~45–60 px wide | Clearly | Strong |
| > 60% | Fills the card | Yes, but no room for context | Use with care |
For a non-face subject such as a product, a dish or a result, the same ranges apply to the object’s silhouette.
Expressions that read at small sizes
Subtle expressions disappear when an image is scaled down. Wide-open eyes, an open mouth, raised eyebrows and a strong head tilt survive; a slight smile or a thoughtful look does not. That does not mean every thumbnail needs an exaggerated face, but the expression should be readable at sidebar size and should match the tone of the video.
Light matters as much as the expression. Shoot or edit so the face is brighter than the background, with clear shadows that define the eyes and mouth. Flat, frontal light makes faces look like blank ovals once they are small.
- Clear eyes and mouth
- Face brighter than background
- Expression matches the video’s tone
- One face is stronger than three
Placement: thirds, gaze and the corner
Place the focal point on the left or center third of the frame. That keeps it away from the duration badge in the bottom-right and leaves the top area for two or three words. If the person looks toward something—an object, the text, a result—the viewer’s eye tends to follow that gaze, so face the subject into the frame rather than out of it.
Avoid putting the face at the very bottom where the progress bar and rounded corners cut it, and avoid placing text over the eyes or mouth.
| Position | Good for | Watch out for |
|---|---|---|
| Left third | Face + text on the right-top | Keep text out of the badge corner |
| Center | Single object, symmetry | Text must go above or below |
| Right third | Reading flow from text to face | Face can collide with the badge |
Build and check a focal point in five steps
- 01
Choose the subject
Pick the one face, object or result that tells the story of the video.
- 02
Crop tight
Scale it until it covers 25–45% of the frame; for faces, at least 10–15%.
- 03
Light and separate
Make the subject brighter than the background and add an edge or rim light.
- 04
Place it on a third
Left or center, facing into the frame, clear of the bottom-right corner.
- 05
Verify
Run the squint test, open the detail heatmap and read the subject row in the audit breakdown.
How ThumbProof detects faces and subjects
Some browsers expose a built-in face detector through the Shape Detection API. When it is available, ThumbProof uses it locally to count faces and measure how much of the frame they cover. When it is not, the tool estimates the main subject from edge density: it splits the image into a 16×9 grid, finds the largest connected area of high detail and reports its share of the frame.
Both methods run entirely in your browser; no image is sent anywhere. The estimate is a guide, not a verdict. A busy background can look like a big subject to an edge detector, which is why the heatmap view is useful: it shows exactly where the detail is.
When there is no face
Plenty of strong thumbnails have no person at all: a finished product, a dramatic before/after, a map, a chart with one striking number. The rule is the same—one subject, large, with contrast—but you have to create the emotion through composition, color and the words instead of an expression. A before/after split works best when the difference is visible in grayscale at 168×94.
Supporting elements without losing focus
A single focal point does not mean a single element. Most strong thumbnails have one dominant subject plus one supporting element: a word, an object, an arrow or a second, smaller face. The supporting element should be clearly smaller—about a third to half the size of the main subject—and should point back to it through gaze, position or color.
Background matters too. A blurred or darkened background pushes the subject forward; a sharp, detailed background competes with it. If you shoot your own footage, use a wide aperture or add blur in editing, and lower the background brightness by 20–40% compared with the subject.
| Element | Relative size | Role |
|---|---|---|
| Main subject | 100% | Where the eye lands first |
| Supporting element | 30–50% | Adds context or a twist |
| Background | Soft, darker | Frames without competing |
Consistency across a series
If you publish a series or a regular format, reuse the composition: the same side for the face, the same position for the text, the same accent color. Returning viewers learn the pattern and recognize your videos faster in a crowded feed. Change the expression, the object and the words from video to video, but keep the skeleton.
At the same time, avoid using the same face shot repeatedly. If every thumbnail shows the same surprised expression, viewers stop seeing it as a signal. Shoot several expressions during each recording session and pick the one that matches each video’s story.
- Same layout skeleton for a series
- Vary expressions and objects
- Shoot several options per video
Worked example: a group shot versus a close-up
A vlog thumbnail shows four friends on a beach, small in the frame, with a sunset behind them. Each face covers about 1% of the frame. The heatmap shows detail spread evenly across the horizon, and the subject estimate reports 68%, meaning there is no single focal point.
The redesign crops to one friend laughing, face covering 18% of the frame, placed left, with the sunset as a soft background. The subject estimate drops to 31% and the face is readable at sidebar size.
| Measure | Group shot | Close-up |
|---|---|---|
| Largest face | ~1% of frame | 18% of frame |
| Subject estimate | 68% (spread out) | 31% (clear) |
| Squint test | No clear shape | Face stands out |
| Readable at 168×94 | No | Yes |
Common focal point mistakes
Faces too small
Wide shots look great full size and unreadable in the feed.
Several equal subjects
Three faces of the same size split attention. Make one dominant.
Text over the face
It hides the most readable element. Move text beside it.
Face in the badge corner
The duration badge can cover the chin or eyes.
Flat lighting
Without shadows the face turns into a blank shape at small sizes.
Mismatched expressions
A shocked face on a calm tutorial sets the wrong expectation.
Video Thumbnail Size, Resolution, File Limits and Safe Zones
High-CTR Thumbnail Checklist: 7 Visual Principles That Get Noticed
Title Truncation by Device: Pixel Widths, Not Character Counts
Thumbnail Color and Contrast: Standing Out in Dark and Light Feeds
Thumbnail Text: How Many Words, How Big, and Where to Put Them