Shopify gallery image size and aspect ratio: a guide

Every gallery app gets the same two questions: how big should my images be, and why did that one get cropped? The answers depend on how the gallery renders, so this guide goes through what Snug Gallery actually asks the Shopify CDN for, how each layout treats the shape of a photo, and what to upload so a gallery looks sharp on a 4K monitor without making a phone download a poster.

The short answer

Upload photos at least 1600 pixels on the long side, ideally 2000 to 2500, as JPEG under 20 MB. Keep the originals in whatever shape they were shot; do not pre-crop to a square unless you want every layout to be square. Pick the aspect ratio per gallery block, not per image: Original for masonry and row layouts, and a fixed ratio such as 1:1 or 4:3 for grids where you want tidy tiles and accept that edges will be trimmed.

That is enough for most stores. The rest of this guide explains why those numbers, and what to do with mixed batches, panoramas, product cutouts and customer photos that arrive in every shape imaginable.

What the gallery actually requests

Snug Gallery never serves the file you uploaded. It stores the image in Shopify Files and asks Shopify's image CDN for resized copies at render time. For each gallery image the storefront markup lists six candidate widths, 320, 480, 640, 960, 1280 and 1600 pixels, along with a sizes hint that tells the browser how wide the tile will be. The browser picks the smallest candidate that covers the tile at the device's pixel density and downloads only that one.

The sizes hint is per layout. A slider tile is the full viewport width, so the browser fetches the 1280 or 1600 copy on a desktop. A four column grid tile is a quarter of the viewport, so a 1600 pixel wide screen downloads the 480 copy and a retina phone at 390 CSS pixels wide gets the 960. In a row layout the hint is each image's share of the row, calculated from its aspect ratio, so a wide panorama in a row of three gets more of the width than its square neighbours. A list layout with captions tells the browser the image is 60 percent of the width on tablets and up. The collage layout gives the large tile a bigger hint than the small ones.

When a shopper opens the lightbox, the gallery loads a separate copy at up to 2048 pixels wide. That is the largest size the storefront ever requests. An upload wider than about 2500 pixels buys nothing on screen, and the page speed guide explains why the download size that matters is the one the browser chose, not the one you uploaded.

So how big should the upload be

Work backwards from the lightbox. 2048 pixels on the long side is the most that will ever be shown, so anything from 1600 to 2500 covers every case; a 1600 upload is never upscaled past itself, and a 2500 upload gives the CDN a little headroom for sharp downsizing. Most phone cameras produce 3000 to 4000 pixel images, which are fine to upload as they are, provided the file stays under the app's 20 MB per image limit. The upload errors guide covers what happens when it does not.

Shopify's own limits apply underneath: Files accepts images up to 20 megapixels, which for a 3:2 photo is roughly 5500 by 3650 pixels. Panoramas and stitched shots can exceed that quietly. If an upload is rejected and the file size looks fine, pixel count is the next thing to check.

Resolution is not the only lever. A 2000 pixel JPEG saved at quality 80 is usually 400 to 900 KB; the same image saved at quality 100 is three times that for no visible gain once the CDN has re-encoded it. Export at 80 to 85, and let Shopify convert to WebP or AVIF for browsers that support them, which it does on its own.

Aspect ratio is a block setting

Each gallery block has an aspect ratio setting with five choices: Original, Square (1:1), Landscape (4:3), Portrait (3:4) and Wide (16:9). It applies to every tile in that block. There is no per image override, which is deliberate; a grid where tiles have different shapes stops being a grid.

Original means the tile takes the shape of the photo. Snug Gallery writes each image's own ratio into the tile as a CSS variable, so a portrait shot gets a tall tile and a landscape shot gets a wide one, and the browser reserves the right amount of space before the image arrives. Nothing is cropped.

A fixed ratio means the tile is that shape regardless of the photo, and the image is scaled to cover it. Whatever does not fit is trimmed from the edges, centred. A landscape photo in a square tile loses its left and right sides; a portrait photo in a 16:9 tile keeps a horizontal band from its middle. The lightbox always shows the full, uncropped image, so a shopper who taps through sees everything; the crop is only in the tile.

How each layout treats the ratio

Grid: a fixed ratio crops to the tile; Original keeps each photo's shape and the rows become uneven. Masonry and row: the setting is forced to Original, photos keep their shape, and the gallery packs columns by height or scales each row so its images share the width. Collage: Original is treated as 1:1, because mixed big and small tiles need a fixed shape. Portfolio: Original is treated as 4:3 for the same reason. Slider: the track follows the tallest slide and images are shown whole, not cropped.

