Product Images on Mobile: What Actually Drives Conversion

Why product images on mobile convert differently

On desktop, a product page is a layout. The gallery sits on the left, the buy box on the right, and thumbnails invite you to explore. On a phone, it is a sequence. The shopper sees one image, then scrolls or swipes to reveal the next thing. Three things follow from that.

• The first image carries more weight. Baymard Institute's product page research has repeatedly found that looking at the images is one of the first things shoppers do on a product page. On mobile, the first image is often the only one they see before they decide whether to keep going.
• Size is fixed by the device, not by you. A 1:1 image on a 375-pixel-wide phone renders 375 CSS pixels across, however large you uploaded it. Detail that needs 600 pixels to read is gone until the shopper zooms.
• Navigation is hidden. Desktop thumbnails tell shoppers how many images exist and what they show. Mobile carousels usually swap them for dots, or for nothing, so your later images depend on the shopper choosing to swipe.

The practical takeaway is to review images at phone width before you approve them. Most of the fixes below are cheap. What costs you is not seeing the problem in the first place.

Aspect ratio: how much of the screen your image gets

On a phone, the image's aspect ratio decides how much of the first screen belongs to the product and how much belongs to everything else. The numbers below assume a common 375 × 812 viewport, with the image shown full width.

Portrait ratios give upright products (garments on a model, bottles, footwear from the side) far more pixels at the moment of first impression. The cost is that your price, title and Add to Cart button slide further down. Whether that trade pays off depends on the category and the theme, which makes it a good candidate for a test. Our guide to A/B testing product images covers how to set one up without fooling yourself.

Whatever ratio you choose, use it on every product. A collection grid where some tiles are square and others portrait looks broken on a phone, where shoppers see two tiles per row and every difference in height stands out.

Fill ratio: small products disappear at phone width

Fill ratio is how much of the frame the product itself takes up. It matters on every screen, but on mobile it decides whether the product is readable at all. The table below shows how wide the product actually renders at a few common fill levels, in two places: the main image (375px wide) and a collection grid tile (about 170px wide in a two-column layout).

A product shot at 50% fill has about 85 pixels of width in a collection grid. That is roughly the size of a thumbnail. Stitching, texture, hardware and print detail are all gone, and the shopper is left with a silhouette. At 80–90% fill, the same product has more than half again as many pixels to work with, without changing the photo at all.

High fill is not the whole answer, though. When every product fills 90% of its frame, a pair of earrings looks as large as a handbag, and shoppers lose the cue for scale. The better rule is a consistent fill per category: small items fill tightly, and larger items leave a little more room, so products stay readable and in proportion with each other. This is the approach Retouchable's framing step takes. After the image is generated, each cutout is measured and scaled to a per-category fill, then placed on the exact background colour, so a whole catalog lands at the same scale without anyone hand-cropping it.

The swipe gallery: making later images earn a swipe

On mobile, every image after the first one depends on a swipe. Shoppers only swipe if they believe there is something worth seeing. Three things raise that likelihood.

1. Show that more images exist. Dots are the weakest cue. An image counter ("1 / 6") is clearer, and a peek of the next image at the right edge is clearer still, because it shows content rather than a promise. If your theme supports a peeking carousel, it is usually worth turning on.
2. Put the most decision-relevant image second. On desktop, shoppers scan thumbnails and jump around. On mobile they go in order, so the second slot is prime real estate. For apparel, that is usually the product on a body. For hard goods, it is often a scale or in-use shot. Our gallery order guide goes through each slot in detail.
3. Make each image readable on its own. Desktop galleries can get away with close crops that only make sense next to the full shot. On a phone each image fills the screen alone, so a macro of a zip pull with no context just looks like a mistake. Crop close enough to show detail, but keep enough of the product in frame that the shopper knows what they are looking at.

Be wary of adding images to the gallery just to reach a number. On desktop, a twelfth thumbnail costs almost nothing. On mobile, each one is another swipe between the shopper and the image they wanted. How many product images actually lift conversion looks at where the returns flatten out.

Zoom on a touchscreen

Hover zoom does not exist on a phone. Shoppers who want detail have two options: tap to open a full-screen viewer, or pinch. Baymard's mobile usability testing has flagged product galleries that ignore pinch and double-tap gestures as a persistent problem, and when zoom fails, the shopper does not see the detail they were checking.

What to check on your own store:

• Pinch works in the full-screen viewer, and ideally on the inline image too. Test it on an actual phone. Desktop emulation does not reproduce touch gestures reliably.
• The zoomed image is sharp. A full-screen viewer on a modern phone is about 1,100–1,300 physical pixels wide. Pinching to 2× means the source file needs to be well over 2,000 pixels on its long edge to hold up. Upload at a higher resolution than the page displays, and let the platform serve smaller versions for the inline view.
• Closing is obvious. A full-screen viewer with a tiny close button in the corner traps people. Swipe-down-to-close is now expected behaviour.

For more on whether zoom moves conversion and how much resolution to plan for, see Does product image zoom improve conversion?

Speed: the first image is usually your LCP element

On most product pages, the main image is the largest thing on the first screen, which makes it the page's Largest Contentful Paint element. On a mid-range phone over a mobile connection, a heavy hero image is the single biggest reason a product page feels slow. A slow page loses shoppers before they have seen the product at all.

The fixes are mostly configuration, not photography:

• Serve responsive sizes. A phone showing the image at 375 CSS pixels needs roughly a 750–1,100px file at typical device pixel ratios, not your 4,000px master. Most modern platforms, Shopify included, will generate sized versions if the theme asks for them with srcset.
• Never lazy-load the first image. Lazy-loading everything below the fold is good practice. Lazy-loading the hero image delays the one thing the shopper is waiting to see.
• Use modern formats. WebP and AVIF typically cut file size substantially against JPEG at the same visual quality.
• Keep backgrounds clean. Flat, even backgrounds compress far better than noisy or gradient ones. A consistent plate colour is a speed win as well as a brand win.

For the full technical walkthrough, see Product image LCP: fixing Core Web Vitals on PDPs.

A mobile image review checklist

Most of the problems above are invisible on a desktop monitor, which is why they make it into production. The simplest fix is to make phone-width review part of image approval rather than something that happens after launch. A checklist you can run in about ten minutes per template:

If you publish to Shopify, remember that the image in position 1 is the one shown in collection grids and store search. That makes it the image most shoppers see first on a phone. Put your most legible, best-filled shot there, and the image that answers the next question in position 2.