Ecommerce Product Image Design: How to Present Products Online

Product images do the job a shopper's hands and eyes would do in a shop, so design them to answer visual questions. Start with a consistent primary image, then add alternate angles, a shot that shows scale, detail close-ups, lifestyle images and images for each variant. Show every image as a visible thumbnail, support high-resolution zoom and add video or 360-degree views where movement or shape matters. On mobile, use a full-width swipe gallery with a count indicator and pinch zoom. Keep style consistent across the catalog, load images efficiently and write meaningful alt text.

Online, shoppers can't pick up a product, feel the fabric or hold it against themselves. Images fill that gap, and they're often the first thing shoppers engage with on a product page. Baymard Institute's product page research treats product images, image gallery UI and product video and 360 views as separate topics, which reflects how much detail matters here.

This guide goes deep on imagery. For the rest of the page, including price, variants and the buy section, see ecommerce product page design.

The primary image appears on listing pages, in search results, in the cart and in shared links, so it has to identify the product at a small size. Use a consistent background, angle, crop and aspect ratio across each category so listing pages look orderly and products can be compared. Let the product fill most of the frame; tiny products floating in empty space look unimpressive and hide detail on small screens.

Thumbnails tell shoppers how many images exist and let them jump to the one they want. Show them all, or clearly indicate how many more there are, rather than hiding most behind carousel arrows. Mark video and 360 views with an icon so they're recognizable before they're opened, and highlight the thumbnail of the image currently displayed.

Shoppers zoom to check materials, finishes and details. Supply images at a resolution high enough for meaningful zoom, and offer click or hover zoom on desktop plus a full-screen view. On mobile, support pinch zoom in the gallery and in full-screen mode. Disabling browser zoom harms accessibility and frustrates everyone else; don't do it.

Size is one of the questions still images answer worst. Show products on a model or next to familiar objects, include in-context shots for furniture and home items, and add captions such as the model's height and size worn. Pair images with dimensions and size guides in the product details, so the image and the numbers support each other.

Lifestyle images show products in context and help shoppers picture ownership. They supplement product shots rather than replace them. When a lifestyle image shows several products, link to all of them; Baymard's research on inspirational images recommends linking every depicted product, because shoppers often want the item next to the one they came for.

Video is worth producing when movement, fit, sound, texture or how something works is hard to show in stills. Keep clips short and focused, show them within the gallery with a clear play indicator, give users control, don't autoplay with sound and provide captions for any speech (WCAG 1.2.2). Load video only when requested so it doesn't slow the page for everyone.

Rotatable views suit products whose shape and construction matter: footwear, bags, equipment, furniture. Make the control obvious, keep it responsive on touch devices and load the frames only when opened. Keep the best still images too; many shoppers never interact with a 360 view.

When a shopper selects a colour or finish, the gallery should switch to that variant's images, and the swatch should show the actual colour. Photograph every variant rather than relying on one colourway and a swatch; shoppers buying the less common colour have the same questions as everyone else.

On mobile, a full-width gallery at the top of the product page is the norm. Make swiping obvious with a partial next image or dot indicators and an image count (“1 / 6”), support pinch zoom and a full-screen view with a clear close button, and make sure horizontal swiping doesn't block vertical page scrolling. Keep the gallery height reasonable so the product name, price and key options appear within the first scroll. See mobile ecommerce UX.

Write a simple image style guide: backgrounds, lighting, angles and their order, crop and aspect ratio, how models are posed and which shots are required for each category. Consistent images make listing pages easier to scan, make products easier to compare and reduce the look of a store assembled from different suppliers.

Product images are usually the heaviest assets on the page. Serve responsive images at the sizes each device needs, in modern formats, through a CDN. Load the main image immediately, since it's often the Largest Contentful Paint element, and lazy-load the rest. Set dimensions or aspect ratios so the layout doesn't shift as images arrive. See website performance optimization.

Each informative image needs alt text that describes what it shows (WCAG 1.1.1): colour, view and the detail it highlights, not the product name repeated for every image. Gallery controls must be keyboard operable with visible focus and accessible names. Don't put essential text such as sizes or offers inside images. Captions help everyone when they add information the image can't, such as the model's height and size, the colour name or “shown with matching trousers”.

Photos from customers show products in real homes and on real bodies, which studio images can't. Collect them through review submissions, moderate them, and show them in a separate customer gallery linked to the reviews they came with. See ecommerce product reviews UX.

Good product imagery answers the questions shoppers would answer in person: what it looks like, how big it is, what it's made of and how it fits their life. Plan the image set by those questions, present it in a clear gallery with zoom, adapt it for mobile, keep it consistent and fast, and make it accessible. Then connect it to the rest of the product page.

For related guides, see jewelry visualization and furniture visualization.