Online Tool Store
· 4 min read
How to Test a Thumbnail at Real Display Sizes
Heshan Fernando
Co-founder & COO
Thumbnails are designed at 1280 × 720 and consumed at a fraction of that. On a phone in search results, a thumbnail can be around a hundred pixels wide — roughly the size of a postage stamp — and that’s the version that decides whether anyone clicks.
Everything about designing one follows from that mismatch. The bit you spent an hour on at full size is often the bit that disappears first.
What actually survives at small sizes
Three things read reliably when a thumbnail is scaled down: a face, a strong shape, and three or four very large words.
Everything else — a subtitle, a logo in the corner, a screenshot of a spreadsheet, a border — turns to texture. Not blurry, exactly. Just visually present without communicating anything.
The reason faces work so well isn’t marketing folklore; it’s that human vision is exceptionally good at recognising a face from very little information, including at low resolution and at an angle. A face with a clear expression survives scaling almost intact.
Text survives only if it’s absurdly large. A rule that holds up: if the words don’t read at 25% zoom on your monitor, they won’t read in a feed.
Why people get stuck here
- Designing at 100%. Everything is legible at full size, which tells you nothing.
- Too many words. Five or six words at a size that fits them all means none of them are readable.
- Ignoring the theme. Viewers control light or dark mode, and a thumbnail with a white background dissolves into a light feed.
- Forgetting overlays. Duration badges, progress bars and “watched” states cover parts of the image in real placements.
What a good thumbnail does at 100 pixels
Three or four words, enormous
Cut words rather than shrinking type. Every word removed lets the remaining ones grow, and the size of the type is what determines whether any of it reads.
One clear subject
A face, an object, or a single strong shape. Two competing subjects at thumbnail size become one confusing blob.
Edges that hold against both themes
High contrast at the frame’s edges keeps the thumbnail distinct from the background, whether the viewer is in light or dark mode.
| Placement | Approx. Width | What Reads |
|---|---|---|
| Desktop feed | ~360 px | Face, 3–4 words, main subject |
| Sidebar | ~168 px | Face, 2–3 words |
| Mobile search | ~106 px | Face and one word, at best |
Common mistakes to avoid
- Adding a subtitle line under the main text — it’s illegible everywhere it matters.
- Putting the logo in a corner that the duration badge covers.
- Using a screenshot as a thumbnail; UI detail vanishes completely at small sizes.
- Checking the design on a large monitor and never on a phone.
- Relying on a thin outline or drop shadow for contrast, both of which disappear when scaled.
How to do it with Thumbnail Preview Tester
The Thumbnail Preview Tester renders your image at the sizes platforms actually use, in your browser.
- Upload the thumbnail you’re about to publish.
- Compare it at feed, sidebar and mobile search sizes.
- Check both light and dark backgrounds — viewers choose, you don’t.
- If the text fails at the smallest size, cut words rather than shrinking type.
- Re-test after every edit; small changes matter more at small sizes than large ones.
YouTube’s thumbnail guidance covers the upload requirements. Other social sizing tools are in the tools directory.
Frequently asked questions
How many words can a thumbnail carry?
Three or four, set very large. The smallest common placement is around a hundred pixels wide, and more words means smaller type, which means nothing reads.
Does the light or dark background matter?
Yes. A thumbnail with pale edges vanishes into a light feed and floats oddly in a dark one. Since the viewer picks the theme, the thumbnail has to work in both.
Is my image uploaded when I preview it?
No. It’s rendered locally in the page for preview only.
Final thought
Design the small version first. Make something that works at a hundred pixels, then check that it still looks good large — that order produces far better thumbnails than the reverse.