Overlay Images Online: Put One Picture on Top of Another
Upload a background photo, drop a second image on top, then use the four sliders to size, fade and position it. Everything is composited on a canvas inside your browser, so neither picture is ever uploaded anywhere.
1. Choose Background
JPG, PNG, WebP or GIF. This sets the output size.
What this tool is good for
Overlaying is the simplest kind of image compositing: draw picture B on top of picture A at a given size, position and opacity. It covers most of what people actually need day to day, stamping a logo into the corner of a product shot, dropping a signature onto a scanned document, putting a face into a meme template, faintly laying a texture or paper grain over a photo, or building a rough picture-in-picture frame before taking it into a full editor.
Two details decide how good the result looks. The first is transparency in the overlay file itself. PNG and WebP store an alpha channel, so a logo cut out with a background remover will sit on the photo with no visible box around it. JPG has no alpha channel at all, so a JPG overlay always draws as a solid rectangle, and the opacity slider is your only way to blend it. The second is source resolution: the overlay is resampled as you scale it, so pushing a small logo past 100 percent will visibly soften it. Start with an overlay at least as large as you want it to appear.
You can build up more complex compositions by working in passes: save the combined image, load that result back in as the new background, and add the next layer on top. Repeat as many times as you like. It is a simple way to place several logos, stack a texture over a watermark, or assemble a layered graphic without opening a full editor.
Nothing here is uploaded. Both files are read locally with the FileReader API and drawn to an HTML5 canvas on your own machine, which matters if you are stamping a watermark onto a contract, an ID scan or unreleased client work. You can verify it yourself: open your browser's developer tools, switch to the Network tab, and use the tool, no request carries your image data. The page even works with your connection turned off after it loads.
How to overlay two images
- Pick the background. Click Upload Base Photo. Whatever you choose here sets the pixel dimensions of the final export, so use the larger of your two images.
- Add the top layer. Upload the logo, watermark or second photo. A PNG with a transparent background gives the cleanest result.
- Size it. The Resize slider runs from 10 to 200 percent of the overlay's own size. Staying at or below 100 percent keeps it sharp.
- Blend it. Drop Transparency to roughly 30 to 50 percent for a subtle watermark, or leave it at 100 percent for a solid logo.
- Position it. The horizontal and vertical sliders move the overlay across the canvas. The preview updates as you drag.
- Download. Click Save Combined Image for a PNG at full resolution.
For a longer walkthrough with worked examples, read how to overlay images and add a logo to a photo. If you need to cut one image into a grid rather than stack two, the image splitter is the tool you want.
Features
Nothing leaves your device
Compositing runs on an HTML5 canvas in your browser. No upload, no account, no server copy to delete afterwards.
Alpha transparency preserved
Transparent PNG and WebP overlays keep their alpha channel, so cut-out logos composite with no border.
Full-resolution export
The canvas matches your background image's dimensions, so the PNG you download is not downscaled or watermarked.
Frequently asked questions
How do I put one picture on top of another?
Upload a background image, then upload a second image as the overlay. Use the scale slider to size it, the transparency slider to blend it, and the two position sliders to place it. Click Save Combined Image to download the result as a PNG.
Does the overlay need a transparent background?
Not strictly, but it helps. A PNG or WebP with real alpha transparency sits cleanly on the photo. A JPG overlay always draws as a rectangle, because JPG cannot store transparency, so lowering the opacity slider is the only way to blend it.
Does overlaying reduce image quality?
The canvas is created at the background image's full pixel dimensions, so the export matches your original resolution. The overlay itself is resampled when scaled, so pushing a small logo above 100 percent will look soft.
Are my images uploaded to a server?
No. Both files are read with the browser's FileReader API and composited on a canvas on your device. Open your browser's Network tab while using the tool and you will see no request carrying the image data.
Can I add more than one overlay?
One at a time. To stack several, save the combined image, then load that result back in as the new background and add the next layer.
Can I rotate the overlay?
Not in this tool. Rotate the overlay first with the rotate and flip tool, save it, then bring it back here.
How do I overlay a transparent PNG on a photo?
Load the photo as the background, then add the PNG as the overlay layer. Its alpha channel is preserved, so transparent areas stay transparent and only the artwork is composited — no white box around the logo. Drag to position it, resize with the scale control and drop the opacity if you want a subtle watermark. Export as PNG to keep any remaining transparency in the result; choose JPEG only if the composite is fully opaque.
🔎 Verify it yourself: nothing uploads
Don’t take our word for it. Open your browser’s DevTools (F12 → Network tab), then run this tool on any image. You’ll see no upload request at all — your file never leaves this tab. You can even turn off Wi‑Fi once the page has loaded and keep working. Every tool on this site works the same way — all processing happens on your device.