To overlay a picture on a picture, place a second image at a chosen position, scale, and opacity on top of a full-size base image, then export the result as a single PNG. A browser-based Image Overlay tool does this without uploading either file: you pick a base JPG, PNG, or WebP, pick a second image to layer above it, choose center or one of four corner positions, adjust the overlay's scale (10% to 200% of its own natural size) and opacity (0% to 100%), and download a PNG whose pixel dimensions match the base exactly. The base is never resized, the overlay is scaled only by the percentage you select, and any pixels that fall outside the base canvas are clipped on purpose rather than triggering a hidden resize. Because both files are decoded directly in the current tab through the standard canvas drawImage pipeline, the combination step is fast, private, and produces the same output for the same inputs every time.
The Base, the Overlay, and the Result
Overlaying two pictures means stacking one image on top of another so that both remain visible in a single output. The lower image, the base, sets the canvas size, while the upper image, the overlay, sits at a chosen position with a chosen size and transparency. Common real-world examples include adding a small logo to the corner of a product photo, layering a watermark on a picture before sharing, dropping a badge or ribbon over a portrait, or centering a decorative frame detail on a flat-lay shot.
The base image is not cropped, padded, or scaled to fit anything: whatever you choose for the base defines the final pixel size of the result. Only the overlay is allowed to change size, and only by the scale percentage you pick. This single-overlay model, one base and one overlay with a deterministic position, is what makes a browser tool viable for the job. It can state the exact output dimensions up front and avoid the hidden resizes that often cause problems in general-purpose editors, where a "fit to canvas" toggle can quietly shrink your photo to 95% and leave you wondering why the export no longer matches your layout.
Accepted File Types, Sizes, and Decoded Limits
Both the base and the overlay must be in a format the browser can decode through the standard image pipeline. The tool accepts three formats and rejects everything else with a recoverable error.
| Format | Accepted? | Behavior in the result |
|---|---|---|
| JPG / JPEG | Yes | Decoded directly; no transparent pixels to preserve |
| PNG | Yes | Existing transparent pixels stay transparent in the result |
| WebP | Yes | Decoded directly; transparency is preserved if present |
| GIF, SVG, AVIF, others | No | Outside the tool's focused scope |
Each file may be at most 25 MiB (26,214,400 bytes) before decoding. After the browser decodes the file, each image is independently limited to 40,000,000 total pixels and 20,000 pixels on either side. These decoded limits protect canvas memory, because a small compressed file can expand into a very large pixel buffer. The boundary value is accepted; one byte, one pixel, or one edge pixel beyond the limit is rejected, with no partial output. The base and overlay are validated separately, so a small base combined with a huge overlay, or the reverse, is caught at the relevant step rather than failing late during composition.
How to Overlay a Picture on a Picture
The full workflow runs in the current tab and produces a single PNG you can save and use anywhere. The three phases are: pick the two files, configure the overlay, and create the result.
- Open Image Overlay in your browser. No account, sign-in, or external service is required.
- Choose a base image and an overlay image. Each may be a JPG, PNG, or WebP up to 25 MiB. Selecting a new file for either role clears the previous file for that role, any prior result, and any error or busy state.
- Pick a position for the overlay: top left, top right, bottom left, bottom right, or center. The position is deterministic and stays the same every time you re-render with the same inputs.
- Set the overlay scale. The scale is applied to the overlay's own natural width and height; 100% draws it at its native size, 50% draws it at half each dimension, and 200% doubles each dimension. The range is 10% through 200%.
- Set the overlay opacity from 0% through 100%. Zero makes the overlay fully transparent while still producing a base-size PNG; 100% keeps the overlay's own alpha unchanged.
- Create the result. The canvas clears, draws the base at full size with alpha 1, saves the drawing state, applies the chosen overlay alpha, draws the scaled overlay at the planned coordinates, and restores the state.
- Inspect the preview and download the PNG. The previews are sized to fit the page layout, but the downloaded file uses the base's natural pixel dimensions exactly, so a 1600x900 base produces a 1600x900 PNG.
Position, Scale, and Opacity Explained
Each of the five position choices maps to a fixed pair of top-left coordinates. The scaled overlay's width and height equal its natural width and height multiplied by the selected scale divided by 100. The table below shows the coordinates for each position; base_w and base_h are the base's natural width and height, and ov_w and ov_h are the scaled overlay dimensions.
| Position | Top-left x | Top-left y |
|---|---|---|
| Top left | 0 | 0 |
| Top right | base_w - ov_w | 0 |
| Bottom left | 0 | base_h - ov_h |
| Bottom right | base_w - ov_w | base_h - ov_h |
| Center | (base_w - ov_w) / 2 | (base_h - ov_h) / 2 |
Here is a single worked example. Take a 1600 x 900 base and a 400 x 400 overlay at 50% scale. The scaled overlay becomes 200 x 200. For top right placement, the coordinates are x = 1600 - 200 = 1400 and y = 0. For center placement, the coordinates are x = (1600 - 200) / 2 = 700 and y = (900 - 200) / 2 = 350. When base and overlay have different sizes, center can produce half-pixel coordinates; the renderer keeps the overlay mathematically centered rather than favoring one side.
Scale is applied to both dimensions with the same factor, so the overlay's aspect ratio is preserved at any percentage. A 50% setting is not 50% of the base width; it is half the overlay's own natural width and half its own natural height. Opacity multiplies the overlay's contribution by the chosen percentage: 0% is fully transparent, 100% keeps the overlay's own alpha channel, and any value in between blends them. Transparent pixels already present in a PNG or WebP overlay remain transparent in the result.
What the Output PNG Keeps and What It Drops
The downloaded file is always PNG, because PNG is the only widely supported format that can preserve transparency from both the base and the overlay. Re-encoding does not promise to preserve EXIF metadata, camera metadata, animation, embedded text, or the original compression of either source. The result is a fresh pixel-and-alpha canvas written through drawImage and exported through the standard canvas toBlob path. If the base was a JPEG with no transparency, the result's transparent areas are the parts where the overlay itself was transparent.
Because the browser handles resampling when the overlay scale is not 100%, reducing or enlarging an overlay can soften edges compared to the original. The renderer uses standard canvas interpolation, and there is no sharpening step. For precision work, inspect the downloaded PNG at full size in an external viewer before publishing it. Each result is delivered as a fresh, locally created object URL and is revoked when you replace either input or re-run the composition, so a stale preview cannot leak into a later export.
When the Overlay Is Larger Than the Base
If the scaled overlay is larger than the base on one or both sides, the chosen position is still applied. The overlay's top-left is placed at the calculated coordinates, and any overlay pixels that fall outside the base canvas are simply clipped; they do not cause the base to resize, do not extend the canvas, and do not produce a second image. A 1500 x 1500 overlay placed at top left on a 1000 x 800 base shows only the top-left 1000 x 800 region, and the rest of the overlay is discarded. If important content extends beyond the base at the chosen scale, the practical fix is to lower the scale or edit the overlay source so the visible portion contains what you actually want to show. The clipping is documented, intentional behavior, not a hidden resize.
Where Picture Overlay Fits In
An overlay tool is the right answer for a single, predictable composition: a logo, a watermark graphic, a corner badge, a centered texture, or a small decorative frame. It is not a multi-layer editor and it does not provide rotation, free dragging, arbitrary coordinates, blend modes, masks, background removal, or repeated tiling. If the overlay is going to be round, a circle crop guide for the browser can prepare the source first, and the resulting transparent PNG drops straight into the overlay slot. For a centered title or annotation, a text watermark step upstream of the overlay produces a flat file the tool can then position and fade for you. The result is a single PNG with the base's exact pixel dimensions, ready to share, upload, or feed into another tool.