What an image overlay does in a YouTube Short
Image Overlay is a browser tool that places one image (the overlay) on top of another image (the base) and exports a single full-resolution PNG that you can use as a graphic layer in a YouTube Short. The base image defines the canvas size — its natural width and height are preserved exactly in the output, so a 1920×1080 base produces a 1920×1080 PNG. You pick one of five positions (center or any corner), set the overlay scale between 10% and 200% of the overlay's own natural dimensions, and choose opacity between 0% and 100%. Because Shorts use vertical framing, many creators start with a 1080×1920 base and place a small subscribe graphic, watermark, or handle badge in a corner. Everything is processed locally in your browser; neither the base nor the overlay is uploaded, and the temporary object URLs are revoked when you replace a file or close the tab. The result is a single PNG you can drop into YouTube's Short creation flow as a still frame, a Green Screen source, a custom cover image, or a thumbnail layer.
The workflow is the same regardless of where the finished graphic lands. The base is usually a screenshot, a photo, a green-screen key plate, or a clean color background that matches your Short's framing. The overlay is usually a logo, a subscribe button PNG, a watermark, a "follow for part 2" badge, or a small piece of corner branding. Once the composite is downloaded, you treat it like any other image and import it into the YouTube app or your editor of choice.
Files and formats you need first
Image Overlay accepts two static images. Each file can be a JPG, PNG, or WebP, and each may be up to 25 MiB (26,214,400 bytes) on disk. After your browser decodes the file, each image is independently checked against a 40,000,000-pixel budget and a 20,000-pixel maximum on either side — those limits protect browser canvas memory, since a small compressed file can expand into a very large pixel buffer once decoded. If you exceed any limit the file is rejected outright, with no partial output.
A few practical notes for Shorts work:
- Use a PNG or WebP for the overlay if you want transparent edges. A JPG overlay has no transparent pixels, so lowering its opacity blends those pixels with the base image beneath rather than fading into transparency.
- Make the base the size you want the final PNG to be. If you want a 1080×1920 still that you can drop into Shorts, start with a 1080×1920 base. The tool never resizes the base.
- Keep the overlay's natural dimensions in mind when you choose a scale. If your subscribe button PNG is 400×120, then 100% scale draws it at 400×120 — that is the natural size of the overlay file, not 100% of the base width.
Add an overlay to a YouTube Short graphic in Image Overlay
The tool follows three official steps, and each one maps to a control you can see in the browser.
- Open Image Overlay and choose your base image and your overlay image. Both must be JPG, PNG, or WebP, and each must clear the 25 MiB file limit and the decoded pixel budget. Files outside those rules are rejected before any drawing happens.
- Pick a position — center, top left, top right, bottom left, or bottom right — and then set the overlay scale (10%–200%) and opacity (0%–100%). The preview is visually constrained to fit the page, but the rendered PNG uses the base image's real pixel dimensions, not the CSS preview size.
- Create the PNG, inspect the preview at full size, and download the result. When you change position, scale, or opacity, the previous result is revoked and removed; running Create again revokes the old object URL before drawing the new one.
Position, scale, and opacity settings explained
The five positions are deterministic, not free-form drag placement. Top left begins at x=0, y=0. Top right subtracts the scaled overlay width from the base width. Bottom left subtracts the scaled overlay height from the base height. Bottom right performs both subtractions. Center subtracts the scaled dimensions from the corresponding base dimensions and divides each difference by two, so odd differences can produce half-pixel coordinates — that is intentional, because it keeps the overlay mathematically centered instead of favoring one side. The renderer applies these coordinates using MDN's drawImage behavior on a cleared canvas.
| Position | Where the overlay lands |
|---|---|
| Top left | x = 0, y = 0 |
| Top right | x = base width − scaled overlay width, y = 0 |
| Bottom left | x = 0, y = base height − scaled overlay height |
| Bottom right | x = base width − scaled overlay width, y = base height − scaled overlay height |
| Center | x = (base width − scaled overlay width) ÷ 2, y = (base height − scaled overlay height) ÷ 2 |
The following table summarizes the official stops on the scale slider and what each one does.
| Scale | Effect on the overlay |
|---|---|
| 10% | Overlay drawn at one tenth of its natural width and height |
| 50% | Overlay drawn at half its natural width and half its natural height |
| 100% | Overlay drawn at its natural width and height |
| 200% | Overlay drawn at double its natural width and double its natural height; edges can soften from browser interpolation |
A common confusion: 50% does not mean 50% of the base. It means 50% of the overlay's own width and 50% of the overlay's own height, with the aspect ratio preserved. If the scaled overlay ends up larger than the base at the chosen position, the portion outside the base is clipped rather than shrinking the base or repositioning the overlay — that is documented behavior, not a hidden resize.
Opacity behaves like the MDN globalAlpha property. Zero makes the overlay fully transparent while still producing a base-size PNG. One hundred uses the overlay's own alpha unchanged. Intermediate values multiply the overlay's contribution by the chosen global alpha; any transparent pixels already inside a PNG or WebP stay transparent. The renderer's order is fixed: clear the canvas, draw the base at alpha 1, save the drawing state, apply the overlay alpha, draw the scaled overlay, then restore the state.
Using the finished PNG in your YouTube Short
Once the PNG is on your device, there are four common ways Shorts creators use it:
- Green Screen source. Open the YouTube mobile app, start a Short, choose Green Screen, and select the composite PNG as the background plate. Your handle badge or subscribe graphic is already baked into the still, so it stays in place as you record yourself on top.
- Custom cover image. YouTube lets you pick a frame from the Short or upload a custom cover. The base-size PNG matches the Short's resolution, so a 1080×1920 export drops in without resampling.
- Thumbnail layer. If you reuse the same branding across a Short and its thumbnail, the composite gives you a still that matches the video frame, with the badge or watermark pre-positioned.
- Reference plate for an external editor. Import the composite into a desktop editor as a still layer, key it, or stack it above your recorded clip.
If you want a primer on placing one picture on top of another in the browser without covering the Shorts specifics, see how to overlay a picture on a picture in your browser.
Pitfalls that catch first-time Shorts creators
Two failure modes catch first-time users, and both are visible if you inspect the downloaded PNG at full size.
- Scale confusion. People assume 50% means "half the width of the Short." It does not. It means half of the overlay's own natural width. If your subscribe button PNG is 400 pixels wide, 50% draws it at 200 pixels wide on a 1080-pixel Short — much smaller than a corner watermark. Plan the overlay's natural size and the percentage together before you click Create.
- Overlay larger than the base. If the scaled overlay is wider or taller than the base, the selected position can produce negative coordinates and the portion outside the base canvas is clipped. Lower the scale, or shrink the overlay source, before exporting. The base will not resize to fit.
A smaller but worth-knowing limit: only JPEG, PNG, and WebP are accepted. GIF, SVG, and AVIF fall outside the supported set and are not accepted. If you need a transparent PNG out of a different source, convert the file first rather than passing it as an unsupported type. The output is always PNG because PNG preserves the transparency from the base and overlay; re-encoding does not promise to keep EXIF metadata, camera metadata, animation, embedded text, or original compression.
If you're weighing options, Image Overlay Alternative: A Local, No-Upload Browser Workflow covers this in detail.