Back to the blog

Product images for increased conversion

Vlad Stănescu3 min read

  • opinion

In most eCommerce verticals, images play a crucial role in convincing your visitors to purchase the products you’re selling.

If your shop is selling hardware parts, coffee, or wine, then images might not be relevant for your visitors to make a purchasing decision; simply displaying a clear image of the product is enough. But if you’re in the fashion industry, then the purchasing decision is mostly made around how the product looks; making an effort to optimize this will make a significant contribution to conversion and your bottom line.

In this post we’ll cover:

  • what images you should use
  • how to layout your product page
  • how to optimize the images for good performance

What images to use

The main product image should either be the product standalone on a white background or, in the case of fashion shops, the product worn by a model on a uniform background. The uniformity of the default image is important for a beautiful catalog listing page.

For most verticals, it is also recommended that inside the product details page, images with the product in context are included: for fashion shops, that means models wearing the product in a social setting, while for home & deco that would be the product inside a room.

What layout to use on the product page

If images are important for the products you’re selling, then the product page layout needs to be focused on the product images; navigating between images should be as easy as possible.

A layout that we recommend is a 2 column split with the product images displayed in a 50% or larger column and sticky scrolling for the content box.

Product Page Layout

The above layout clearly shows how compelling the image is in selling the product.

How to optimize the images

One of the goals with images is to use large enough images that they’re also clear on high-density screens (aka. “retina”). But you’ll also need to make sure that images are well optimized and not larger than they need to be.

As a merchant, you should upload images as large and uncompressed as you can, while the technical solution needs to handle:

  • resizing the image to required sizes: desktop desktop 2x (for retina screens) tablet tablet 2x (for retina screens) mobile mobile 2x (for retina screens)
  • optimize the images
  • conversion to modern formats (webp, avif)

The eCommerce solution can load all the image versions in a tag, and the browser will know what image to load based on the screen size, pixel density, and compatibility.

WebP is 4x smaller than png or jpg, so using them offers a performance boost and is scored highly by search engines.

All modern browsers support webp as a format, but since older browsers don’t, it’s critical to have a fallback to the traditional jpg and png formats.

Conclusion

If images are important in your customers’ buying decision, you should make an effort in having high-quality photos of the products, both standalone and in context, and prominently display them on the product page. Ask your team to have automated optimization, resize, and conversion pipelines, so that rich pages don’t impact your shop’s performance.

At Zento we have this covered, so if you’re looking for a solution to migrate your shop to, let us know.

Want to find out more?

Contact Us