Make or Break Your Store's First Impression with Product Images
High-quality, compelling images do far more than display your products; they build trust, communicate value, and ultimately drive sales. Think of them as your silent salespeople, working tirelessly to showcase the intricate details, textures, and scale that words alone can't fully capture.
And, let's be real - few customers take the time to read all copy!
Tell a Visual Story
Effective eCommerce photos can significantly enhance the overall user experience. Think about the details that empower customers to make informed purchasing decisions with confidence:
- Multiple angles
- Lifestyle shots demonstrating the product in use
- Detailed close-ups
By providing a comprehensive visual story of your products, you're not just selling an item; you're offering an engaging and trustworthy online shopping journey that encourages repeat business and cultivates a loyal customer base.
Product Image Best Practices
Use these best practices to stand out in a visually saturated online world and capture the attention of discerning buyers.
1. Ensure the Default Product Image Is Enticing and Visually Rich
Users' first impressions of products are heavily influenced by the default image, which is often the only image some users view. The default image should provide:
- Rich visual details
- Highlight a product’s unique features
- Represent the product accurately
- Include all parts of a set, if relevant
Ideally, the product imagery sets initial user expectations and entices them to explore the product in more detail. You know, no pressure at all!
2. Include All Product Images in the Main Image Gallery
Excluding some images from the main gallery makes them harder for users to locate, especially on mobile where users often struggle to maintain an overview of the page and it's easier to overlook information on mobile product pages.
Place all relevant images within the main image gallery; don’t reserve images for below the fold
It’s hard to have too many product images!
Reuse images below the fold
This includes video!!!!
3. Provide Images from Multiple Angles
Users need to gain a comprehensive visual understanding of a product in order to make a purchase decision. When users are unable to get the same rich understanding of the product on a website that they are able to in person, they may hesitate to order it.
Include 3-5 images that show the product from multiple angles.
Make each angle unique, to reveal new information about the product.
Include close-ups of important details.
Don’t rely on other styles of images, like feature callout images to do this - these deserve their own space.
4. Provide “Feature Callout” Images
Users determine if they will continue to consider a product largely based on the images presented to them. Users’ focus on product images means they may overlook key product features if they're only described in the product description and specifications.
Find the best way to show each product feature visually, and include these in the image gallery.
Text on image is OK, just make sure it’s large enough to be easily read on mobile - the equivalent of at least 12px font size when viewed at 375px.
5. Always Show Products In Scale
Users have a significantly more difficult time getting an accurate impression of the product’s overall size when only traditional white background images are offered. Providing at least one "In Scale" image is crucial to help users understand the product's size.
6. Provide at Least 1 Lifestyle Image
Without product images that engage users emotionally, users can have a difficult time getting inspired or excited about a product. This can be less important for spec-driven products than for visually-driven products, but still important for both!
Prioritize these for the most important products.
Ensure "Lifestyle" images are directly related to the product and its use cases; avoid irrelevant imagery
Don’t overdo it - images that seem like they’re “marketing” too hard can be a turn-off.
Image Feature Checklist:
We keep these UX Best Practices in mind when selecting Shopify themes and designing product detail pages.
Show Image Thumbnails
Users don’t always move linearly through product images. Displaying thumbnails on all devices allows them to choose their own adventure, including going back, and also provides and overview.
Large Image with Carousel Navigation
This layout shows images at least 50% the width of the page, a best practice, and the carousel arrows allow for quick navigation through product images without moving the mouse.
Hover Zoom
Hover zoom, and a zoom lightbox on mobile, allows users to get more information from images as they choose. Just note this doesn’t replace feature callout images, which present features to users.
Image Gallery + Swatches in Same Viewport
If the main image and color swatches are not available within the same viewport, users have to scroll up and down, particularly on mobile, while exploring colors - adding friction to their shopping.
Use High Resolution Images
Images should allow at least 2x zoom. We usually recommend product images are 2048px squares. **File size matters for site speed - save for web and compress to no more than 150kb.
Match the Images to the Selected Variant
Users often explore product images via the color swatches on the PDP, so match the images they see to the selected color.
Summary
For every product, include:
1Default Image per Color Ensure this image is visually rich and showcases the product and its features |
3-5Angle Images Ensure each angle shows a different feature, adding new info with each image. |
2-5Feature Callout Images Text on image is OK. Show the features of a product clearly. |
1-2‘In Scale’ Images More important for accessories - show the size of a product. |
1Lifestyle Image Especially for more visual products, show an inspirational real-life image. |
Specs2048px square JPGs/MP4s Max file size: for images 150kb. For video, we recommend just a few seconds, 800kb max (smaller preferable). |
Keep in mind: there may be overlap among these images! | |
