How to Test Product Image Variations for Higher Conversions 

In e-commerce, product images play a vital role in influencing customers through purchase decisions. A visually appealing product image can attract more attention, build trust with customers, and lead to more sales. However, many businesses struggle to determine which product images resonate most with their audience. 

Without a systematic approach to testing and optimizing images, companies risk losing potential customers to competitors with more compelling product images. Poorly optimized images can lead to lower engagement, fewer conversions, and lower return rates if customers feel misled by inaccurate or unappealing product images. 

By the end of this blog post, you’ll learn how to create an e-commerce media workflow with Cloudinary, generate product image variations in Cloudinary Studio, set up automated tests using MediaFlows, integrate dynamic URLs into e-commerce platforms, and analyze results with Cloudinary’s analytics tools to make data-driven decisions.

For this tutorial, we’ll use the Cloudinary Studio transformation tool. This tool has a user-friendly interface packed with powerful AI features to manage image assets with ease. It provides functionalities such as resizing images, removing backgrounds, adding overlays, or enhancing the quality of images.

One of its standout features is the ability to create variations without altering the original image. This ensures that your asset remains untouched while experimenting with different looks and effects.

With these capabilities in mind, let’s explore how you can use Studio to generate product image variations by following these steps.

• Access Studio. You’ll need an active Cloudinary account to start using Studio. If you don’t have one, sign up for free. Then, navigate to Studio via the Product Navigation menu.

• Add Images to Studio. You can start with an empty Studio workspace and add images manually or select your images beforehand to load them directly into Studio. To load product images into Studio, click Add images and select the product images from the Media Library.

Additional images can be added at any point during the session, and any transformations applied will also affect the newly added images.

• Apply transformations. Select Generative AI featureto modify elements within the image by entering specific prompts. Let’s create a prompt to replace the background of the product images. To do so, navigate to the Replace tab. In the Replace object field, fill in “background”, and in the With field, fill in “car park”.

• Compare variations with originals. Press and hold the comparison button in Studio to toggle between the original and transformed versions of the product image. Release the button to view the applied transformations.

• Finalize and download variations. Once you’re satisfied with the variations, click Download Options at the top-right corner to download them as a ZIP file. You can also export delivery URLs as a CSV file for easy integration. Finally, save the template for future use.

Whether managing a handful of assets or an entire library, Studio empowers you to deliver high-quality visuals efficiently. This feature perfectly creates tailored visuals for marketing campaigns, A/B testing, or exploring creative ideas. 

However, if you need to handle large-scale media workflows or automate repetitive tasks, you might want a more scalable solution. This is where Cloudinary’s MediaFlows comes in. MediaFlows supports the automation and optimization of media workflows, simplifying bulk processing, asset lifecycle management, and system integration. Let’s take a closer look at how MediaFlows can elevate your media management.

Cloudinary’s MediaFlows simplifies the creation and automation of media workflows. It enables the creation of a set of functions through a user-friendly drag-and-drop interface.

It caters to technical and non-technical users with two distinct approaches: EasyFlows and PowerFlows.

• EasyFlows provides an intuitive, no-code interface for those less familiar with coding. This allows teams to easily automate tasks such as applying brand standards, managing asset lifecycles, and auto-tagging assets. 
• For advanced users, PowerFlows offers a flexible, low-code environment. It allows the creation of complex workflows, integration with other systems, and complete control over the media management process. Ultimately, whether you’re handling A/B testing, bulk processing, or content delivery, MediaFlows enhances efficiency and scalability. 

One practical use case for MediaFlows is automating the creation of product image variations for A/B testing. For instance, let’s say you’re running an e-commerce campaign and want to test two versions of a product image: one cropped into a square format and another resized to 400 x 400 pixels. Here’s how you can use EasyFlows to automate this process:

1. Access MediaFlows.To start using MediaFlows, make sure you’re logged in to your Cloudinary account. However, please note that MediaFlows has a free plan with a limit of five workflows. To add additional workflows above the limit, you‘ll need to upgrade to a paid plan. 
2. Create a MediaFlow Workflow.Choose the prebuilt template, Edit Media. This template provides a function (a trigger and a set of blocks) to automate actions such as duplicating images, applying transformations, and resizing images for consistency. Customize the trigger to align with your automation needs. For example, set the trigger to activate when an image is uploaded to a specific folder in your Cloudinary Media Library.

The Edit Media template includes a built-in function to create and modify two image duplicates. One duplicate should be cropped into a square format, while the other should be resized to 400 x 400 px. These transformations ensure that you have distinct variations for A/B testing.

3. Test the Workflow. To test the workflow, head to your Media Library in Cloudinary DAM and select an image. Copy the image URL, then add it to your flow settings. 

Click Save once the URL is added, then click Test to save and test the flow.

4. Review the results. After testing, you’ll see live logs showing the details of the modified image versions, including the public_id, URL, dimensions, and file format. These logs confirm that the workflow was executed successfully and provide insight into the image’s attributes and modifications.

