Collage Maker

When you add photos with mixed aspect ratios to a collage layout, each cell in the grid is assigned a fixed rectangular region on the output canvas, and photos are fitted using an object-fit: cover equivalent rendered through the Canvas 2D API. This means the image is scaled up uniformly until its shorter dimension fills the cell completely, and any excess along the longer dimension is cropped symmetrically from both sides — so a tall portrait photo placed in a wide landscape cell will have its left and right edges trimmed, while a wide photo in a portrait cell will have its top and bottom trimmed. The crop is centered by default, meaning the visual center of the original image is preserved in the cell. This approach ensures clean uniform cells with no letterboxing or pillarboxing white bars. If the automatic center crop cuts off important content — for example, a face near the top of a portrait — the best workaround is to pre-crop the photo in an image editor before uploading, shifting the region of interest to the center so the symmetric crop keeps it visible. The tool does not currently support drag-to-reposition within a cell. All image handling is performed using the HTML Canvas API and the FileReader API entirely within your browser — no data leaves your device. As a practical tip, for consistent results, prepare your photos to a similar aspect ratio before uploading, especially if you want to avoid unexpected crops on subjects near image borders.

The exported collage dimensions are determined by the canvas size setting you configure before generating the layout. The tool uses the HTML Canvas API to composite all photos and applies gap and padding values at the pixel level, so the output is a raster image at exactly the pixel dimensions you specify. Common preset sizes include 1080×1080 pixels for square social media posts, 1920×1080 pixels for a widescreen presentation background, and 1080×1920 pixels for vertical story formats. If no custom size is set, a default canvas width is used and the height is calculated proportionally based on the grid layout and the number of rows. The export file is generated via canvas.toBlob() with PNG encoding by default, which preserves full color fidelity with lossless compression. For a 2×2 grid at 1080×1080 pixels with 10-pixel gaps, each cell would measure approximately 530×530 pixels. File size of the exported PNG scales with the canvas area and image complexity — a 1920×1080 collage with four detailed photographs may produce a file between 2 and 6 megabytes depending on content. If you need a smaller file, export at a lower canvas resolution and upscale later rather than exporting large and compressing, since PNG is lossless. All compositing happens entirely in your browser — no data leaves your device. As a practical tip, choose your target platform first and set the canvas to that platform's recommended resolution before adding any photos, since changing canvas size after layout can reset cell assignments.

Yes, you can mix portrait and landscape photos freely — the collage maker accepts any image regardless of orientation, and each photo is independently scaled and cropped to fill its assigned cell. The Canvas 2D drawImage() call handles the geometry: each source image is drawn with a source rectangle calculated to fill the destination cell at cover scale, meaning it scales up until the shorter edge matches the cell dimension and then centers the crop on the longer edge. Every cell in the final collage has clean filled content with no empty space. Because portrait photos have a larger height-to-width ratio than landscape cells, more vertical content will be cropped when a portrait is placed in a landscape-oriented cell, and vice versa. If you have a mix and care about preserving the full composition of specific photos, pre-crop those images to match the cell aspect ratio before uploading. Modern smartphones apply EXIF orientation metadata to photos taken in portrait mode, and most browsers respect this metadata when loading images via the FileReader API, so photos should display right-side up automatically. However, if a photo appears rotated, open it in an image editor and save it with the rotation baked into the pixel data rather than stored as an EXIF tag. All compositing runs entirely in your browser — no data leaves your device. As a practical tip, place your most important subject photos in the largest cells of your chosen layout to give them more display area and reduce the chance of key content being cropped.

Gap and padding serve distinct layout purposes even though both affect the white space in the final collage. Gap refers to the space between cells — the gutters that separate one photo from the adjacent one horizontally and vertically. Padding refers to the space between the outer edge of the grid and the canvas boundary — essentially the margin around the whole collage. Keeping them separate gives you precise independent control over two different design decisions. You might want zero gap between photos for a seamless tiled look while still having a 20-pixel white border around the composition so it sits cleanly inside a slide or print template. Alternatively, you might want generous gutters between photos for breathing room, but zero padding so the collage bleeds to the canvas edge. If these values were merged into a single setting, achieving asymmetric or zero-one configurations would be impossible without a workaround. This separation mirrors the CSS box model distinction between gap (used in grid and flex layouts) and padding (applied to the container element), mapping directly to those familiar concepts. The Canvas renderer applies padding first to define the available grid area, then distributes cells within that area with the specified gap; each cell then receives a photo drawn to fill it. All rendering happens entirely in your browser — no data leaves your device. As a practical tip, start with equal gap and padding values for a balanced look, then adjust each independently once the layout is close to what you want.