Skip to content
Lizely

Image Overlay

Place one image over another at a chosen position, scale, and opacity without uploading either file.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Choose a base image and an overlay image; each may be JPG, PNG, or WebP up to 25 MiB.
  2. 2.Select center or a corner, then set overlay scale relative to its original size and choose opacity.
  3. 3.Create the full-base-size PNG, inspect the preview, and download the result.

About Image Overlay

Image Overlay combines two static images directly in your browser. Choose a base JPG, PNG, or WebP, choose a second image to place above it, then select center or one of four corner positions. Adjust the overlay scale and opacity, create the composition, inspect the preview, and download a PNG. Neither source image nor the generated result is uploaded, and no account or external processing service is required. The base image defines the output canvas. Its natural width and height are preserved exactly, so a 1600×900 base produces a 1600×900 PNG. The tool does not silently shrink the base to fit the screen or a hidden export limit. The previews are visually constrained for the page layout, but those CSS preview dimensions do not change the pixel dimensions used for rendering or download. Overlay scale is explicit and applies only to the second image. A value of 100% draws the overlay at its own natural width and height, 50% draws half of each dimension, and 200% doubles each dimension. The scale range is 10% through 200%. Scaling preserves the overlay aspect ratio because both dimensions use the same factor. It is not an automatic fit-to-base percentage. If a scaled overlay is larger than the base, its position can produce negative coordinates and the portion outside the base canvas is clipped. That is intentional, disclosed behavior rather than a hidden resize. Position has five deterministic choices. Top left begins at x=0 and 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. Odd differences may therefore produce half-pixel coordinates, which keep the overlay mathematically centered rather than favoring one side. Opacity ranges from 0% through 100%. 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 contribution by the chosen global alpha; transparent pixels already present in a PNG or WebP remain transparent. The renderer first clears the output canvas, draws the base at full size with alpha 1, saves the drawing state, applies the selected overlay alpha, draws the scaled overlay at the planned coordinates, and restores the state. Production and isolated tests share the exact draw-plan and render functions. Golden tests cover center and all four corners, scaled dimensions, half-pixel centering, an overlay larger than the base, zero and partial opacity, unchanged base output dimensions, and the clear/base/save/alpha/overlay/restore call order. Both inputs accept JPEG, PNG, and WebP MIME types. GIF, SVG, AVIF, and other formats are outside this focused scope. Each compressed file may be at most 25 MiB, equal to 26,214,400 bytes. After browser decoding, each image is independently limited to 40,000,000 pixels and 20,000 pixels on either side. These decoded limits protect browser canvas memory because a small compressed file can expand into a very large pixel buffer. The boundary value is accepted; one byte, pixel-budget increment, or edge pixel beyond its limit is rejected with no partial output. Base and overlay decoding use separate job generations. This matters when both files are selected quickly: loading the overlay does not invalidate an in-progress base decode, and loading the base does not invalidate the overlay. Replacing either file revokes only that role's previous source ObjectURL while invalidating any in-progress export. A distinct render generation prevents a late toBlob callback from publishing a result created with older files, position, opacity, or scale. Mounted-state guards prevent decode and export callbacks from updating an unmounted interface. Selecting a file clears the previous image for that role, old output, error, and busy state before validation. Editing position, scale, or opacity also revokes and removes an old result immediately. Running again revokes the previous result URL before drawing. Unsupported files, empty files, oversized files, invalid decoded dimensions, decode failures, unavailable canvas context, drawing exceptions, PNG encoding failures, and download-URL failures produce explicit recoverable errors with stale output removed. Each hidden file input resets its value after selection, so choosing the same file again triggers a fresh decode. Source ObjectURLs and result ObjectURLs are revoked when replaced and on unmount. Every result uses PNG because it can preserve transparency from the base and overlay. Re-encoding does not promise to preserve EXIF metadata, camera metadata, animation, embedded text, or original compression. JPEG inputs have no transparent pixels, and a transparent base remains transparent wherever neither source contributes color. Browser interpolation is used when scale is not 100%, so reducing or enlarging an overlay can soften edges. This tool does not provide rotation, free dragging, arbitrary coordinates, margins, blend modes, masks, background removal, repeated tiling, or multi-layer editing. It is designed for a single predictable overlay such as a logo, badge, watermark graphic, frame detail, corner label, or centered texture. For precision design work, inspect the downloaded PNG at full size and keep both originals. If the overlay needs a specific final pixel width, calculate that width from its natural width and the selected percentage before exporting. If important content extends beyond the base at the chosen scale, lower the scale or edit the overlay source first. Everything remains local to the current browser tab throughout the workflow.

Methodology & sources

Each input is validated as JPEG, PNG, or WebP at no more than 25 MiB, then independently decoded and checked for integer dimensions, a 20,000-pixel edge maximum, and a 40,000,000-pixel budget. A shared draw plan preserves base width and height. Overlay dimensions equal natural dimensions × selected scale / 100. Center uses half the remaining width and height; corner positions use zero or base minus scaled overlay size. Opacity equals the selected percentage / 100. A shared renderer clears the canvas, draws the base at alpha 1, saves state, applies overlay alpha, draws at the planned coordinates and size, then restores. The canvas exports image/png. Separate base and overlay decode jobs plus a render job and mounted guard reject stale callbacks. All source and result ObjectURLs are revoked on replacement or unmount. Scale range is 10%–200%; opacity is 0%–100%. Scope excludes silent base resizing, automatic fit, rotation, dragging, blend modes, multiple overlays, and metadata preservation.

Frequently asked questions

Does Image Overlay resize my base image?
No. The output width and height always equal the base image's natural dimensions. Only the overlay changes size, and only according to the scale you select.
What does 50% overlay scale mean?
It draws the overlay at half its own natural width and half its own natural height. It does not mean 50% of the base width.
What happens when the overlay is larger than the base?
The selected center or corner coordinates are still applied. Any overlay pixels outside the fixed base-size canvas are clipped rather than causing the base to resize.
Are my images uploaded or retained?
No. Both files are decoded and combined locally. Temporary browser ObjectURLs are revoked when replaced or when the tool unmounts.

Related tools

Image Tools guides

View all