Product images: sizes, formats and the mobile reality
Product photos sell the product and slow the store. How to have both: one good original, automatic sizes and formats, and a mobile-first gallery.
The short answer
Product photos do the selling on a store and most of the slowing. The way to have sharp, persuasive images and a fast page is not to compromise between them but to handle images properly: one high-quality original per image, uploaded once, with the platform generating the sizes and modern formats each device needs; the first image loaded at the right size with priority; everything below it lazy-loaded with space reserved; and no app scripts wrapping the gallery. Most visitors are on phones, so the first image must show the product clearly at phone width and the gallery must swipe. And consistency across the catalogue, same background, framing and order of shots, does more for trust than any single spectacular photo.
What each image should do
| Shot | Purpose | Notes |
|---|---|---|
| Main | Recognise the product instantly at thumbnail and phone width | Clean background, product filling the frame, consistent across the catalogue |
| In use or worn | Show scale, fit and context | The image most often missing and most often decisive |
| Detail | Texture, material, stitching, controls | Close, sharp, honest |
| Variants | Each colour or finish as its own image, linked to the variant | Swatches should switch the image |
| Scale | Next to a familiar object or on a person | Reduces returns for size surprises |
| Packaging or contents | What arrives in the box | Where it matters for gifts, kits, food |
Doing it properly
- Shoot consistently: a defined shot list per product type, same background, lighting and framing.
- Upload one large original per shot, in a sensible order, with alt text that describes the product and the shot.
- Let the theme request the right size per slot: thumbnail, gallery, zoom, collection card, each from the image service.
- Prioritise the first image on the product page; lazy-load the rest and the collection grids below the fold.
- Reserve space with width and height so the page does not jump as images arrive.
- Keep app scripts off the gallery; if an app is needed for zoom or video, measure what it costs.
- Check on a phone on mobile data: how quickly does the first image appear, and does the gallery swipe smoothly?
Mobile first, honestly
Look at the product page on a phone held in one hand. The first image should be sharp and immediate, the price and add-to-cart visible without scrolling far, the gallery swipeable with a thumb, the zoom a pinch. Text on images should be avoided because it becomes unreadable at phone width. Stores are designed on large monitors and experienced on small screens; the gap between the two is where conversion is lost.
What this means for you
Shoot a consistent set of images that answer a customer’s questions, upload one good original per shot, let the platform size and format them, prioritise the first, lazy-load the rest, reserve space, keep app scripts off the gallery and judge everything on a phone. Images done this way sell the product and stop slowing the store, which is the only combination that makes money.
Frequently asked questions
How many product images do we need?
Enough to answer the questions a customer would ask in a shop: the product alone, in use or worn, details and texture, scale, variants, packaging where it matters. Typically four to eight, in a consistent order across the catalogue. More images without new information slow the page and add nothing.
What size should we upload?
A large, high-quality original, at least a couple of thousand pixels on the long side, so the platform can generate every size down from it including zoom. Uploading small images produces blur on zoom and on large screens; uploading enormous unoptimised files is fine because the platform processes them, but keep originals sensible for upload speed.
Why is our product page slow when the images look fine?
Usually because the theme or an app loads full-size images for thumbnails, loads every gallery image immediately, injects image scripts, or the first image is not prioritised. A properly built page loads the first image at the right size with priority, lazy-loads the rest, and lets the platform's image service do the sizing.
Sources
- Shopify Help Center: Product media (accessed 2026-09-12)