Masonry and row ignore the setting on purpose. Their whole point is to show photos in their own proportions, so a ratio would fight the layout. Collage and portfolio need a predictable tile to build their patterns, so Original is interpreted as a sensible fixed shape instead. The slider is the odd one: it measures the images in the block and sets the track to the proportion of the tallest, then fits every image inside it without cropping, so a mixed slider of portrait and landscape shots shows the landscape ones with space either side. If that bothers you, give the slider a batch of matching shapes, or pick a fixed ratio so every slide is cropped to the same frame.

The layouts guide goes through what each layout is for; this table is just about shape.

Mixed portrait and landscape batches

The honest answer to a batch of mixed shapes is masonry or row with Original. Both exist for exactly this. Masonry fills columns and lets heights vary; row builds justified rows where every image keeps its proportion and the row height adjusts so the widths add up. Neither crops, and neither needs you to sort the photos first.

If you want a grid anyway, decide which way you prefer to lose. 1:1 trims both kinds roughly equally. 4:3 keeps landscape shots almost whole and cuts portrait shots hard. 3:4 does the opposite. For a mixed batch of product shots where the subject is centred, 1:1 is usually the least painful, because centre cropping keeps the subject. For lifestyle photography where the subject is off centre, use Original and a layout that respects it.

One trick that works well: split the batch into two blocks on the page, one for landscape shots and one for portrait, each with the matching fixed ratio. Two tidy grids read better than one grid with awkward crops, and the gallery block is light enough that two on a page cost almost nothing extra.

Product cutouts and small images

Product cutouts on white or transparent backgrounds behave differently in a fixed ratio tile. The subject is usually centred with generous margins, so cropping the edges takes away background rather than product, and 1:1 tiles look clean. The transparent background guide covers what shows through where the pixels are missing.

Small images are the opposite problem. A 600 pixel product shot in a full width slider is asked to fill 1600 pixels and will look soft, because the CDN cannot invent detail. The gallery will not upscale a copy beyond the source width, so the browser gets the largest real size and stretches it. If a supplier only gave you small images, keep them in grids with four or more columns where the tile is 300 to 400 pixels wide and the softness is invisible.

Customer photos

Photos submitted through the customer upload form arrive in every shape and from every phone. The form accepts images up to 10 MB each, a lower limit than the admin, because shoppers upload over mobile connections. Shapes are whatever they are: vertical phone shots, square crops from social apps, the occasional screenshot.

For a customer photo gallery, the two settings that save you from manual cropping are a masonry or row layout with Original, or a grid at 1:1 where centre cropping does a tolerable job on phone photos because people centre what they are photographing. The customer upload guide covers moderation; this is only about shape.

A checklist before uploading a batch

The CDN and the layout do the sizing work, which is the point of Snug Gallery: you upload reasonable originals once and the gallery asks for the right copy on every screen. The only decision that stays yours is the shape of the tile, and now you know what each choice does.

Export at 2000 to 2500 pixels on the long side, JPEG quality 80 to 85, under 20 MB each and under 20 megapixels.
Do not pre-crop. Keep the originals' shapes so you can change the block ratio later without re-uploading.
Decide per block: Original with masonry or row for mixed shapes, a fixed ratio with grid for uniform tiles.
Check one tile on a phone and one in the lightbox. The tile shows the crop; the lightbox shows the whole image at up to 2048 pixels.
If a crop cuts something important, change the block ratio or move that image to a block with a different one. The image itself never needs editing.

Frequently asked questions

What is the best image size for a Shopify gallery?

Between 1600 and 2500 pixels on the long side. The gallery requests copies up to 1600 pixels wide for tiles and up to 2048 for the lightbox, so anything larger is never displayed. Keep files under 20 MB and under Shopify's 20 megapixel limit.

Why are my gallery images cropped?

The block is set to a fixed aspect ratio, so every tile has that shape and photos are scaled to cover it, trimming the edges. Switch the block to Original, or use a masonry or row layout, which always keep each photo's own shape. The lightbox never crops.

Can I set a different aspect ratio for one image?

No, the ratio is a setting on the gallery block and applies to all its tiles. To give some images a different shape, put them in a second gallery block with its own ratio.

Does Snug Gallery upscale small images?

No. The Shopify CDN serves copies up to the source width and no larger, so a small image placed in a wide tile is stretched by the browser and looks soft. Keep small images in grids with several columns where tiles are narrow.

Do customer uploaded photos have a different size limit?

Yes. The customer upload form accepts images up to 10 MB each, compared with 20 MB for uploads from the admin. The shape rules are the same, and a masonry layout or a square grid handles the mix of phone photo shapes best.