Using Cloudinary for eCommerce

Nothing improves sales on the web than imagery and video.  You can describe an item a dozen ways but one picture can suck the user right in, multiple photos (including a nice zoom feature) can clinch the sale.  What does this mean?  It’s important to provide users with performant, detailed, and quality images for both desktop and mobile.  Luckily Cloudinary provides a variety of optimization methods and media features so you can showcase your products in an optimized, customizable fashion.

Let’s have a look at some of the features and methods Cloudinary provides for optimizing, creating, and delivering images in eCommerce sites!

Background Removal

Unless you’re using a professional photographer, you’re likely going to want touching up of your photos, but doing so takes time and expertise.  Instead of throwing loads of time or money at background removal, upload the image to Cloudinary for background removal:

// npm install cloudinary
var cloudinary = require('cloudinary'); // Set your API information
cloudinary.config({ cloud_name: 'david-walsh-blog', api_key: '############', api_secret: '############'
}); // Upload an image, cloudinary.uploader.upload('sample-photos/my-photo.jpg', function(result) { // Log out the result to get the URL of the image console.log(result); // Image url is: result.url / result.secure_url
}, { public_id: "my-photo", background_removal: "remove_the_background"

Taking the step to remove the photo background, if necessary, sets the stage for more transformations.  Cleanup!

Easy, Dynamic Image Sizing by URL

The simplest image transformation feature is dynamic image sizing which can be done by slightly modifying the URL to an image:

If you’re using Cloudinary’s awesome React.js API, you can simply add the width and height attributes to the Image and the image will be dynamically transformed to that size:

Customized image sizing optimizes both load time and rendering time!

Content Aware Cropping

Most sites prefer all product images to be cut to certain sizes, making displaying product images in templates easy and predictable.  There will be times, however, that thumbnails need to be used and it would be nice if just the image was cropped to the main focal point.  Cloudinary can do this with content aware cropping!

With Cloudinary’s content aware cropping, you can look for a face or other focal point while cropping the image to size!


The layering transformation feature is one of the most amazing features from Cloudinary.  Using the Cloudinary API, you can upload images which can overlay other images!  Think of a price tag image on top of your product image, along with some price text:

The resulting  and URL looks is:$price_!200!/a_20,c_scale,g_north_west,l_price-tag,w_100/a_20,co_rgb:fff,g_north_west,l_text:fira%20mono_16_bold:$$(price),x_45,y_27/diana

You can complete this layering with any other transformation, so you can overlay image and text on a content aware cropped image of a dynamic size.  That’s one of the really power functions of Cloudinary!

Client Hints

A few months back I showed you the newly supported client hints feature in browsers.  Client hints allow your browser to share your viewport dimensions in requests so that servers can dynamically generate and return an optimized image:

Client Hints

Cloudinary supports client hints so be sure to add the  tag to enable them!

Pulling it all Together!

Using the techniques cited above, along with a few others, I’ve created a crude single page product display and shopping cart using cloudinary-react:

import React, { Component } from 'react';
import './App.css'; import { Image, Transformation, CloudinaryContext } from 'cloudinary-react'; let products = [ { id: 'diana', title: 'Pricess Di', price: '200' }, { id: 'obama', title: 'President Obama', price: '150' }, { id: 'usa', title: 'Innauguration', price: '75' }
]; class App extends Component { state = { currentProduct: products[0], cart: [] }; addToCart = (publicId) => { this.state.cart.push(this.state.currentProduct); this.setState({ cart: this.state.cart }); } render() { return ( 

Product Detail

Products in Stock

Click the thumbnail below to view a larger image.

{ => { return this.setState({ currentProduct: product })} publicId={} width="200"/>; })}

Your Cart

{this.state.cart.length ? => { return ; }) : 'Cart is empty'}
); } } export default App;

Client Hints

All images are sized dynamically, price overlays are added to product detail images, and any product added to cart will provide content aware images as thumbnails so that the thumbnail can be small but the user knows exactly the detail needed to make out what the item is.

While these techniques have been presented as awesome eCommerce feature usages, the truth is that each of these features can be used in any situation to improve performance and visibility.  Don’t forget that Cloudinary provides PHP, Node.js, Ruby, Java, Python, and other APIs to upload, modify, and display your images.  Give Cloudinary a shot — you wont be disappointed!

Related Post

Rojenx is a leading concept artist who work appears in games and publications

Check out his personal gallery here

In other news …