Using Cloudinary for eCommerce

By  on  

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:

<!-- Size image to 300x300 -->
<img src="https://res.cloudinary.com/david-wash-blog/image/upload/w_300,h_300/usa">

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:

<Image
  publicId="ringo"
  width="300"
  height="300">

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!

<img src="https://res.cloudinary.com/david-wash-blog/image/upload/g_auto/diana">

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

Layers

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:

<Image
  publicId="diana"
  width="400">
  <Transformation raw_transformation="200" />
  <Transformation angle="20" crop="scale" gravity="north_west" overlay="price-tag" width="100" />
  <Transformation angle="20" color="rgb:fff" gravity="north_west" overlay="text:fira%20mono_16_bold:$$(price)" x="45" y="27" />
</Image>

The resulting <img> and URL looks is:

https://res.cloudinary.com/david-wash-blog/image/upload/$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:

<meta http-equiv="Accept-CH" content="DPR, Width">
Client Hints

Cloudinary supports client hints so be sure to add the <meta> 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 (
      <div>
        <CloudinaryContext cloudName="david-wash-blog">
        <div className="detail">
          <h2>Product Detail</h2>
          <Image
            publicId={this.state.currentProduct.id}
            width="400">
            <Transformation raw_transformation={`$price_!${this.state.currentProduct.price}!`} />
            <Transformation angle="20" crop="scale" gravity="north_west" overlay="price-tag" width="100" />
            <Transformation angle="20" color="rgb:fff" gravity="north_west" overlay="text:fira%20mono_16_bold:$$(price)" x="45" y="27" />
          </Image>
          <button onClick={this.addToCart}>Add to Cart</button>
        </div>

        <div className="available">
          <h2>Products in Stock</h2>
          <p>Click the thumbnail below to view a larger image.</p>
          {products.map(product => {
            return <Image key={product.id} onClick={() =>this.setState({ currentProduct: product })} publicId={product.id} width="200"/>;
          })}
        </div>

        <div className="cart">
          <h2>Your Cart</h2>
          {this.state.cart.length ? this.state.cart.map(product => {
            return <Image key={product.id} gravity="auto" crop="crop" publicId={product.id} width="100"/>;
          }) : 'Cart is empty'}
        </div>
      </CloudinaryContext></div>
    );
  }
}

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!

Recent Features

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Highlighter: A MooTools Search &#038; Highlight Plugin

    Searching within the page is a major browser functionality, but what if we could code a search box in JavaScript that would do the same thing? I set out to do that using MooTools and ended up with a pretty decent solution. The MooTools JavaScript Class The...

  • By
    MooTools onLoad SmoothScrolling

    SmoothScroll is a fantastic MooTools plugin but smooth scrolling only occurs when the anchor is on the same page. Making SmoothScroll work across pages is as easy as a few extra line of MooTools and a querystring variable. The MooTools / PHP Of course, this is a...

Discussion

  1. Wow, I will definitely have to do more with Cloudinary moving forward. Looks like it can do some really useful stuff. Thanks for the information!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!