Image Overlay
Choose a base picture and a second one to lay over it, then put the top picture exactly where you want it: drag it, drag a corner to scale it, type an angle to rotate it, and set the opacity and the blend mode. The overlay's position, scale and angle are held in the base image's own pixels rather than in the pixels of the preview on screen, so the download is the composite you arranged at the base image's full resolution, not a copy of whatever size the canvas happened to be shown at. The preview and the export run the same drawing code, one at the size that fits your screen and one at the size of the picture. Both files are decoded and composited in this browser tab, there is no account, and neither image is uploaded; the only things remembered between visits are the blend mode, the opacity and where you last placed the overlay. Each picture may hold up to 50 megapixels, which is the point where a browser canvas starts to struggle, and the size of the file on disk is not checked at all.
The composite appears here.
· or drop two pictures anywhere on the stage
The overlay sits on top, dimmed only by the opacity you set. Drag the overlay to move it, drag a corner to scale it, and type an angle to rotate it. With the keyboard, tab to the overlay and the arrow keys move it a pixel at a time, or ten at a time with shift. Both pictures are read in this tab, and each one may hold up to 50 megapixels.
Common questions
- Are my pictures uploaded anywhere?
- No. There is no server in this. Both files are read by the browser's own image decoder, drawn onto a canvas inside the page and handed back to you as a download. No image byte is sent to an endpoint, to analytics or to error reporting. The only thing written to your browser's storage is the settings row: the blend mode, the opacity and the position, scale and angle you last used. Neither picture is ever stored, and if storage is blocked the tool still works.
- Does the downloaded PNG match what I see on the canvas?
- Yes, and that is the thing the tool is built around. The preview and the export call the same drawing function with the same numbers; the only difference is one argument, the scale the canvas is set to before anything is drawn. The preview passes the fraction it is displayed at so it fits your screen, and the export passes 1, which is the base image's own resolution. Because the overlay's centre, scale and angle are all in base pixels, a handle you drag on screen lands on the same pixel in the file. Anything you push past the edge of the canvas is cut off by the edge of the canvas, in the preview and in the download alike.
- What do the seven blend modes actually do?
- Normal puts the overlay on top, dimmed only by the opacity. Multiply multiplies the two channels, so the result is never lighter than either picture, which is how ink and shadows behave. Screen is the inverse of multiply and is never darker than either picture, which suits light leaks and glows. Overlay multiplies in the dark parts of the base and screens in the light parts, raising contrast. Darken and Lighten keep the darker or the lighter of the two channels. Difference is the distance between them, so identical pixels come out black. The compositing on the canvas is done by the browser's own blend operations, and the readout below puts one sample pair of colours through the same written-out formula, so you can see what the mode you picked does to a colour before you judge it on a photograph.
- Can I place the overlay without a mouse?
- Yes. Tab to the overlay and the arrow keys move it one base pixel at a time, or ten at a time with shift held. Each of the four corner handles is a button in the tab order, and its arrow keys change the scale. Scale and rotation also have plain number fields, so an exact 0.42 or an exact 15 degrees can be typed rather than dragged, and the current position, scale and angle are printed under the canvas as text for anyone not looking at it.
- Does a transparent PNG on top keep its transparency?
- Yes. Alpha is respected on both sides: the holes in a transparent overlay let the base show through, and a base image with transparent areas stays transparent in the exported PNG, because the export is written as PNG and nothing is painted behind it. The alpha of the overlay and the opacity you set are multiplied together, so a half-transparent picture at 50 per cent opacity contributes a quarter.
- Is there a limit on how big the pictures can be?
- Each picture may hold up to 50 megapixels. That ceiling is on pixels rather than on bytes, because the canvas has to hold four bytes for every pixel of each image, and a picture past that point is more likely to fail in the browser than to composite. The size of the file on disk is not checked at all: nothing is uploaded, so the bytes are nobody's business. A picture over the ceiling is refused in words that name the ceiling and its own size, rather than producing a blank canvas.
- Why does the overlay look slightly softer after I rotate it?
- Rotating a picture means resampling it: the pixels of the overlay no longer line up with the pixels of the canvas, so the browser has to interpolate between them, and fine detail and hard edges soften a little. It is the same in the preview and in the export. The base image is never resampled on the way out, because the export canvas is exactly its size and it is drawn one pixel to one pixel, so only the overlay is affected.
- Can I use this to put a watermark or a logo on a photo?
- Yes. Load the photo as the base, load the logo as the overlay, drag it into the corner you want, scale it with a handle and drop the opacity until it sits where you like. The overlay cannot be dragged off the canvas entirely: at least a small part of it stays over the picture, so it cannot be lost past the edge. It is one pair at a time, though, since there is no batch mode here: repeating it over a folder of photographs means loading each one as the base.
Compositing is the standard source-over alpha formula with the canvas blend modes, computed in your browser at the base image's own resolution. The export runs the same path as the preview, so a handle you drag lands on the same pixel in the downloaded PNG. Rotation resamples the overlay, which softens fine detail slightly; the base image is never resampled.