Cloudinary Blog

Headshot transformations from Fluent + Velocity 2018

Headshot transformations from Fluent + Velocity 2018

On June 13-14, O'Reilly held its annual Fluent + Velocity conference in San Jose and it was great! Cloudinary set up a pretty incredible booth and brought in a professional photographer to take headshots of the attendees who stopped by. Once a photo was snapped, the raw camera file was immediately uploaded to our media library and transformed into something that can be posted right away on LinkedIn.

The setup was effective and easy: We connected the camera to a laptop in the booth with a wired connection via USB (this could just as easily do that over WiFi or Bluetooth as well), which dumped every new photo that was taken into a folder. Then we had a simple node script monitor for new files, and, when they are found, upload them directly to Cloudinary. That took only seconds! By the time people had handed in five to eight professional, high-resolution shots from the photographer, we had the shots all in Cloudinary and ready for the manipulations below.

Cloudinary Headshot DIY

Transformation Station

If you attended Fluent + Velocity and stopped by for a professional headshot at our photo booth (or you've got one from a different source), below are examples of some of the transformations we demonstrated to inspire your own exciting creations.

First, a professional, clean, simple, and effective transformation for use at LinkedIn and similar sites:

  1. Crop to a 1:1 aspect ratio with the face centered, round corners all the way for a circle image.
  2. Apply a grayscale effect.

Apply at scale to 1,000 headshots of your employees and you'll have created a great looking About Us page in no time.

Ruby:
cl_image_tag("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg", :transformation=>[
  {:aspect_ratio=>"1:1", :width=>500, :gravity=>"faces", :effect=>"grayscale", :radius=>"max", :crop=>"fill"},
  {:quality=>"auto", :fetch_format=>:auto}
  ])
PHP:
cl_image_tag("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg", array("transformation"=>array(
  array("aspect_ratio"=>"1:1", "width"=>500, "gravity"=>"faces", "effect"=>"grayscale", "radius"=>"max", "crop"=>"fill"),
  array("quality"=>"auto", "fetch_format"=>"auto")
  )))
Python:
CloudinaryImage("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg").image(transformation=[
  {'aspect_ratio': "1:1", 'width': 500, 'gravity': "faces", 'effect': "grayscale", 'radius': "max", 'crop': "fill"},
  {'quality': "auto", 'fetch_format': "auto"}
  ])
Node.js:
cloudinary.image("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg", {transformation: [
  {aspect_ratio: "1:1", width: 500, gravity: "faces", effect: "grayscale", radius: "max", crop: "fill"},
  {quality: "auto", fetch_format: "auto"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .aspectRatio("1:1").width(500).gravity("faces").effect("grayscale").radius("max").crop("fill").chain()
  .quality("auto").fetchFormat("auto")).imageTag("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg");
JS:
cloudinary.imageTag('_MG_8655_svs9ab_ghxhhf_lrafi0.jpg', {transformation: [
  {aspectRatio: "1:1", width: 500, gravity: "faces", effect: "grayscale", radius: "max", crop: "fill"},
  {quality: "auto", fetchFormat: "auto"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg", {transformation: [
  {aspect_ratio: "1:1", width: 500, gravity: "faces", effect: "grayscale", radius: "max", crop: "fill"},
  {quality: "auto", fetch_format: "auto"}
  ]})
React:
<Image publicId="_MG_8655_svs9ab_ghxhhf_lrafi0.jpg" >
  <Transformation aspectRatio="1:1" width="500" gravity="faces" effect="grayscale" radius="max" crop="fill" />
  <Transformation quality="auto" fetchFormat="auto" />
</Image>
Angular:
<cl-image public-id="_MG_8655_svs9ab_ghxhhf_lrafi0.jpg" >
  <cl-transformation aspect-ratio="1:1" width="500" gravity="faces" effect="grayscale" radius="max" crop="fill">
  </cl-transformation>
  <cl-transformation quality="auto" fetch-format="auto">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("1:1").Width(500).Gravity("faces").Effect("grayscale").Radius("max").Crop("fill").Chain()
  .Quality("auto").FetchFormat("auto")).BuildImageTag("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("1:1").width(500).gravity("faces").effect("grayscale").radius("max").crop("fill").chain()
  .quality("auto").fetchFormat("auto")).generate("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setAspectRatio("1:1").setWidth(500).setGravity("faces").setEffect("grayscale").setRadius("max").setCrop("fill").chain()
  .setQuality("auto").setFetchFormat("auto")).generate("_MG_8655_svs9ab_ghxhhf_lrafi0.jpg")!, cloudinary: cloudinary)
Transformation 1

Next, a transformation that shows personality and creativity. We swapped the purple hair color for a variety of other colors, with the e_replace_color effect dialed in to create the best result possible for a few minutes at the demo station.

Ruby:
cl_image_tag("fluent/thadlrc9tfo7a5valtpg.jpg", :transformation=>[
  {:aspect_ratio=>"2:3", :width=>400, :gravity=>"face", :crop=>"fill"},
  {:overlay=>"fluent:thadlrc9tfo7a5valtpg", :aspect_ratio=>"2:3", :width=>400, :gravity=>"face", :effect=>"replace_color:orange:55:purple", :crop=>"fill"},
  {:flags=>"layer_apply", :gravity=>"west", :x=>400},
  {:overlay=>"fluent:thadlrc9tfo7a5valtpg", :aspect_ratio=>"2:3", :width=>400, :gravity=>"face", :effect=>"replace_color:blue:55:purple", :crop=>"fill"},
  {:flags=>"layer_apply", :gravity=>"west", :x=>800},
  {:overlay=>"fluent:thadlrc9tfo7a5valtpg", :aspect_ratio=>"2:3", :width=>400, :gravity=>"face", :effect=>"replace_color:green:55:purple", :crop=>"fill"},
  {:flags=>"layer_apply", :gravity=>"west", :x=>1200}
  ])
PHP:
cl_image_tag("fluent/thadlrc9tfo7a5valtpg.jpg", array("transformation"=>array(
  array("aspect_ratio"=>"2:3", "width"=>400, "gravity"=>"face", "crop"=>"fill"),
  array("overlay"=>"fluent:thadlrc9tfo7a5valtpg", "aspect_ratio"=>"2:3", "width"=>400, "gravity"=>"face", "effect"=>"replace_color:orange:55:purple", "crop"=>"fill"),
  array("flags"=>"layer_apply", "gravity"=>"west", "x"=>400),
  array("overlay"=>"fluent:thadlrc9tfo7a5valtpg", "aspect_ratio"=>"2:3", "width"=>400, "gravity"=>"face", "effect"=>"replace_color:blue:55:purple", "crop"=>"fill"),
  array("flags"=>"layer_apply", "gravity"=>"west", "x"=>800),
  array("overlay"=>"fluent:thadlrc9tfo7a5valtpg", "aspect_ratio"=>"2:3", "width"=>400, "gravity"=>"face", "effect"=>"replace_color:green:55:purple", "crop"=>"fill"),
  array("flags"=>"layer_apply", "gravity"=>"west", "x"=>1200)
  )))
Python:
CloudinaryImage("fluent/thadlrc9tfo7a5valtpg.jpg").image(transformation=[
  {'aspect_ratio': "2:3", 'width': 400, 'gravity': "face", 'crop': "fill"},
  {'overlay': "fluent:thadlrc9tfo7a5valtpg", 'aspect_ratio': "2:3", 'width': 400, 'gravity': "face", 'effect': "replace_color:orange:55:purple", 'crop': "fill"},
  {'flags': "layer_apply", 'gravity': "west", 'x': 400},
  {'overlay': "fluent:thadlrc9tfo7a5valtpg", 'aspect_ratio': "2:3", 'width': 400, 'gravity': "face", 'effect': "replace_color:blue:55:purple", 'crop': "fill"},
  {'flags': "layer_apply", 'gravity': "west", 'x': 800},
  {'overlay': "fluent:thadlrc9tfo7a5valtpg", 'aspect_ratio': "2:3", 'width': 400, 'gravity': "face", 'effect': "replace_color:green:55:purple", 'crop': "fill"},
  {'flags': "layer_apply", 'gravity': "west", 'x': 1200}
  ])
Node.js:
cloudinary.image("fluent/thadlrc9tfo7a5valtpg.jpg", {transformation: [
  {aspect_ratio: "2:3", width: 400, gravity: "face", crop: "fill"},
  {overlay: "fluent:thadlrc9tfo7a5valtpg", aspect_ratio: "2:3", width: 400, gravity: "face", effect: "replace_color:orange:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 400},
  {overlay: "fluent:thadlrc9tfo7a5valtpg", aspect_ratio: "2:3", width: 400, gravity: "face", effect: "replace_color:blue:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 800},
  {overlay: "fluent:thadlrc9tfo7a5valtpg", aspect_ratio: "2:3", width: 400, gravity: "face", effect: "replace_color:green:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 1200}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .aspectRatio("2:3").width(400).gravity("face").crop("fill").chain()
  .overlay(new Layer().publicId("fluent:thadlrc9tfo7a5valtpg")).aspectRatio("2:3").width(400).gravity("face").effect("replace_color:orange:55:purple").crop("fill").chain()
  .flags("layer_apply").gravity("west").x(400).chain()
  .overlay(new Layer().publicId("fluent:thadlrc9tfo7a5valtpg")).aspectRatio("2:3").width(400).gravity("face").effect("replace_color:blue:55:purple").crop("fill").chain()
  .flags("layer_apply").gravity("west").x(800).chain()
  .overlay(new Layer().publicId("fluent:thadlrc9tfo7a5valtpg")).aspectRatio("2:3").width(400).gravity("face").effect("replace_color:green:55:purple").crop("fill").chain()
  .flags("layer_apply").gravity("west").x(1200)).imageTag("fluent/thadlrc9tfo7a5valtpg.jpg");
JS:
cloudinary.imageTag('fluent/thadlrc9tfo7a5valtpg.jpg', {transformation: [
  {aspectRatio: "2:3", width: 400, gravity: "face", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("fluent:thadlrc9tfo7a5valtpg"), aspectRatio: "2:3", width: 400, gravity: "face", effect: "replace_color:orange:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 400},
  {overlay: new cloudinary.Layer().publicId("fluent:thadlrc9tfo7a5valtpg"), aspectRatio: "2:3", width: 400, gravity: "face", effect: "replace_color:blue:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 800},
  {overlay: new cloudinary.Layer().publicId("fluent:thadlrc9tfo7a5valtpg"), aspectRatio: "2:3", width: 400, gravity: "face", effect: "replace_color:green:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 1200}
  ]}).toHtml();
jQuery:
$.cloudinary.image("fluent/thadlrc9tfo7a5valtpg.jpg", {transformation: [
  {aspect_ratio: "2:3", width: 400, gravity: "face", crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("fluent:thadlrc9tfo7a5valtpg"), aspect_ratio: "2:3", width: 400, gravity: "face", effect: "replace_color:orange:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 400},
  {overlay: new cloudinary.Layer().publicId("fluent:thadlrc9tfo7a5valtpg"), aspect_ratio: "2:3", width: 400, gravity: "face", effect: "replace_color:blue:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 800},
  {overlay: new cloudinary.Layer().publicId("fluent:thadlrc9tfo7a5valtpg"), aspect_ratio: "2:3", width: 400, gravity: "face", effect: "replace_color:green:55:purple", crop: "fill"},
  {flags: "layer_apply", gravity: "west", x: 1200}
  ]})
React:
<Image publicId="fluent/thadlrc9tfo7a5valtpg.jpg" >
  <Transformation aspectRatio="2:3" width="400" gravity="face" crop="fill" />
  <Transformation overlay="fluent:thadlrc9tfo7a5valtpg" aspectRatio="2:3" width="400" gravity="face" effect="replace_color:orange:55:purple" crop="fill" />
  <Transformation flags="layer_apply" gravity="west" x="400" />
  <Transformation overlay="fluent:thadlrc9tfo7a5valtpg" aspectRatio="2:3" width="400" gravity="face" effect="replace_color:blue:55:purple" crop="fill" />
  <Transformation flags="layer_apply" gravity="west" x="800" />
  <Transformation overlay="fluent:thadlrc9tfo7a5valtpg" aspectRatio="2:3" width="400" gravity="face" effect="replace_color:green:55:purple" crop="fill" />
  <Transformation flags="layer_apply" gravity="west" x="1200" />
</Image>
Angular:
<cl-image public-id="fluent/thadlrc9tfo7a5valtpg.jpg" >
  <cl-transformation aspect-ratio="2:3" width="400" gravity="face" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="fluent:thadlrc9tfo7a5valtpg" aspect-ratio="2:3" width="400" gravity="face" effect="replace_color:orange:55:purple" crop="fill">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="west" x="400">
  </cl-transformation>
  <cl-transformation overlay="fluent:thadlrc9tfo7a5valtpg" aspect-ratio="2:3" width="400" gravity="face" effect="replace_color:blue:55:purple" crop="fill">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="west" x="800">
  </cl-transformation>
  <cl-transformation overlay="fluent:thadlrc9tfo7a5valtpg" aspect-ratio="2:3" width="400" gravity="face" effect="replace_color:green:55:purple" crop="fill">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="west" x="1200">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("2:3").Width(400).Gravity("face").Crop("fill").Chain()
  .Overlay(new Layer().PublicId("fluent:thadlrc9tfo7a5valtpg")).AspectRatio("2:3").Width(400).Gravity("face").Effect("replace_color:orange:55:purple").Crop("fill").Chain()
  .Flags("layer_apply").Gravity("west").X(400).Chain()
  .Overlay(new Layer().PublicId("fluent:thadlrc9tfo7a5valtpg")).AspectRatio("2:3").Width(400).Gravity("face").Effect("replace_color:blue:55:purple").Crop("fill").Chain()
  .Flags("layer_apply").Gravity("west").X(800).Chain()
  .Overlay(new Layer().PublicId("fluent:thadlrc9tfo7a5valtpg")).AspectRatio("2:3").Width(400).Gravity("face").Effect("replace_color:green:55:purple").Crop("fill").Chain()
  .Flags("layer_apply").Gravity("west").X(1200)).BuildImageTag("fluent/thadlrc9tfo7a5valtpg.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("2:3").width(400).gravity("face").crop("fill").chain()
  .overlay(new Layer().publicId("fluent:thadlrc9tfo7a5valtpg")).aspectRatio("2:3").width(400).gravity("face").effect("replace_color:orange:55:purple").crop("fill").chain()
  .flags("layer_apply").gravity("west").x(400).chain()
  .overlay(new Layer().publicId("fluent:thadlrc9tfo7a5valtpg")).aspectRatio("2:3").width(400).gravity("face").effect("replace_color:blue:55:purple").crop("fill").chain()
  .flags("layer_apply").gravity("west").x(800).chain()
  .overlay(new Layer().publicId("fluent:thadlrc9tfo7a5valtpg")).aspectRatio("2:3").width(400).gravity("face").effect("replace_color:green:55:purple").crop("fill").chain()
  .flags("layer_apply").gravity("west").x(1200)).generate("fluent/thadlrc9tfo7a5valtpg.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setAspectRatio("2:3").setWidth(400).setGravity("face").setCrop("fill").chain()
  .setOverlay("fluent:thadlrc9tfo7a5valtpg").setAspectRatio("2:3").setWidth(400).setGravity("face").setEffect("replace_color:orange:55:purple").setCrop("fill").chain()
  .setFlags("layer_apply").setGravity("west").setX(400).chain()
  .setOverlay("fluent:thadlrc9tfo7a5valtpg").setAspectRatio("2:3").setWidth(400).setGravity("face").setEffect("replace_color:blue:55:purple").setCrop("fill").chain()
  .setFlags("layer_apply").setGravity("west").setX(800).chain()
  .setOverlay("fluent:thadlrc9tfo7a5valtpg").setAspectRatio("2:3").setWidth(400).setGravity("face").setEffect("replace_color:green:55:purple").setCrop("fill").chain()
  .setFlags("layer_apply").setGravity("west").setX(1200)).generate("fluent/thadlrc9tfo7a5valtpg.jpg")!, cloudinary: cloudinary)
Transformation 2

Finally, something fun and eye catching: Create on Cloudinary an animated GIF from a set of images by leveraging many of the cool capabilities showcased above to standardize everything and by adding a text overlay for social sharing.

To do all that, simply tag all the images you desire for the set, perform the standard transformations of a crop to a 1:1 aspect ratio, and add a text overlay in the bottom-right corner.

Ruby:
cl_image_tag("fluent-gif-1.gif", :type=>"multi", :transformation=>[
  {:aspect_ratio=>"1:1", :width=>300, :gravity=>"face", :crop=>"fill"},
  {:overlay=>{:font_family=>"rubik", :font_size=>25, :font_weight=>"bold", :stroke=>"stroke", :text=>"Cloudinary%20Rocks%21"}, :gravity=>"south_east", :color=>"blue", :border=>"2px_solid_pink"},
  {:delay=>"500"}
  ])
PHP:
cl_image_tag("fluent-gif-1.gif", array("type"=>"multi", "transformation"=>array(
  array("aspect_ratio"=>"1:1", "width"=>300, "gravity"=>"face", "crop"=>"fill"),
  array("overlay"=>array("font_family"=>"rubik", "font_size"=>25, "font_weight"=>"bold", "stroke"=>"stroke", "text"=>"Cloudinary%20Rocks%21"), "gravity"=>"south_east", "color"=>"blue", "border"=>"2px_solid_pink"),
  array("delay"=>"500")
  )))
Python:
CloudinaryImage("fluent-gif-1.gif").image(type="multi", transformation=[
  {'aspect_ratio': "1:1", 'width': 300, 'gravity': "face", 'crop': "fill"},
  {'overlay': {'font_family': "rubik", 'font_size': 25, 'font_weight': "bold", 'stroke': "stroke", 'text': "Cloudinary%20Rocks%21"}, 'gravity': "south_east", 'color': "blue", 'border': "2px_solid_pink"},
  {'delay': "500"}
  ])
Node.js:
cloudinary.image("fluent-gif-1.gif", {type: "multi", transformation: [
  {aspect_ratio: "1:1", width: 300, gravity: "face", crop: "fill"},
  {overlay: {font_family: "rubik", font_size: 25, font_weight: "bold", stroke: "stroke", text: "Cloudinary%20Rocks%21"}, gravity: "south_east", color: "blue", border: "2px_solid_pink"},
  {delay: "500"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .aspectRatio("1:1").width(300).gravity("face").crop("fill").chain()
  .overlay(new TextLayer().fontFamily("rubik").fontSize(25).fontWeight("bold").stroke("stroke").text("Cloudinary%20Rocks%21")).gravity("south_east").color("blue").border("2px_solid_pink").chain()
  .delay("500")).type("multi").imageTag("fluent-gif-1.gif");
JS:
cloudinary.imageTag('fluent-gif-1.gif', {type: "multi", transformation: [
  {aspectRatio: "1:1", width: 300, gravity: "face", crop: "fill"},
  {overlay: new cloudinary.TextLayer().fontFamily("rubik").fontSize(25).fontWeight("bold").stroke("stroke").text("Cloudinary%20Rocks%21"), gravity: "south_east", color: "blue", border: "2px_solid_pink"},
  {delay: "500"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("fluent-gif-1.gif", {type: "multi", transformation: [
  {aspect_ratio: "1:1", width: 300, gravity: "face", crop: "fill"},
  {overlay: new cloudinary.TextLayer().fontFamily("rubik").fontSize(25).fontWeight("bold").stroke("stroke").text("Cloudinary%20Rocks%21"), gravity: "south_east", color: "blue", border: "2px_solid_pink"},
  {delay: "500"}
  ]})
React:
<Image publicId="fluent-gif-1.gif" type="multi">
  <Transformation aspectRatio="1:1" width="300" gravity="face" crop="fill" />
  <Transformation overlay={{fontFamily: "rubik", fontSize: 25, fontWeight: "bold", stroke: "stroke", text: "Cloudinary%20Rocks%21"}} gravity="south_east" color="blue" border="2px_solid_pink" />
  <Transformation delay="500" />
</Image>
Angular:
<cl-image public-id="fluent-gif-1.gif" type="multi">
  <cl-transformation aspect-ratio="1:1" width="300" gravity="face" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="text:rubik_25_bold_stroke:Cloudinary%20Rocks%21" gravity="south_east" color="blue" border="2px_solid_pink">
  </cl-transformation>
  <cl-transformation delay="500">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("1:1").Width(300).Gravity("face").Crop("fill").Chain()
  .Overlay(new TextLayer().FontFamily("rubik").FontSize(25).FontWeight("bold").Stroke("stroke").Text("Cloudinary%20Rocks%21")).Gravity("south_east").Color("blue").Border("2px_solid_pink").Chain()
  .Delay("500")).Type("multi").BuildImageTag("fluent-gif-1.gif")
Android:
MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("1:1").width(300).gravity("face").crop("fill").chain()
  .overlay(new TextLayer().fontFamily("rubik").fontSize(25).fontWeight("bold").stroke("stroke").text("Cloudinary%20Rocks%21")).gravity("south_east").color("blue").border("2px_solid_pink").chain()
  .delay("500")).type("multi").generate("fluent-gif-1.gif");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setType( "multi").setTransformation(CLDTransformation()
  .setAspectRatio("1:1").setWidth(300).setGravity("face").setCrop("fill").chain()
  .setOverlay("text:rubik_25_bold_stroke:Cloudinary%20Rocks%21").setGravity("south_east").setColor("blue").setBorder("2px_solid_pink").chain()
  .setDelay("500")).generate("fluent-gif-1.gif")!, cloudinary: cloudinary)
Transformation 3

Got some other creations or fun ideas? Add them below in the comments! In the mean time, check our some of the fun transformations submitted by people who visited our booth!

“User1” “User2” “User3” “User4”

Recent Blog Posts

The Visual Media Report: Visual Engagement and User Experience

With privacy top of mind, we wondered what we might learn from analyzing the large volume of data. What user behaviors would we discover, what regional differences might exist? What insights or early hints from different industries could we extrapolate? These questions guided us as we analyzed millions of anonymous end-user experiences and asset interactions across our platform.

Read more
How a Cloud-native DAM Platform Optimizes Customer Experiences

In today’s digital age, brands rely heavily on rich media to tell stories, foster engagement, and make emotional connections that drive results. Marketers use videos and images, tuned to customers’ interests, to create dynamic visual experiences. Digital campaigns about trips to Florida, for instance, have separate plot lines, depending on audiences’ passions for golf, deep sea fishing, or kid-friendly versus romantic getaways. Marketers expect to detect preferences, produce personalized experiences highlighting different desires, and turn digital prospects into vacationing customers. The ultimate success of a marketing campaign relies on the consistent delivery of these customer experiences, at scale.

Read more
Cloudinary’s Media Developer Experts Program

Cloudinary was founded by developers and developer-centric thinking is in our DNA. Our work with developers helps them better understand all things rich-media management and delivery is crucial to us. Now, in an effort to recognize, support, and reward the innovative leaders in that technical community, we’re excited to introduce a new Media Developer Experts (MDE) program! MDEs will leverage the Cloudinary platform to foster a community of media-management professionals; receive training and certifications to become experts within their field or audience; advance the state of media management, adoption, and best practices; and make the web more accessible.

Read more
An Eye-Opening Talk: Building Apps for the Next Billion Users in Africa

William (iChuloo) Imoh, who hails from Lagos, Nigeria, recently embarked on a U.S. speaking tour, February 20-March 12, during which he powwowed with technical and product teams and communities at such renowned enterprises as Netlify, Pluralsight, Lucidchart, Twilio, and more in Salt Lake City, Dallas, Las Vegas, and San Francisco. On March 5, he gave an enlightening talk, entitled International Developers and Development: Building for the Next Billion Users at Cloudinary in Santa Clara, California. Below is a synopsis. For details, see the related slides.

Read more
The Debut of the Cloudinary Customer Advisory Board

Focus on customers has always been Cloudinary’s mantra. Because we owe them our success, we are constantly reaching out to our customers, not just for feedback on our offerings, but also for their vision, wish list, and buy-in of what Cloudinary can do to meet their needs and make them succeed. About six months ago, it occurred to us that it would be beneficial if we could meet regularly with those who are behind innovation at our key customers—executives, product gurus, developers, content managers—to swap strategies, product roadmaps, best practices, and such. In particular, we’d like to solicit actionable feedback as a foundation for our plans of product enhancements.

Read more