Streamlining the Process of Product Image Creation
Streamlining the Process of Product Image Creation
Filters and effects
Background removal

Whether you've just launched a Shopify site for your latest product, or you're a multibillion dollar retailer with expansive design teams, you probably have significant room to improve and make more efficient the process of how raw photographs are transformed into compelling images on your website’s product pages.

You'll want to create product shots that are:

The process is fairly straightforward and can be customized to fit whatever your needs might be:

Let's start with an image (click to view the original): Photo with Background Removed
First, when uploading, send Cloudinary both the original, as well as a second version that uses the add-on effect of Remove-The-Background, which is powered by the folks over at Pixelz. Pixelz is fast, fairly economical (it includes a number of free images each month), and it produces great work. In a few hours, you'll have the second asset replaced in the account with the altered version (as a PNG typically).

Photo with Background Removed

Next, we'll get the product image into a set of standard dimensions. In this case, let's say that we want all of our images to be 500x500 squares. Here are the next steps:

  • Dynamic Variables: Set the $imgwidth and $imgheight variables in the beginning of the string for easy reference
  • Trim Effect: Cut out the excess padding that was left from the background removal so that the product touches each edge of the image
  • Conditional Resizing: Based on the height and width variables that were defined, reduce the border width
  • Border: Add in a border around the product to offset from the edge of the image
  • Padding: Perform a crop and resize to the preferred width and height dimensions of the final product (500 x 500)
  • Background Color: Select the color for the background of the entire image (in this example, eggshell white)
  • Optimize the final image for delivery with auto quality and auto formatting

Processed Product Photo$imgwidth_500/$imgheight_500/$border_10/e_trim/if_w_gte_h,w_$imgwidth_sub_$border_mul_2/if_else,h_$imgheight_sub_$border_mul_2/bo_10px_solid_rgb:ffffff00/c_pad,w_$imgwidth,h_$imgheight,b_rgb:f0ead6/q_auto,f_auto/wood_chair.png

And you're done! With Cloudinary, you now can manage your original and altered digital assets all in one place. You also can quickly make other versions of the processed photo as needed. For example, you can:

  • Change the background to white for listing on Amazon
  • Include various sizes of images for your product pages - thumbnails, standard shots, and zoomed-in views
  • Use a different aspect ratio if/when you redesign the website
  • Replace the photo with an updated shot if your product line evolves over time