How to Preview YouTube Thumbnails at Every Size Before Uploading
Your thumbnail looks great in Photoshop at full screen. But on YouTube, it will appear at four different sizes — and the text you spent 20 minutes perfecting might be unreadable at the smallest one. Here's how to check before you publish.
You spent 45 minutes designing a thumbnail in Canva. Bold text, vibrant colors, a clear focal point. It looks amazing at 1280×720 on your 27-inch monitor. Then you publish the video and see it in the YouTube sidebar — where your thumbnail is the size of a postage stamp and your carefully crafted headline is six pixels of blur. Nobody clicks. Nobody reads it. Your thumbnail failed at the size that actually matters.
A YouTube thumbnail preview tool shows your design at all four sizes YouTube uses — before you upload. Here is how to use it and why thumbnail readability at small sizes is the difference between a click and a scroll-past.
The four sizes your thumbnail appears at
YouTube renders your thumbnail at multiple sizes depending on where it appears:
- Full HD (1280×720): The size you designed at. Appears in the video player when embedded, and in some search result layouts on desktop. This is the only size where fine detail is visible.
- Search results (336×188): The standard desktop search result thumbnail. Your text needs to be readable at this size. If it is not, people searching on desktop will not click.
- Sidebar suggested videos (168×94): The smallest size, used in the sidebar on desktop and in some mobile layouts. At this size, faces and high-contrast shapes are visible but text is usually not. Do not rely on text for the sidebar thumbnail — use a recognizable face or bold color block instead.
- Mobile search (roughly 160×90 on small screens): Similar to the sidebar size. Most YouTube views are mobile now, so this is the size that matters most.
The free thumbnail preview tool shows your uploaded image at all four sizes simultaneously. You see exactly what viewers will see — not what you see in your design software at 400% zoom.
How to use the preview tool
Upload your thumbnail (or drag and drop it onto the tool). The tool displays it at all four YouTube sizes side by side. You can also overlay text on the image to test readability — type your planned title, adjust the font size and position, and see if the words are legible at the smallest sizes.
The overlay feature is not for designing the thumbnail (use Canva, Photoshop, or Figma for that). It is for answering one question: "can people read my text at 168×94?" If the answer is no, go back to your design tool and make the text bigger, bolder, or simpler.
Once you are happy with the preview, export your final thumbnail from your design tool and upload it to YouTube as normal. The preview tool does not save or publish anything — it is purely a testing sandbox. Our image to Base64 converter handles a different image workflow — encoding images for embedding directly in HTML and CSS.
Thumbnail rules that hold at every size
One focal point. A face, an object, a bold shape. Not three faces and an object and some text and a logo. At 168×94, multiple elements merge into visual noise. One strong focal point survives the size reduction.
Maximum five words of text. And those five words should be large enough to read at 336×188. If you need more text, your title should carry the extra information. The thumbnail is the hook, not the explanation.
High contrast between subject and background. Your color contrast checker is useful here — check that your text color contrasts against your background at WCAG AA minimum. A thumbnail with low contrast text looks muddy at small sizes even if it looks fine at full resolution.
Faces outperform objects. This is backed by YouTube analytics across millions of videos. A human face making eye contact with the viewer consistently gets more clicks than a product shot, a landscape, or an abstract graphic. If your video features a person, put their face on the thumbnail. If it does not, use the most visually striking frame from the video.
No important content in the bottom-right corner. YouTube overlays the video duration timestamp there. Anything in that zone gets covered by a white-on-black timestamp box.
The most common thumbnail mistake
Designing at full resolution and never checking the small sizes. Every designer does this once. They spend an hour on a thumbnail, export it, upload it, and only see the problem when the video goes live and the CTR is 2% instead of the expected 6%. The preview tool prevents this by forcing you to see all four sizes before you commit.
Next video, run your thumbnail through the thumbnail preview tool before you upload. It takes 30 seconds and it catches the readability problems that cost you clicks. If you are working on the visual side of your channel, our guide to using color converters in your design workflow covers another tool that helps with thumbnail color selection.
Tools mentioned in this article
YouTube Thumbnail Size Tool
Preview how your thumbnail looks at different sizes — full HD, search results, and sidebar. Overlay text on your image to test readability. Includes size guide for best click-through rates.
Image to Base64
Convert any image to a Base64 data URI string. Drag and drop, get the encoded string with the correct MIME type prefix. Copy directly into CSS or HTML.
Color Contrast Checker
Check WCAG 2.1 contrast ratios between two colors. Ensure your text meets AA and AAA accessibility standards with instant pass/fail results.
