Product Personalization Images with Cloudinary
A few weeks ago I experimented with using Cloudinary in eCommerce sites because dynamic imagery is a massive part of eCommerce needs.
Media-heavy websites usually employ powerful, expensive image-manipulation software so that they can create images on demand. Little do they know that a service like Cloudinary can do what their service does and more, including optimized delivery, cloud storage, etc. Image manipulation via code does very much interest me because I'm not a designer and prefer not to use PhotoShop, plus automated image manipulation is a way better use of everyone's time.
Let's have a look at how we can create personalized, customized images with the Cloudinary API!
Why Personalize?
The use cases for image customization and personalization are a mile long, but here are a few:
- A/B testing - We programmatically show different content to users -- why not extend that to imagery?
- Conversion - Potential customers may be more persuaded by a personalized image than a "your name here" generic image
- User Generated Content - Users can upload their own imagery or use their own text to generate a custom product
- Maintenance - You may lighten your maintenance burden if it can be delegated to automation
- Sharing - You can create customized social sharing images
Those are just a few important reasons. Let's check out how we can create personalized images with Cloudinary's amazing API!
Overlaying Images
I occasionally think about creating David Walsh Blog merchandise; nothing out of the ordinary, maybe a DWB T-shirt or coffee mug. I don't want to use PhotoShop to create these images, but I do want my T-shirt mockups as one merged image so I can more easily share them or tweak them without needing a UI. Let's start by making a simple David Walsh Blog T-shirt!
The first step is uploading the required images: a few different colored t-shirt images and the DWB logo. After a few minutes reading the image transformation documentation, I was able to create the black and white DWB shirt images with only a URL:
<!-- White shirt --> <img src="https://res.cloudinary.com/david-wash-blog/image/upload/l_logo,w_80,o_90,x_10,y_0/shirt-white.jpg"> <!-- Black shirt --> <img src="https://res.cloudinary.com/david-wash-blog/image/upload/l_logo,w_80,o_90,x_0,y_0/shirt-black.jpg">
 |
 |
The l_logo piece refers to the logo-named image I uploaded to Cloudinary (l_ prefix means an image name will follow it), the w_80 sets the logo width to 80, the o_90 refers to the level of opacity, and the final image name is the image at the "bottom" of the overlay stack (the image to have overlays onto, to explain another way). Let's create a DWB mug:
<img src="https://res.cloudinary.com/david-wash-blog/image/upload/l_logo,w_160,o_90,x_-50,y_0/mug.jpg">
If you prefer to use the Node.js method, you could do this:
cloudinary.image("mug.jpg", {
overlay: "logo",
width: 160,
opacity: 90,
x:-50
});
Check out the image transformation documentation to learn more about overlay placement and other small modifications!
Overlaying Text
Overlaying images on top of other images is a tough trick but even trickier is text. And it's more maintenance too...unless you can easily automate. Text in images can represent pricing, the entire image's purpose or content, a sales or clearance notification, a category name, or just about everything else. Cloudinary makes generating text on images easy: you can generate images with text based on URL modification!
<img src="https://res.cloudinary.com/david-wash-blog/image/upload/l_logo,w_80,o_90,x_0,y_0/w_320,h_400,c_fill,bo_1px_solid_gray/l_white-bar,w_300,h_90,g_south,y_20/l_text:Helvetica_36:Shirts >,g_south,y_48/shirt-black.jpg">
Building on the DWB shirt image we've created, the code above creates a "category" conversion image with text noting the category of the given product. This category image overlays a white block image and we dynamically add text with the desired font name, font size, and positioning information.
BONUS! Overlay Banter
As in idea to market my site, I thought about creating a fun tool to let people upload a photo and overlay the DWB face over their face. I nixed the idea because a few people may share the images but return on investment would probably not be great. I used to, however, put DWB stickers on stock photo faces when I walked around downtown Madison. For some reason I get a kick out of re-facing images. I had some fun with Cloudinary's API to create this effect within images:
<img src="https://res.cloudinary.com/david-wash-blog/image/upload/l_logo,g_faces,w_1.1,fl_region_relative/oceans-eleven.jpg">
The g_faces (gravity: faces) in this URL directs Cloudinary to overlay my logo on every face detected, which works great in the case of this Ocean's Eleven picture:
Cloudinary provides developers the ability create quality, customized images on the fly. It's an awesome feat and what's even more awesome is that's just a small part of Cloudinary's offering, which includes image optimization, powerful transformations, and responsive images with client hints. Imagery can be a massive maintenance nightmare but when Cloudinary lets you make it programmatic, the nightmare goes away!
