Product images are crucial to users’ ability to make a purchase decision about a particular product.
Yet despite the importance of product images, our benchmark reveals that 25% of e-commerce sites provide product images that are insufficient for users’ need to perform a visual exploration and evaluation of a product — and that’s despite our benchmark primarily assessing a site’s most popular categories and products.
During testing, both low-quality images and images that couldn’t be zoomed sufficiently to see product details were a cause of product abandonments.
In this article we’ll discuss the test findings from our large-scale UX research related to product image quality and level of zoom. In particular, we’ll discuss:
Our testing revealed that low-quality images drag down users’ perceptions of products.
In many cases, having low-quality images is almost worse than having no images at all, since users are encouraged to explore a product visually — for example, by a thumbnail in the product page image gallery — but are severely disappointed when they open the larger image and find it’s grainy or pixelated.
For many users it’s perceived as if the site doesn’t care enough to provide them with the visuals they need to make a purchase decision — and thus we observe that many users will instead abandon to try and find this visual information on another site.
Indeed, during testing users extended their disappointment beyond the specific product that they were viewing to the site or brand. This was especially the case when users encountered low-quality images for 2 or more products.
On the other hand, sites that consistently have high-resolution product images are viewed much more positively by users — the site feels more polished and professional, and users are more confident purchasing products that they feel like they’ve sufficiently visually investigated.
Allowing users to zoom product images has by this point become a web convention in e-commerce: our benchmark reveals that 93% of e-commerce desktop sites allow users to zoom some or all of the product images.
Yet sometimes, even if users can zoom product images, the level of zoom is insufficient to see the product details of interest (an issue at 5% of sites). If either the resulting zoomed image is low-resolution, or the site only offers a small level of zoom (typically due to a lack of image resolution), users won’t be able to obtain the visual information they need.
Depending on the significance of the detail, some users will choose to abandon at this point since they can’t get a rich visual understanding of crucial product details — something we observe to directly impact how confident users will be when considering purchasing a product they haven’t seen or touched in real life.
Being able to perform a satisfactory visual inspection of a product is one area where e-commerce has often failed to match the experience of shopping at a physical store. After all, if shopping in a physical store the user at Walgreens above could have simply brought the bottle of lotion closer to her eyes to quickly read the SPF information, while the user at Newegg could have picked up and held in his hands the speaker to get a sense of the build quality.
Users’ need to perform visual inspections of products therefore presents a serious challenge to e-commerce sites — which is why ensuring users have enough different types of images, such as images that show accessories, images that show scale, and images that include descriptive text, is crucial. Moreover, it’s also key to ensure images are easy to find — after all, images that aren’t found by the user may as well not be there at all.
Unfortunately, users don’t have a good appreciation of the expense that goes into providing multiple high-quality product images across a large product catalog. They simply judge a product, and by extension the e-commerce site, based on the images presented to them for the particular product they’re interested in.
Of course, when it comes to providing multiple high-quality images there’s a difference between what’s feasible for brand sites (e.g., nike.com), where it’s relatively easy to shoot multiple high-quality images for all products sold at the site, and traditional e-commerce sites that sell products from multiple vendors (e.g., walmart.com), where it’s often unrealistic for the e-commerce site to shoot multiple high-quality images for the entire product catalog.
For sites where it’s not feasible to provide multiple high-quality images for all products due to the vastness of the product catalog, as a minimum then it’s important to source, buy, or shoot high-quality images for the most important product verticals, as well as the best-selling products.
To make a strong case internally in a large organization for allocating more resources to product images, the return on investment for adding more product images can be closely monitored via A/B split-testing on select high-traffic products or product categories.
On mobile sites, in particular, having low-resolution images, or an insufficient level of zoom, is an unfortunate but predictable implementation. After all, most mobile sites rightfully use mobile-optimized, lower-resolution product images to reduce the download footprint of their pages.
If using mobile-optimized images, it is therefore important to make sure that your image gallery implementation fetches a higher-resolution version of the product image when users begin zooming, to ensure that they can actually see the product details they are trying to inspect.
Whether on desktop or mobile, it’s clear from testing that users expect a large variety of high-quality images — and that the resolution remains high when they zoom in. Sites that don’t provide this put themselves at risk of seeming “cheap” or unprofessional. For many users, low-resolution images are a deal-breaker — they’ll quickly exit the product page to search for an alternative product, while some may even abandon the site altogether.
Yet, our benchmark shows that 25% of sites fail to provide product images that are sufficiently high-resolution, or don’t provide an adequate level of zoom — even for some of their most popular products.
This article presents the research findings from just 1 of the 850+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” product page user experience.
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
To see highly detailed product images, we advise using images of 5000px width. This allows shoppers to zoom deep and see fine detail or read a label. If you don’t have such large images, aim for at least 2500px width.
You shouldn’t sacrifice poor quality images to help your page load faster. You can still deliver high quality product images with an instant zoom experience, if you use a media CDN like Sirv (I work here). Images are optimized based on each users device and browser. Likewise for 360 spinning images, they load almost instantly. Try it at sirv.com.
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 email@example.com