Additionally, the template automatically uploads the original image and its modified versions to your Cloudinary Media Library, making them ready for A/B testing.

MediaFlows helps you generate and manage asset variations efficiently, but dynamic URLs take it a step further by creating real-time transformations for your applications. By combining the power of MediaFlows for workflow automation and dynamic URLs for dynamic asset delivery, you can create a scalable and flexible A/B testing strategy. Let’s explore how dynamic URLs can enhance your workflow.

Cloudinary’s dynamic URLs change how product image variations are integrated into applications. Instead of dealing with multiple files, you can use dynamic URLs to apply real-time transformations directly through URL parameters. This eliminates the need to modify your code manually. 

Each image variation receives a unique URL, making it easy to implement across your entire app or platform. Update the URL to display different images to different user segments. Here’s how to use dynamic URLs for seamless asset swapping:

• Structure your dynamic URL. Dynamic URLs are built with specific parameters to transform images or videos dynamically. Here’s the structure of a Dynamic URL:

https://res.cloudinary.com/<cloud-name>/image/upload/<transformation>/<public-id>`Code language: HTML, XML (xml)

• Replace <cloud-name> with your Cloudinary account name.
• Replace <transformation> with desired operations like resizing, cropping, or watermarking.
• Replace <public-id> with the unique identifier of your asset.
• Apply transformation parameters. Use transformation parameters to customize assets for your platform’s needs. Examples include:
  • Resizing: w_300,h_400,c_fill to set width, height, and cropping mode.
  • Format conversion: f_auto will automatically deliver the best format.
  • Quality optimization: q_auto to optimize for performance.

To demonstrate optimizing and delivering a product image using Cloudinary transformations, let’s take the example of a shoe image:

https://res.cloudinary.com/demo/image/upload/sample.jpgCode language: JavaScript (javascript)

The following URL applies transformations to optimize the image:

https://res.cloudinary.com/demo/image/upload/w_300,h_400,c_fill,q_auto,f_auto/sample.jpgCode language: JavaScript (javascript)

This URL applies the following changes:

• w_300. Sets the width to 300 pixels.
• h_400. Sets the height to 400 pixels.
• c_fill. Crops the image proportionally to fit the specified dimensions (300×400).
• q_auto. Automatically adjusts image quality to balance file size and visual quality.
• f_auto. Automatically selects the best format (e.g., WebP, JPEG) based on browser compatibility.

Here’s how the optimized image will look:

Dynamic URLs offer a powerful and flexible solution for managing visual assets within your e-commerce platform. They optimize workflows, improve performance, and deliver a more engaging user experience. To further enhance your strategy, you can measure the impact of these optimizations using Cloudinary’s analytics tools, which provide actionable insights into how your images are performing across your platform.

Cloudinary’s analytics tools offer valuable insights, helping you to optimize user experience and engagement. By accessing the Analytics section of your Cloudinary dashboard, you can track key metrics such as transformation usage, delivery performance, and bandwidth consumption. These metrics are critical for understanding your product images’ performance and where improvements can be made.

Here’s how you can leverage Cloudinary’s analytics tools to analyze and optimize your product images:

1. Access the Reports dashboard. Navigate to the Reports section from the main dashboard. Select the time frame you want to analyze (e.g., “Last 30 days”). Here, you’ll find an overview of your media usage, including metrics like bandwidth consumption, popular transformations, and asset delivery performance.

2. Identify high-performing product images. Go to the Top Assets section and filter by Image type. This will show you which product images are consuming the most bandwidth or generating the most requests. For example, cnutpjpjm0skwstrrlbb.png is among the top assets, which indicates that this image is being heavily used or requested, making it a high-performing asset.

3. Optimize underperforming product images. Head to the Top Transformations section to see which transformations are applied to your images. For example, if f_auto,q_auto/webp is a popular transformation, it suggests that the WebP format is widely used for optimized delivery. If certain product images do not appear in the Top Assets list, consider applying transformations like resizing, compression, or format optimization to improve their performance.

4. Understand audience preferences. Check the Top Formats section to see which image formats (e.g., PNG, JPEG, WebP) are most popular with your audience. For example, if WebP accounts for 7.45% of bandwidth usage, it may be worth prioritizing this format for faster load times.

• Use the Top Countries and Top Browsers data to tailor your product images to your audience. For instance, if most of your traffic comes from France, ensure your images are optimized for this demographic and browser. To learn more, check out Cloudinary’s Analytics Documentation or explore the Reports page to see these features.

Optimizing product images for higher conversions is no longer a guessing game. Cloudinary’s digital asset management simplifies this process with tools like Studio for creating and testing variations, MediaFlows for automating workflows, and dynamic URLs for delivering real-time optimized visuals. Businesses can systematically test and refine their product images based on data, improving performance and returns.

Sign up for Cloudinary today to create, test, and deliver captivating visuals that drive measurable results.