How to create e-commerce images with consistent brand guidelines

On this page you will find the details of how the Image Editing API enables you to edit your product images so that their look-and-feel is consistent across your entire catalog.

Introduction

If you’re running an e-commerce website, you know how important it is to have product images that follow the same brand guidelines, so that the look-and-feel is consistent from one image to the next.

But if you're getting your product images from different sources, it's very likely that you receive them with very different aspect ratios, product positioning or even background color:

However what you want is to have all your images follow the same brand guidelines, such as:

• 1920x1080 pixels

• white background

• centered product

• 10% of padding

So let's go over how we can implement these guidelines using the Image Editing API.

Implementation

Output Size

Let's start by making sure that the images all have the same resolution.

We can configure the resolution through the parameter outputSize, by setting its value to 1920x1080.

White Background

By default, the Image Editing API will remove the background of the input image, so there's no need to set a specific argument for it to happen.

However, we do need to specify that we want to result image to be on a white background.

To achieve this, we'll use the parameter background.color which allows us to replace the background with a solid color and set its value to white.

Centered Product

By default, the Image Editing API will automatically center the product in the result image.

However, if some sides of the product are cropped, then by default the API will snap these sides of the product to the corresponding edges of the result image.

The goal of this behavior is to avoid having empty whitespace between the cropped edges of the product and the edges of the result image:

But if needed, this behavior can be disabled by setting the parameter ignorePaddingAndSnapOnCroppedSides to false.

Padding

Finally, we need to configure the positionning of the product, so that there's 10% of padding between the product and the edges of the result image.

For this, we'll set the parameter padding to the value 10%.

API Call

Using the parameters outputSize, background.color, ignorePaddingAndSnapOnCroppedSides and padding we're now ready to automatically edit the product images to make them compliant with the brand guidelines.

Here's the API call we'll use:

Results

Here's a before/after of the results this API call produces:

Conclusion

The Image Editing API allows you to easily edit your product images so that they comply with your brand guidelines and that you have a consistent look-and-feel across your entire catalog.

If you want to learn more, here's the details of the API features used in this tutorial:

• Output Size

• Solid Color Background

• Positioning