Product images that look right in a mobile app

By Abdalla Kamesh · Published September 27, 2026 · 4 min read

In a shopping app, product images are the product. They are most of the screen area, most of the download, and most of the reason something looks worth buying.

They are also the most common source of two problems that read as “this app is cheap”: a grid where every tile is a different shape, and a screen that takes two seconds to fill.

Consistency beats resolution

The single highest-impact change most catalogs can make: shoot or crop everything to one aspect ratio.

A category grid where one product is square, one is portrait and one is a wide banner cannot be made to look good by any app. The app has three bad options — letterbox them, crop them arbitrarily, or let the grid have ragged rows — and all three look like a mistake.

Pick one ratio and enforce it:

1:1 square — the safest default. Works in grids, works in carousels, works everywhere.
4:5 portrait — better for clothing and anything worn, because it shows more of a body.
3:4 — a middle ground.

Whatever you choose, apply it to the primary image of every product. Additional gallery images can vary; the first one cannot.

The sizes that matter

WordPress generates several sizes from each upload. An app should be requesting the appropriate one per context, and your job is to make sure the sizes exist and are sensible.

Practical targets:

Grid thumbnails: displayed at roughly 150–200 points, so around 600 px on a 3× screen. A 600–800 px file is right.
Product page gallery: displayed at full width, so around 1200–1600 px.
Zoom: pinch-zoom wants the largest useful version — 2000 px is generous, 4000 px is waste.

Upload at around 2000 px on the long edge. Big enough for zoom, small enough not to make every generated size enormous. Uploading 6000 px camera originals gives you a media library that is ten times bigger than it needs to be and no visible benefit.

Why file size is an app problem specifically

If the API returns a full-size image URL and the app fills a 400 px tile with a 3 MB file, the response was fast and the screen still took two seconds. The customer experiences that as a slow app.

Three fixes, in order:

Compress on upload. JPEG quality around 80 is visually indistinguishable from 100 at a fraction of the size. An image optimization plugin does this automatically.
Make sure the intermediate sizes exist. If they were not generated — because sizes were added after the images were uploaded — regenerate them. This is a common cause of apps serving originals.
Check what the app requests. A well-built app requests the right size per context. Ask your vendor; it is a reasonable question and the answer should be specific.

Modern formats like WebP are worth enabling if your plugin stack supports them cleanly, but they matter less than the three items above.

The details that make a gallery feel expensive

A consistent background. White cutouts throughout, or lifestyle shots throughout. Alternating between them in one grid looks like two different stores.

The primary image is the clearest one. Not the moodiest. The grid tile has to communicate what the thing is at thumbnail size, in a second.

Per-variation images, set properly. If you sell a shirt in four colours, each variation should carry its own image so the gallery swaps when a customer picks green. WooCommerce supports this and a lot of stores skip it, which makes a variation picker feel decorative. More on the variation picker.

Enough gallery images, not too many. Three to six is the useful range: the product, a detail, a scale or context shot, and a back view if it matters. Twelve images of the same angle is friction.

Alt text. For accessibility, and because it is the only description a screen reader has of your product photo.

What to check in WordPress

A twenty-minute audit:

Settings → Media. Are your thumbnail and medium sizes sensible? Is thumbnail cropping set to produce a hard crop, so grid tiles are consistent?
Spot-check ten products. Is the primary image the same aspect ratio on all ten?
Check a variable product. Does each variation have its own image?
Check file sizes. Open a product image directly and look at how many kilobytes it is. Over about 300 KB for a gallery image is worth compressing.
Regenerate thumbnails if you have changed sizes or suspect missing ones.
Look for missing images. A product with no image is a grey box in the app’s grid, and grey boxes look like bugs.

Then look at it on a phone

The final check, and the one that catches everything: open your own app on a real device and scroll your category grid.

Do the tiles line up?
Do images pop in smoothly, or does the layout jump as they load?
Is the fifth product’s photo shot the same way as the first?
Can you tell what each product is at that size?

Layout jump as images arrive is a rendering problem the app should solve with reserved space and placeholders — worth asking a vendor about. Ragged tiles and inconsistent photography are yours, and they are the ones that most change how the app looks.

Related reading