I Built a Free Safe-Area Checker for YouTube Banners
If you have ever uploaded a YouTube banner and watched it get quietly hacked in half on mobile, this post is for you.
I run a small free tool at vidthumb.co that helps creators resize YouTube thumbnails and banners. One thing came up over and over again in feedback: people would upload what they thought was a perfect banner, and three weeks later they would email me saying something was off — usually a social handle cropped out, or their schedule cut off on phones.
After the third "I followed YouTube's guide, why does it look broken" email, I went and actually read YouTube's docs. Then I built a free checker. Here's what I found and what I shipped.
The problem with the YouTube banner spec
YouTube's official documentation says: upload 2560 x 1440 px, PNG or JPG, <= 6 MB, sRGB. That part is clear.
What is not clear is that this one image gets cropped differently on five different device classes:
- Smart TVs and game consoles show the full 2560 x 1440 image.
- Desktop shows a strip across the middle, with whitespace on top and bottom.
- Tablets show a slightly tighter version of the desktop strip.
- Mobile shows only a 1546 x 423 central zone, biased toward the upper-middle.
- Embedded players (channel shelf, comments overlay) crop tightest.
The "safe area" every designer talks about is actually two rectangles stacked inside the canvas:
- Web-safe area: 1546 x 423 px, centered horizontally, biased toward the upper-middle of the canvas.
- TV-safe area: 1235 x 338 px, perfectly centered inside that.
Anything you place outside the larger box (1546 x 423) will be invisible on phones. Anything outside the smaller box will be cropped on connected TVs.
That is not in YouTube's marketing materials. The exact numbers come from the YouTube Data API v3 channelBanners endpoint, which is the only place Google publishes the crop coordinates.
The mistake everyone makes
The single most common failure I have seen across hundreds of submitted banners is this: designers lay out the entire banner at full 2560 x 1440, then upload, then wonder why mobile only shows the middle 31%.
It feels counterintuitive: you tell them "2560 x 1440" and they treat the entire canvas as design real estate. Design and layout software happily puts text at the edges. YouTube happily accepts the upload. But the upload and the rendered display are two different crops, and there is no warning until your viewers quietly do not see half your content.
The tool I shipped
I built a free safe-area checker that takes any image and overlays the three rectangles:
- 2560 x 1440 (full canvas)
- 1546 x 423 (web safe)
- 1235 x 338 (TV safe)
You can drag any banner in and see exactly which elements will survive which crop. No login, no upload to a server (everything happens in the browser), no signup. The whole thing runs client-side so creators can preview their work without handing over their artwork.
What I learned building it
A few notes for anyone building tools in this space:
YouTube's API is the actual source of truth. The marketing help pages are good, but the API reference has the precise crop rectangles. If you are building for YouTube, read the API docs, not the help pages.
CMYK silently breaks on OLED TVs. Browsers export images in sRGB by default. If a designer hands off a banner in CMYK or Adobe RGB, strip the profile and re-export as sRGB before upload, or the reds will look orange and the blues flat on certain smart TVs.
The 6 MB limit is silent. Upload over 6 MB and the form just does nothing — no error message. Always check the file size before clicking "Upload." This is also why I recommend PNG-24 only when you actually need transparency; JPG at quality 92 keeps you under the cap more often.
Smart TVs overscan. Some older Vizio and Hisense models crop an additional 3-5% off the outer edge through overscan. Keep critical background detail at least 50 px from any edge if you care about TV.
The full version, if you want it
This post is the short version. The full safe-area guide, with the spec table, the upload-to-Studio walkthrough, the safe-area template and a downloads section for editors that do not have the official overlay, lives on the vidthumb.co blog.
Try the checker
If you have a banner ready, drop it into vidthumb.co — you will see all three rectangles overlaid in under a second. If something important is outside the safe area, the overlay shows you exactly where, and which devices it disappears on.
No signup, no email, no analytics fingerprinting. Just the rectangles on your image.
If this saved you a re-upload cycle, I would love a heart or a follow. I write about the small, mostly-boring details of running a single-developer SaaS in the open.
Top comments (0)