How to use the safe zone preview
- Choose the frame (vertical 9:16, wide 16:9, 4:5 or 1:1) and upload your image. Without one, a sample screen is shown.
- The red areas may be covered or cropped by app buttons, titles and captions. Keep text and faces inside the green dashed line.
- Check the small-size previews and grayscale view to see whether text reads, then save the check with "Save preview PNG".
A thumbnail composition and layout guide for a better click-through rate
A thumbnail is the first image people see in a video list and plays a big part in whether they click. But in a list it is very small, the video duration overlaps the bottom right, and it is even smaller on a phone. So a composition that looks good on a big screen often cannot be read at its real display size. Whether it works at a glance at small sizes is the first test.
The basis of an effective composition is simplicity. Place the main person or object large, keep text to one line of up to about three words, and use a bold typeface with strong contrast against the background. Keep important elements away from the bottom right where the duration appears and slightly inside the edges. Faces are often used large so the expression is visible. The small view and grayscale view of this tool help you check these points quickly.
Safe zones for short-form video
In vertical videos such as Shorts, Reels and TikTok, the app overlays buttons, titles and account information on the video. Usually buttons such as like and comment line up on the right, the title, description and music information are at the bottom, and a status bar or tabs are at the top. Captions or logos placed there can be covered, so the center area is safer.
Each app lays out its screen differently, changes it often, and often does not publish official pixel specifications. So when you post the same video to several apps, it is easier to use the most generous margins as the basis. This tool shows such generous values as a starting point and lets you change the numbers. Before posting, check once more in the app's real preview.
What to check while making it
- Keep text inside the safe zone.
- Write thumbnail text short and bold.
- Shrink to about 120 to 170 px wide and check it reads.
- Check that the text is clear in grayscale too.
- Do a final check in the real app preview before posting.
FAQ
What is the basis for the safe zone?
TikTok, Reels and Shorts do not publish official pixel specifications, and sources differ, for example 100 to 250 px at the top, 250 to 570 px at the bottom and 90 to 200 px on the right. So this tool starts from the generous side (top 13%, bottom 25%, right 17%) and lets you change the values.
Why check a thumbnail at small sizes?
In YouTube lists thumbnails appear very small, and the video duration covers the bottom right. Text that reads on a big screen can smear when shrunk, so check that it still reads at about 120 to 170 px wide. Less text, bold type and strong contrast with the background are safer.
Why view it in grayscale?
Even with different colors, text blends into the background when their brightness is close. If the text stays clear in grayscale, the brightness contrast is enough. It is a simple way to check that people with different color vision, or viewers in a dark setting, can read it.
Notes & limitations
The areas in this tool are reference values rather than official specifications, and app layouts can change. App logos and real screens are not used; generic shapes stand in for them. Images are processed only in the browser and never sent to a server.