The Long-Image Stitching Guide: Principles, Alignment, and Browser Limits
What Is a Long Stitched Image?
Vertical image stitching combines multiple images, top to bottom in order, into a single tall image. The most common scenario is chat history: a phone screen captures only one segment at a time, and only after stitching the segments into one long image can the conversation be forwarded or archived as a whole. Similar cases include multi-segment article screenshots, multi-page order flows, and comic panel stitching.
Compared with manually aligning images one by one in a photo editor, an automated stitching tool has three advantages: pixel-perfect alignment with no gaps or overlaps; batch processing that finishes 20 images in seconds; and adjustable parameters — gap, alignment, and padding applied to the whole image at once. In essence, it hands repetitive labor to the program.
How Browser-Side Stitching Works
Modern browsers can stitch images without any server. The core is the Canvas 2D API: compute the final width and height of all images under the chosen strategy, create a canvas of that size, draw each image at its y coordinate in order with drawImage, then export via toBlob as JPEG or PNG. The whole process is pure memory computation with no network transfer.
The direct benefits are privacy and cost: images never leave the device, the server has zero load, and the tool can stay free forever. The trade-off is the browser canvas size cap — which is exactly why stitching tools commonly limit image count and total pixels. It is an engineering constraint, not a product decision.
Width Alignment: the Core of a Clean Result
When widths differ, the alignment strategy determines the final look. Scale to widest: every narrower image is enlarged to the width of the widest — full-bleed and continuous, at a slight cost in sharpness. Center with padding: original sizes are kept, narrower images sit centered with colored sides — better for text screenshots (scaled text goes soft) and similar to album layout.
Match first image: the first image sets the width baseline and the rest scale toward it. This fits "the first image sets the tone" cases, such as a title header followed by body screenshots. No strategy is absolutely superior; it depends on the material: same-source screenshots work fine with default scaling, while mixed material (photos plus screenshots) suits padding better.
EXIF Orientation: the Hidden Trap of Phone Photos
Portrait photos taken on phones are actually stored as landscape pixels, relying on the Orientation tag (1-8) in EXIF metadata to indicate display direction. A normal img element applies the tag automatically, but Canvas drawImage ignores it by default — the result is a sideways or even upside-down photo inside the stitched image.
The correct fix happens at decode time: createImageBitmap offers the imageOrientation: "from-image" option, which rotates the bitmap per EXIF when it is created, so subsequent drawing needs no compensation. This tool uses exactly that approach, eliminating orientation bugs at the source. As a bonus, canvas re-encoding strips all EXIF (including GPS coordinates) — a privacy win for sharing scenarios.
The Browser Canvas Red Line
The real bottleneck of a stitching tool is not the algorithm but the canvas cap. Browser engines impose hard limits: Chrome allows about 65535 pixels per side and ~268 million total pixels; iOS Safari is far lower, around 16.7 million pixels (the 4096×4096 class). An oversized canvas either fails to create or renders blank.
Engineering safe bounds follow from this: at the common 1080px-wide phone screenshot, twenty 2400px-tall screenshots total about 52 million pixels — stable on desktop Chrome; on mobile, keep it within 8 images or shrink the originals first. A responsible stitching tool calculates total pixels in real time and shows a clear warning, instead of letting users gamble on a blank image.
Sharing and Post-Processing Long Images
Long images mostly end up on social platforms, and their secondary processing cannot be ignored: WeChat recompresses non-original images to about 1080px wide; Weibo caps a single image at 10MB. Recommendations for stitched long images: prefer JPEG (small and resistant to recompression), keep width within 1080 (wider brings no benefit), and split very long content into two parts.
If the long image is for archiving — chat records as evidence, process documentation — choose lossless PNG and keep the original width so text stays perfectly readable. Combined with the image compressor on this site, a JPEG long image can shrink another 30-50% before sharing, with almost no visible loss.