Safe areas, explained

A “safe area” on a thumbnail is the part of the image that no interface element is drawn over. Video players put chrome on top of thumbnails: a duration badge in the bottom-right corner, hover controls in the top-right, and a watched-progress bar along the bottom edge. The safe-area checker on the size guide draws those zones over an image you load, so you can see which parts of your artwork would sit under them. This guide explains where the zones come from, exactly how big they are at common sizes, how to read the overlay, and what the checker cannot know.

One sentence carries the whole page: the zones are a convention, not a specification. YouTube publishes no overlay spec, the pixels shift with every redesign, and every zone the checker draws is labelled “typical” for that reason. Every figure below is computed at build time by the function the checker runs, so this page and the boxes on screen cannot disagree.

Three zones, one convention

The engine behind the checker is a single pure function, overlayZones(width, height). Given an image size it returns 3 rectangles, each with an id, a label, and a pixel position measured from the image’s top-left corner. Its header note states the sources of the convention plainly: duration badges render roughly three to four characters wide in the bottom-right; hover controls — watch-later and queue buttons — stack in the top-right; the resume-watching bar hugs the full bottom edge. None of that is a published measurement of any interface; it is a shared pattern modelled at proportions chosen to be typical rather than exact.

That is why the labels the checker prints are “Duration badge (typical)”, “Hover controls (typical)”, “Watched-progress bar (typical)” — each carrying the word “typical” — and why the size guide says to treat the boxes as “keep important content out of here” rather than as pixel-accurate chrome. The methodology page draws the same line between conventions and cited official figures.

The proportions, recovered from the engine

The zones are defined as fractions of the frame, not as fixed pixel counts, so the badge zone is the same share of a 640-pixel-wide image as of a 3840-pixel-wide one. The engine does not export those fractions directly, but they can be recovered exactly by asking it for the zones of a 1000×1000 frame, where every fraction lands on a whole pixel:

Two rules turn those fractions into rectangles. Each dimension is multiplied by the frame size and rounded to the nearest whole pixel. Then the zone is anchored: a right-anchored zone starts at width − zone width, a bottom-anchored one at height − zone height, the top-right zone starts at y = 0, and the full-width bar starts at x = 0. The badge and the bar overlap in the bottom-right corner; the checker draws both, and content under either is content under an overlay.

The zones at common export sizes

Here is what that produces for four 16:9 frames: 640 pixels wide (the minimum upload width on Google’s help page, verified July 25, 2026), 1280×720 (the largest size YouTube serves back, maxresdefault), 1920×1080, and 3840×2160 (the resolution guidance on the same help page). The heights come from the aspect engine — width × 9 ÷ 16 — and every one of them is a whole pixel, which is what makes these the standard frames.

Read down the table and the proportion is constant; only the pixel count changes with the frame. At 1280×720, the reference frame, the region no zone touches is the left 998 pixels of the frame down to y = 619, plus a right-hand band between y = 216 (where the hover zone ends) and y = 619 (where the badge zone begins). Those figures are derived from the engine’s output, not typed in, so if the convention were ever retuned they would change with it.

The same zones at display size

Export size is not display size. The thumbnail tester renders 4 surfaces at typical display sizes — 320×180, 168×94, 246×138, 160×90 pixels — and labels every one of them typical, not a spec, because platforms shift them by a few pixels with each redesign. Running the same zone function at those sizes shows how small the overlays become:

Two details matter. First, only 2 of the 4 typical display sizes are exactly 16:9: the sidebar row’s 94-pixel height wants 167.11 pixels of width at 16:9, which the aspect engine flags as rounded, while the mobile row’s 90-pixel height wants exactly 160. That is what “typical” means — measured conventions, with the odd pixel of drift built in. Second, the badge zone on the smallest surface is 35×13 pixels: the same proportion, a very different number of pixels, which is why the zones are proportions rather than pixel counts. The guide to reading the thumbnail tester covers the small-size side of that story.

How to read the checker’s overlay

When you choose a file, the checker decodes it locally with the browser’s own image decoder to learn its pixel width and height, discards the bitmap, and hands the two numbers to overlayZones. The rectangles come back in pixels; the checker converts each to a percentage of the image so the boxes scale with the responsive preview, then draws them over the image with their “(typical)” labels. Nothing is uploaded; the image is shown from an in-memory object URL and discarded when you leave the page.

Below the preview, a status line reports what the aspect engine found: the pixel dimensions; whether the image is exact 16:9 or, if not, its simplified ratio with a note that players will crop or letterbox it; whether the width meets the 640-pixel minimum; and whether the file is within the 2 MB mobile upload limit (both figures from Google’s help page, verified July 25, 2026). The status line says whether the file is acceptable; the overlay says which parts of it typically get covered.

Reading the boxes is simple: anything under a box is content an interface element may be drawn over on some surface, some of the time. The checker draws all 3 at once and does not predict which will be present, on which surface, for which viewer — so the mechanics-only reading is the useful one: keep the content you need seen out of all of them.

Three common misreadings

“The box is where YouTube’s badge is.” No — the box is where a duration badge typically lands, at typical proportions. It is not traced from any current interface, and the platform publishes none to trace from. Treat its edge as a margin of caution, not a measurement.

“It says my image is not 16:9, but I exported at 16:9.” Check the width. At 1000 pixels wide, 16:9 wants 562.5 pixels of height — not a whole number — so an editor that rounds to 563 produces a 1000×563 file whose simplified ratio is 1000:563, which the ratio check correctly reports as not 16:9. The consequence is tiny: a 16:9 cover slot hides 0.1% of that file’s height. The aspect ratio calculator shows the rounding flag before you export; widths divisible by 16 avoid it.

“The zones are drawn, so they apply.” They are drawn on the frame you loaded. If that frame is not 16:9, a 16:9 surface crops it first — and the zones on the cropped frame are not where the checker drew them. The tester’s crop function makes the effect concrete for common upload shapes:

For the square and vertical files a large share of the image never reaches the slot, so the corner the badge zone marks on the original is not the corner of what is shown. Load a 16:9 export and the boxes mean what they say.

What the checker cannot know

It cannot know what the interface looks like today. The zones are proportions fixed in a tested module, and they change only when the module changes — not when a platform ships a redesign. That is a deliberate trade: a checker that quietly retuned itself would be claiming knowledge it does not have. When a redesign moves the chrome, the labels stay “typical” and the module is revised in the open, with its tests.

It cannot know which surface your thumbnail will appear on, whether a video will be partly watched, or whether a pointer will hover. It never contacts YouTube — only the pixels of the file you chose are involved — and it makes no judgement about the artwork; it reports geometry. Whether something important sits under a box is for you to decide by looking at the overlay.

The one piece of advice the mechanics support

The mechanics point to exactly one piece of advice about safe areas, and this site stops there: keep the content you need seen out of the typical overlay zones. Around it sit the official rules, a different category of fact because they come from Google’s help article “Add video thumbnails”, re-checked on July 25, 2026: export at 16:9, at least 640 pixels wide, and — the safe intersection of every upload path — under 2 MB. The size guide tabulates those figures with their citation and hosts the checker; a 16:9 export at 1280×720 or larger, loaded there, is the case the zones were built for.

Frequently asked questions

Images you load into the safe-area checker are processed locally in your browser and never transmitted; the zone geometry, ratio, and crop figures on this page are computed at build time by the same engines. See the methodology page for how the engines are tested. ThumbnailPro is not affiliated with YouTube or Google.