{"id":21788,"date":"2018-08-30T15:37:41","date_gmt":"2018-08-30T15:37:41","guid":{"rendered":"http:\/\/how_to_optimize_and_deliver_media_in_your_commerce_cloud_store_with_cloudinary"},"modified":"2024-06-05T16:05:18","modified_gmt":"2024-06-05T23:05:18","slug":"how_to_optimize_and_deliver_media_in_your_commerce_cloud_store_with_cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how_to_optimize_and_deliver_media_in_your_commerce_cloud_store_with_cloudinary","title":{"rendered":"How to optimize and deliver media in your Commerce Cloud store with Cloudinary"},"content":{"rendered":"

As you may have heard<\/a>, Cloudinary, the end-to-end media management solution, now has a certified cartridge with Salesforce Commerce Cloud (formerly Demandware), one of the industry\u2019s most agile and scalable eCommerce platforms. The Cloudinary cartridge enables you to simplify and automate the process of manipulating, optimizing, and delivering images and videos throughout your entire Commerce Cloud store, including product images and videos, category assets, and site catalogs.<\/p>\n

The cartridge provides access to Cloudinary\u2019s powerful media management capabilities, including cutting edge dynamic image and video manipulation features, responsive images, image optimization, fast multi-CDN delivery and much more<\/a>. With Cloudinary, you can quickly and easily enhance images and videos as well as automate management and publication of visual media. Your customers can then enjoy an optimal shopping experience across browsers, channels, and devices, raising the conversion rates for your site.<\/p>\n

The announcement mentioned above shares more about the \u2018what\u2019 and \u2018why\u2019 of this exciting integration. In this post, we\u2019ll get a bit more into the nitty gritty and show you how it all works.<\/p>\n

The Cloudinary cartridge<\/h2>\n

The Cloudinary cartridge is now available in the marketplace<\/a>.<\/p>\n

\"Download<\/p>\n

Setting up the Cloudinary cartridge is pretty standard and entails installing and configuring the cartridge in Demandware Studio and then adding the cartridge, int_cloudinary<\/strong>, to your sites. Of-course you\u2019ll need a Cloudinary account as well (you can sign up for a free account<\/a> if you don\u2019t have one yet).<\/p>\n

All of this information is covered in detail in the Cloudinary cartridge integration guide (available for registered Cloudinary cartridge users), so let\u2019s dive right in and show you what you can do after it\u2019s up and running!<\/p>\n

Uploading media assets<\/h2>\n

One of the major advantages of using Cloudinary is that you will only ever need to upload a single high-res version of any media asset. Cloudinary can then deliver any version of the image you may need, whether a thumbnail or banner, whether landscape or portrait, and take care of all the resizing, optimization and transformations from that single uploaded asset for you automatically.<\/p>\n

Cloudinary can even replace the dominant (or any specified) color in your images, including appropriate shadows and shades, so you don\u2019t even need to upload multiple images to present your products in different colors. For example, just applying a single transformation parameter definition: e_replace_color:darkgreen:80:2b38aa<\/code> on the blue burlap bag image shown below (exact blue shade to replace = #2b38aa<\/code>), enables you to also deliver that same image in dark green or any other color you choose.<\/p>\n

\n<\/div>\n
\n\n\"Original<\/a>\nOriginal product: blue<\/b>\n<\/span>\n\n\"Auto-recolor<\/a>\nAuto-recolor: dark green<\/b>\n<\/span>\n\n\"Auto-recolor<\/a>\nAuto-recolor: red<\/b>\n<\/span>\n<\/div>\n
\n<\/div>\n

With this in mind, you continue to upload your product and catalog assets to SFCC as usual, but now these assets will also automatically be synchronized with your Cloudinary account.<\/p>\n

Creating dynamic variants of your images using transformations<\/h2>\n

Cloudinary transformations enable you to generate virtually unlimited variations of a single image to achieve a variety of optimizations and special effects. Cloudinary has a remarkable set of image transformations<\/a> available for your use.<\/p>\n

These transformations can be applied at various levels in your store, with the transformations for the most specific level taking precedence. So, for example, a transformation set that includes a text overlay showing 50% Off<\/strong> for an image on the product level will override a transformation set with a text overlay saying 25% Off<\/strong> that was set for an image on the catalog level. The order of precedence is: Image -> Product -> Catalog -> Site<\/strong>. This gives you the power to apply transformations to groups of images, but still retain the flexibility to apply special transformations to specific images. This is handled with a new option in the Image Settings<\/strong> page of each of the 4 levels, where you can add the desired transformation.<\/p>\n

For example, if you have a briefcase that is currently selling at a 20% discount, you may want to navigate to the Global Image Settings tab of that specific product and add a text overlay with the following definitions: Arial, bold, 30px, and the text \u201c20% Off\u201d in white font with a black border (so it will show up on any image background), 10 pixels from the bottom-right corner and rotated at an angle of -45 degrees.<\/p>\n

\"20%<\/a><\/p>\n

While you are at it, you can also add an SEO suffix<\/a> so that the product will be more likely to be displayed by search engines. Here\u2019s the short definition you would add to achieve all of this:<\/p>\n

{\n "Transformations":\n    "l_text:Arial_30_bold_stroke:20%25%20Off,\n    g_south_east,co_white,bo_3px_solid_black,y_10,x_10,a_-45",\n    "seoSuffix": "bag-sale"\n\n}\n<\/code><\/pre>\n
The Cloudinary cartridge also provides you with a Transformation Preview<\/strong> page to help you visualize the transformations before you apply them. For example, below a Commerce Cloud developer has defined transformation parameters that overlays a \u2018SALE\u2019 sign on a product and applies an artistic filter to focus on and enhance the product image. Before applying the transformation to a whole set of products, he can preview it on a selected image:<\/p>\n
\"Cloudinary<\/p>\n
Fast and responsive image delivery<\/h2>\n
Cloudinary uses simple HTTPS URLs to deliver your assets to users via a worldwide fast CDN. The URL contains the Public ID of the requested asset plus any optional transformation parameters.<\/p>\n
Cloudinary also lets you add responsive behavior to your images to make sure that the optimal image size is delivered to each user based on the available space on their viewing device. Cloudinary\u2019s URL-generation method optionally accepts a JSON object that maps viewport sizes to image sizes and then automatically  generates the values to be used for the srcset<\/code> and sizes<\/code> attributes of the image tag.<\/p>\n
The following code example shows how to:<\/p>\n