An image overlay for YouTube is a second graphic — typically a logo, watermark, badge, intro card, or branded corner element — placed at a chosen position, size, and transparency on top of a still frame, then exported as a single PNG that you can drop into a video editor or use as a YouTube thumbnail. Because YouTube itself does not let you layer PNGs onto an already-published video, the practical workflow is to bake the overlay into a flat image on your own computer and import that result into your editing timeline, your intro sequence, or your thumbnail designer. The Image Overlay tool does exactly that step locally: it combines two static images in your browser and downloads a full-resolution PNG without uploading either file, keeping the base image's exact pixel dimensions while applying the overlay on top.
Creators reach for image overlays on YouTube for several recurring jobs: stamping a logo in the corner so a clip still reads as theirs when reshared, layering a "Subscribe" badge over an intro card, building a clean thumbnail composite where the graphic sits at a fixed position over a hero shot, or adding a semi-transparent lower-third to a still used as an end-screen element. Each of these jobs shares the same mechanics — a base image that defines the canvas, and a second image whose position, scale, and opacity the creator controls. Understanding those three controls is the difference between a clean, intentional overlay and one that fights the frame.
What Counts as an Image Overlay on YouTube
YouTube itself exposes very limited overlay features inside YouTube Studio — most notably End Screens and Cards, which sit on top of the player at playback time. Those are configured inside YouTube and rendered in the web player, not baked into your source video. For anything else — a permanent corner logo, a watermark, a branded intro card, a thumbnail composite — the overlay has to be created before upload, either inside a video editor or by composing a still PNG that is then placed into the timeline.
This is the gap the Image Overlay tool fills. Rather than opening a full editor and rendering a video frame, you produce a single PNG with the overlay already positioned and scaled. That PNG can then be imported as an image layer in Premiere, Final Cut, DaVinci Resolve, or CapCut, or dragged straight into YouTube Studio's thumbnail designer. The base image sets the output dimensions exactly: a 1920×1080 base produces a 1920×1080 PNG, a 1280×720 base produces a 1280×720 PNG, and so on. No silent resizing, no hidden export cap, no pixel-budget shrinking behind a CSS preview window.
Prepare Your Base Frame and Overlay Graphic
Before opening the tool, decide what each image is supposed to be. The base image is the canvas — for YouTube that almost always means a still frame captured from your video at 1920×1080 or 1280×720 (the two most common YouTube player resolutions), or a thumbnail-sized image if you are building a thumbnail composite. Capture the still from your editor at full resolution; do not downscale it ahead of time, because the tool preserves the base's natural dimensions exactly.
The overlay image is the graphic you want on top. For a YouTube use case this is usually one of:
- A transparent PNG logo sized to a recognizable portion of the frame (commonly 10–20% of the base width).
- A "Subscribe" or social-handle badge saved as a PNG with its own transparency.
- A lower-third strip with channel name text, exported from a design tool with no background.
- A watermark wordmark with reduced opacity.
Both files can be JPG, PNG, or WebP and each may be up to 25 MiB on disk. PNG is the most useful format for the overlay because it can carry transparent pixels that survive the composition unchanged. If your logo is currently a JPG with a white box around it, convert it to PNG first and remove the background, or the white box will become a visible block on top of your video frame.
Add the Overlay to a YouTube Frame
The full composition takes three user actions after the files are loaded, and the underlying render is deterministic — the same inputs always produce the same PNG.
- Choose the base image. Pick the still frame from your YouTube video (or the thumbnail background). The tool reads its natural dimensions; a 1920×1080 base is what will be exported.
- Choose the overlay image. Pick the logo, badge, lower-third, or watermark graphic. Its transparency is preserved — a PNG with a transparent background stays transparent in the result.
- Pick the position. Select center, top-left, top-right, bottom-left, or bottom-right. YouTube creators usually pick a corner for logos and watermarks, and center for branded intro cards.
- Set the scale and opacity. Scale runs from 10% to 200% of the overlay's own natural size. Opacity runs from 0% to 100%. A common starting point for a YouTube corner logo is 15–25% scale and 70–90% opacity; for a transparent watermark try 20% scale and 30–50% opacity.
- Create the PNG. The tool clears the canvas, draws the base at full size with alpha 1, saves the drawing state, applies your selected overlay alpha, draws the scaled overlay at the planned coordinates, then restores the state.
- Inspect and download. Check the preview, then download. The downloaded PNG has exactly the base image's pixel dimensions, so it slots straight into a 1080p timeline or a YouTube thumbnail designer without further sizing.
If the preview looks wrong, change the position, lower the scale, or raise the opacity and re-run — the previous result is automatically removed before the new one is drawn, so you never end up with stale PNGs cluttering the preview area.
Understanding Position, Scale, and Opacity
Three controls govern the result. Each one is independent, and each one applies only to the overlay; the base image is never resized by any of them.
| Control | Range | Effect on overlay | Effect on base |
|---|---|---|---|
| Position | Center, top-left, top-right, bottom-left, bottom-right | Sets the x, y coordinates where the overlay's top-left corner is drawn | None |
| Scale | 10%–200% of the overlay's natural size | Multiplies both width and height by the same factor; aspect ratio preserved | None |
| Opacity | 0%–100% | Multiplies the overlay's contribution by the chosen global alpha; existing transparency stays transparent | None |
Scale is measured against the overlay's own natural dimensions, not the base. A 50% scale on a 400-pixel-wide logo draws it at 200 pixels wide, regardless of whether the base is 1280 or 3840 pixels across. Worked example: a logo with a natural width of 480 pixels at 20% scale produces 480 × 0.20 = 96 pixels in the output PNG. If a scaled overlay is larger than the base, the part outside the base canvas is intentionally clipped rather than triggering a base resize — lower the scale or edit the overlay source if you need to keep important content visible.
For odd combinations, the math is explicit. Center subtracts the scaled overlay width and height from the base width and height and divides each difference by two, which keeps it mathematically centered even at half-pixel offsets. Corners anchor to 0 or to the base edge minus the scaled overlay dimension. This is documented behavior, not a hidden resize.
Bring the Result Into Your YouTube Workflow
Once the PNG is downloaded, the YouTube-side work depends on what kind of overlay you built.
For a corner logo or watermark, import the PNG as an image layer in your video editor and align it to the top-left or bottom-right of the 1920×1080 sequence. Because the base was already the same resolution as your timeline, the layer lines up exactly. Set its duration to the entire clip, lower its track opacity to taste, and export the video.
For a branded intro card or end-screen element, treat the PNG as one image layer placed on a transparent or solid background in your editor. The PNG already carries the corner graphic at the correct position, so no further layout work is needed.
For a thumbnail composite, upload the PNG as a custom thumbnail in YouTube Studio. A 1280×720 PNG will be accepted directly because its pixel dimensions match YouTube's thumbnail spec. If you need to inspect exact pixel colors in the result, the Image Color Picker reads any still PNG locally and returns exact HEX and RGB values without uploading the file.
Format Limits and Privacy Behavior
The tool accepts JPEG, PNG, and WebP for both roles. GIF, SVG, and AVIF are out of scope. Each compressed file may be up to 25 MiB (26,214,400 bytes), and after decoding each image is independently limited to 40,000,000 pixels with no edge longer than 20,000 pixels. Files beyond these limits are rejected with an explicit error rather than producing a partial result.
| Item | Accepted | Limit |
|---|---|---|
| Input formats (base and overlay) | JPEG, PNG, WebP | Up to 25 MiB per file |
| Decoded pixel budget per image | Within tool | 40,000,000 pixels total |
| Longest edge per image | Within tool | 20,000 pixels |
| Output format | PNG | Equals base natural width × height |
| Processing location | Browser only | No upload, no account |
Because the work happens in the browser, neither the original YouTube frame nor the overlay graphic leaves your device. Temporary browser Object URLs are revoked when files are replaced and when the tool unmounts, so reopening the page starts with a clean slate. The downloaded PNG is what you then upload to YouTube or your video editor — the tool itself never reaches the network.
What This Tool Will Not Do for YouTube
The tool is deliberately scoped to a single predictable overlay, so a few jobs common in YouTube workflows are out of scope. There is no rotation, no free dragging, no arbitrary pixel coordinates, no blend modes, no margin controls, no background removal, no multi-layer stack, and no automatic fit-to-base scaling. Each of those is a deliberate exclusion rather than a missing feature, and each is documented in the tool itself.
For motion overlays — animated logos, video-on-video picture-in-picture, traveling lower-thirds — you need a video editor. The Image Overlay tool is the right choice when your overlay is a single static graphic and you want it baked into a full-resolution PNG that drops into any editor or thumbnail designer.
If your overlay needs a specific final pixel width — for example, a YouTube corner logo that must be exactly 96 pixels wide — calculate it from the overlay's natural width and the selected percentage before exporting. A 480-pixel-wide logo at 20% scale produces 96 pixels. Because the result is a fixed PNG and not a live layer, get the math right once and the same file will line up on every clip in your timeline.
Related reading: Bulk JPG to PNG: Convert Multiple Images Locally.