Image Merger
Merge two to twelve local images into one ordered composition, with contain-or-crop fitting plus controllable spacing and background.{{ summaryTitle }}
{{ summaryLine }}
Composed image
{{ transparencyNote }}
{{ chartExportStatus }}
The chart renderer is unavailable. Placement dimensions remain available in the ledger.
| Image | Source | Cell | Rendered | Crop | Copy |
|---|---|---|---|---|---|
| {{ row.label }} | {{ row.source }} | {{ row.cell }} | {{ row.rendered }} | {{ row.crop }} |
{{ ledgerExportStatus }}
Combining images on one canvas is a layout task. Source order decides which image appears first, the layout decides how cells are arranged, and the fit rule decides what happens when an image and its cell have different aspect ratios. This is useful for before-and-after comparisons, contact sheets, product variants, simple strips, and small grids.
Image merging is different from panorama stitching. A merger places complete or cropped rasters into explicit cells; it does not find matching features, correct perspective, blend seams, or reconstruct a continuous scene.
| Fit | What happens | Best check |
|---|---|---|
| Contain | The complete image is reduced when necessary and aligned inside the cell. It is never enlarged. | Look for unused background around narrower or shorter images. |
| Fill | The image covers the full cell and excess source pixels are cropped from the aligned edges. | Check faces, text, and edge detail for unwanted cropping. |
Canvas background and output format also interact. PNG and WebP can preserve a transparent background. JPEG is opaque, so transparent areas become white. JPEG and WebP quality settings affect encoding, while PNG remains lossless and ignores that quality control.
The final composition inherits the limits of raster output. Enlarging it later can soften detail, and color or encoding differences can appear across browsers. Keep the source files when future resizing, correction, or a different layout may be needed.
How to Use This Tool:
Choose the source order before tuning cell geometry, because placement follows that order from left to right and then top to bottom.
- Add 2 to 12 PNG, JPEG, or WebP files. Each file may be up to 15 MB, and the complete decoded set may contain up to 48 megapixels.
- Choose Horizontal, Vertical, or Grid. For a grid, set 2 to 6 columns.
- Choose Contain to keep every source edge or Fill to cover every cell. Set horizontal and vertical alignment where empty space or crop position matters.
- Open Advanced for gap, outer padding, cell dimensions, background, format, and JPEG/WebP quality. A cell width or height of 0 uses the widest or tallest source dimension.
- Merge the images, inspect the composition at full size, and review the crop count plus placement rows before downloading.
Interpreting Results:
Rendered dimensions describe the pixels actually drawn for each source, not its original dimensions. In Contain mode, a smaller image can remain smaller because enlargement is capped at 1×. In Fill mode, each cell is completely covered and the crop count shows how many sources lost edge pixels.
Confirm the final canvas width and height before using the file in a system with pixel limits. A valid merge can still be a poor composition if ordering, empty background, crop alignment, or JPEG flattening differs from the intended handoff.
Technical Details:
Every source is decoded to its intrinsic pixel dimensions and placed into one rectangular cell. Horizontal layout creates one row, vertical layout creates one column, and grid layout fills the requested number of columns in row-major order. Gap applies only between neighboring cells; padding surrounds the outside of the canvas.
Transformation Core:
| Stage | Rule | Consequence |
|---|---|---|
| Decode | Read source width and height after validating file and decoded-pixel limits. | Orientation and dimensions reflect the decoded raster. |
| Resolve cells | Use requested cell dimensions, or the largest source width and height when either value is 0. | Every source receives equal cell geometry. |
| Place | Contain scales down and aligns the whole source; Fill selects an aligned source rectangle that covers the cell. | The ledger can distinguish empty cell space from cropped source pixels. |
| Composite | Paint the resolved background, then draw sources in order. | Later drawing does not overlap earlier cells because cells are disjoint. |
| Encode | Serialize the reviewed canvas as PNG, JPEG, or WebP. | JPEG replaces transparency with white; quality applies only to JPEG and WebP. |
Formula Core:
Canvas geometry follows directly from row and column counts. The fit scale then controls whether the source remains fully visible or covers the cell.
Here, W and H are canvas dimensions, p is padding, g is gap, and c and r are the column and row counts. Contain rounds drawn dimensions to whole pixels and aligns the remaining space. Fill maps a fractional source rectangle into the full integer cell.
The canvas may be at most 8,192 pixels in either dimension and 24 megapixels in area. Gap is limited to 200 pixels, padding to 500 pixels, and an explicit cell width or height to 4,096 pixels.
Privacy and Accuracy Notes:
The source images and composed output stay in the browser and are not uploaded. File choices are not placed in the shareable URL.
Browser bitmap decoding and encoding can produce small differences in compressed JPEG or WebP output. For exact archival preservation, keep the originals and use PNG when a lossless merged raster is required.
References:
- Canvas element and bitmap serialization, WHATWG HTML Living Standard.