25% of E-Commerce Sites Don’t Have Product Images with Sufficient Resolution or Level of Zoom

Product images are crucial to users’ ability to make a purchase decision about a particular product.

During Baymard’s large-scale usability testing, 56% of users’ first actions were to immediately begin exploring product images after arriving on the product page.

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:

  • How low-resolution images affect users’ perception of products — an issue at 14% of e-commerce sites.
  • How not being able to zoom product images sufficiently hampers users’ product-exploration process – an issue at 11% of e-commerce sites.

How Low-Resolution Images Affect Users’ Perception of Products

“Well that sucks….This is completely pixelated and grainy, so I can’t get a good [look]…I mean, this picture just sucks, I don’t even know what that is! Or well I know what it was supposed to be, but this is still kinda disappointing.” The low-resolution close-up of a furniture’s fabric was disappointing to all users exploring these detailed images at Sears.

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.

Why It’s Critically Important for Users to Be Able to Zoom Images to View Product Details

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.

A user at Walgreens attempted to pinch-to-zoom an image in a product page image gallery multiple times, before finally being able to just make out the SPF information she was attempting to read. Users will often need to zoom more than the level of zoom an image gallery overlay image provides to see the details they’re interested in.

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.

Allow Users to Obtain the Visual Product Information They Need

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.

“I’d like to read what it says….They’re not going to let you turn it”. At Kiehl’s, while the level of zoom and resolution were sufficient, this user still couldn’t read the ingredients list on a bottle of skin toner. After zooming in, the user wanted to be able to turn the image to see the ingredients list, but was unable to find a view where she could. A 360-view feature here may have helped.

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.

“I guess for me the most important information is the picture. And the different pictures as well…I feel like I’ve almost touched it.” High-resolution images and a sufficient level of zoom ensure users get a rich visual sense of a product, which is crucial to users’ product-exploration strategy.

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.

A user at Adidas zooms to inspect a shoe, and the resulting zoomed image is high-resolution, enabling her to successfully visually inspect the product.

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 710+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” product page user experience.

Post a comment or Share:

User experience research, delivered twice a month

Join 22,000+ readers and get Baymard’s research articles by RSS feed or e-mail:

Due to spam, you need JavaScript to do that.

(1-click unsubscribe at any time)

Related Articles

See all 21 ‘Product Page’ articles

More E-Commerce Research

Free Research Content:

Products & Services:

Comments (1 so far)

Jake Brumby April 2, 2020

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.

Due to spam, you need JavaScript to do that.

Post a comment!

Due to spam, you need JavaScript to do that.