Resize Squarespace Product Images with the Right Aspect Ratio

Before you start

Squarespace prepares product images through its own upload and display system, so the resizing itself happens locally before you upload. Choose a consistent aspect ratio for all product photos in a store rather than mixing square, portrait, and landscape files. A uniform ratio keeps grid layouts aligned and prevents important parts of a product from shifting position between thumbnails and the full-size view.

Work from the largest clean source file you have. Prepare a copy instead of overwriting the original, and keep the background or transparent canvas ready if the image must later be placed into a different shape. Check the pixel dimensions of the source before editing; resizing to an exact ratio usually means cropping or extending the canvas rather than stretching the contents.

Step-by-step instructions

Open the image in an editor that supports precise pixel dimensions, such as a desktop photo editor or an image conversion tool. If you already know the long edge of your source file, calculate the matching short edge from the ratio. For a 1:1 square, set width and height equal. For a 4:5 portrait shape, multiply the width by 1.25 or divide the height by 1.25. For a 3:2 landscape shape, divide the width by 1.5 to find the height.

Set the crop or canvas tool to the chosen aspect ratio instead of dragging freely. Place the product so that the subject keeps enough margin around it and no key detail sits close to an edge. Apply the crop first, then set the final pixel dimensions for export. Avoid upscaling a small file; if the required size is larger than the original, use a higher-resolution capture rather than enlarging.

Export a copy in a web-friendly file format such as JPEG for photographic products or PNG where transparency is required. Use moderate compression and compare the exported file with the source at full size. Save the prepared image with a clear name that records its ratio or dimensions so the store library is easier to manage.

Check the output

Inspect the exported image at 100 percent before uploading. Confirm the pixel dimensions match the intended ratio exactly, with no accidental extra row of pixels from a rounded value. Check edges around the product for hard halos, cut-off shadows, or a visible seam where a background was extended.

After upload, view the product in the store's detail page and grid or list view. Squarespace may generate additional display sizes, so verify that the preview remains sharp and that the crop does not hide a label, handle, or other identifying feature. If the aspect ratio looks wrong in one template area, revisit the source dimensions before adjusting the store design.

Common problems and next steps

A frequent issue is a soft or pixelated result after export. This usually comes from starting with a small source, using strong compression, or upscaling to meet a target size. Reduce compression for detailed product shots and check the file format: JPEG is not suitable when the product needs a transparent background, while PNG may create a larger file for dense photographic content.

If thumbnails crop differently from the main image, check for mixed ratios in the same product series or a template setting that uses a fixed crop. Replace outliers with images prepared at the same ratio, then clear any cached preview if the store still shows an old version. Keep one master copy of each prepared ratio so future edits preserve the same framing.