How do I overlay two images online?

Upload a main image (output size) and a secondary image. Adjust position, scale, rotation, flip, or transparency—the preview updates automatically. Download PNG when the composite looks right.

What is the difference between overlay and merge?

Overlay composites the secondary image on top of the main canvas at a chosen position. Merge Images stitches two photos edge-to-edge vertically or horizontally.

How do I position the secondary image?

Use center horizontally or vertically, drag position sliders, or click the output preview to place the overlay when center options are off.

Does transparency work on PNG overlays?

Yes. Enable set transparency and raise the percentage to fade the secondary layer. PNG alpha on the secondary upload is respected when drawing.

Which image sets the output size?

The main image canvas dimensions define the exported width and height.

Can I combine two pics into one image?

Yes. This tool lets you combine two pics by overlaying a secondary image on a main image canvas, then exporting one PNG.

Are files uploaded to a server?

No. Compositing runs locally in Canvas.

What is the maximum file size?

15 MB per upload with a longest edge of 8192 px.

Click the preview to place the overlay when center options are off.

Drop up to 2 images here or

Background — not added yet
Overlay — not added yet

Help Us Improve

—

(—)

Overlay two images online

Place one image on another with position, scale, rotation, and opacity. Export a single PNG.

What is image overlay?

Image overlay places one picture on top of another while keeping the main canvas size. This page works as an image overlayer and picture on picture editor: upload a main image and a secondary image, position the layer with centering or click placement, optionally scale, rotate, flip, or fade it, and download a single PNG. The main image defines output dimensions, and the secondary composites above it with alpha blending when transparency is enabled.

Image overlay features

Overlay two images and composite a secondary photo on a main image in the browser.

Main and secondary uploads
Output matches main image size; secondary layers on top.
Position controls
Center axes, X/Y sliders, or click the preview to place.
Scale and rotate
Optional resize percent and clockwise or counterclockwise rotation.
Flip and transparency
Mirror the overlay horizontally or vertically; fade with transparency.
Live preview
Composite refreshes when any option changes.
PNG download
Save as overlay-images.png.

How to overlay images

Steps for overlay pictures online.

Upload main and secondary images
Main sets canvas size; secondary is the layer you place.
Position the overlay
Center both axes, fine-tune with sliders, or click the output preview.
Tune scale, rotation, or transparency
Resize for watermarks, rotate stickers, or fade logos.
Download PNG
Export the blended result for social posts or mockups.

Tips for overlay compositing

Better blended results when you overlay two images.

01
Use PNG for logos
Transparent secondary files avoid white boxes around marks.
02
Scale before rotating
Set resize first so rotation pivots around the intended size.
03
Click to rough-in position
Use the output preview click, then nudge with X/Y sliders.
04
Uncheck center to free-place
Horizontal and vertical center locks override click and sliders.
05
Compare with merge
Use Merge Images when you need a tall strip or side-by-side panel.
06
Export PNG
Preserve transparency on the final composite when needed.

Image Overlay Tools Compared — Which One Fits Your Workflow

How this free image overlay tool stacks up against other popular options.

PineTools.com
Overlay images with opacity and position controls. Simple but requires Apply button.
Imagy.app
Image overlay with positioning and blending controls. Feature-packed but complex.
Canva.com
Full design platform with image overlay/layer support. Requires account; free tier good.
Adobe Express
Image overlay with blending and opacity. Professional but full suite navigation.
Overlay Images
Overlay one image on top of another with adjustable opacity and position. Drag to reposition. Real-time preview. All in your browser.

When to overlay images

Typical uses for photo compositing.

Watermarks
Place a logo on photos with transparency and scale.
Stickers and badges
Drop PNG graphics with alpha onto a base shot.
Meme templates
Position a cutout over a background image.
Before labels
Add a small inset image without merging panels.
Mockups
Composite UI screenshots on device frames.
Quick blends
Combine two layers without desktop Photoshop.

Why use this overlay tool

Benefits of browser-based compositing.

Layered not stitched
Secondary sits on the main canvas—unlike side-by-side merge.
Private
Images stay on your device.
Free
Unlimited previews and downloads.
Flexible placement
Center, sliders, and click-to-place on the preview.
No install
Works in modern browsers with Canvas 2D.
Honest scope
One secondary layer per export—not multi-layer PSD editing.

Technical details

How image overlay works here.

Canvas size: Output width and height match the main image upload.
Transforms: Scale, rotate around overlay center, horizontal and vertical flip.
Alpha: globalAlpha from transparency slider; PNG alpha preserved on draw.
Position: Top-left placement with optional center overrides per axis.
Input limits: 15 MB per file; longest edge 8192 px.
Browser support: Chromium, Firefox, Safari with Canvas 2D.

Sources & References

Authoritative references on blend modes and image compositing, the Canvas rendering technology this tool uses, and the PNG output format.

“Blend modes determine how two layers are blended with each other — also known as compositing modes, blending modes, or transfer modes.”
— Wikipedia — Blend modes
Blend modes in digital compositing: This tool overlays a secondary image on top of a main image using alpha blending compositing — applying blend mode concepts to control how layers combine with transparency and positioning. en.wikipedia.org/wiki/Blend_modes
“The Canvas API provides a means for drawing graphics via JavaScript and the HTML canvas element.”
— MDN Web Docs — Canvas API
Canvas API (client-side layering): This tool uses Canvas 2D to draw the main image first and the overlay image on top, with globalAlpha for transparency and transforms for positioning, scaling, and rotation — all locally in your browser. developer.mozilla.org/en-US/docs/Web/API/Canvas_API
“PNG supports lossless data compression, making it useful for storing graphics that need to be edited repeatedly without losing quality.”
— W3C — PNG Specification (overview)
PNG image format: Downloading the composited overlay as PNG preserves the alpha transparency of the overlay layer and maintains the full quality of both source images. w3.org/TR/PNG/
“Digital compositing is the process of digitally assembling multiple images to make a final image, typically for print, motion pictures, or screen display.”
— Wikipedia — Digital compositing
Digital compositing techniques: Image overlays stack one image on top of another with opacity control — this tool lets users position and blend a foreground image over a background with adjustable transparency. en.wikipedia.org/wiki/Digital_compositing

Frequently Asked Questions

Quick answers about this tool—open a question to read more.