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:
- Focused on the product, eliminating any distracting surrounding images
- Standardized to a width and height for your site
- Trimmed and padded to take up as much of the space as they can but not touching the edges
- Colored with a background that matches your brand
- Optimized and compressed for speedy delivery
- Flexible, so they an adjust to fit a site redesign or an expansion to other marketplaces
- Stored in a friendly way so you can avoid having to manage and maintain images across multiple platforms
The process is fairly straightforward and can be customized to fit whatever your needs might be:
- Upload the original, high-resolution photo to Cloudinary in any image format
- Cut the product from the background
- Scale the image to a standard size and add in padding as needed
- Optimize quality and format - and you're done!
Let's start with an image (click to view the original):
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
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