Skip to main content

Cloudinary shows off its APIs with an interactive demo

We designed and developed a responsive, performant, and accessible demo to explain and showcase how Cloudinary’s APIs help developers solve common problems. The demo increased engagement on the page it was embedded on by over 400% and improved the quality of visitor conversions.

You can try the demo for yourself right here (this isn’t a screenshot):

A woman and a golden retriever in the mountains. They're sitting, facing away from the camera while the dog noses the woman. They're surrounded by natural splendor including majestic mountains, puffy clouds, and evergreen-studded hills.
An un-cropped image overlaid with a cropping window showing how it would be cropped by Cloudinary.
An arrow pointing from the original asset to the cropped asset.
A woman and a golden retriever in the mountains. They're sitting, facing away from the camera while the dog noses the woman. They're surrounded by natural splendor including majestic mountains, puffy clouds, and evergreen-studded hills.
The same asset cropped using the following settings: Aspect ratio: 1:2. Cropping Strategy: Content-Aware.
Images
Videos
Crop Mode
Aspect Ratio
Original
18 MB

We’re showing a resized version of the original asset to avoid slow loading speeds. View the original.

The original asset:
JPG
135 KB
WEBP
135 KB
AVIF
90 KB
The image after being optimized using the following settings: Quality: Auto. Width: 1000px.
Original
18 MB

We’re showing a resized version of the original asset to avoid slow loading speeds. View the original.

The original asset:
JPG
135 KB
WEBP
135 KB
AVIF
90 KB
The image after being optimized using the following settings: Quality: Auto. Width: 1000px.
Images
Videos
Quality
Width
The original image:
An arrow pointing from the original asset to the transformed asset.
The personalized image:
The original image:
The personalized image:
Product Photos
Backgrounds
Overlays
Duration
Full length video: Surfing Trip
An arrow pointing from the original video to the AI-generated preview.
Duration
A shorter video preview generated by Cloudinary’s AI using the following settings: Duration: 15 seconds. Max Clips: 9. Min Clip Length: 1 second.
Videos
Duration
Max Clips
Min Clip Length
URL:
/ar_0.5,c_fill,g_auto,w_433/q_auto/f_auto/hiking_dog_mountain.jpg
cloudinary.image("hiking_dog_mountain.jpg", {transformation: [
  {aspect_ratio: "0.5", gravity: "auto", width: 433, crop: "fill"},
  {quality: "auto"},
  {fetch_format: "auto"}
  ]})
new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));
new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));
new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));
new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));
CloudinaryImage("hiking_dog_mountain.jpg").image(transformation=[
  {'aspect_ratio': "0.5", 'gravity': "auto", 'width': 433, 'crop': "fill"},
  {'quality': "auto"},
  {'fetch_format': "auto"}
  ])
(new ImageTag('hiking_dog_mountain.jpg'))
	->resize(Resize::fill()->width(433)
->aspectRatio(0.5)
	->gravity(
	Gravity::autoGravity())
	)
	->delivery(Delivery::quality(
	Quality::auto()))
	->delivery(Delivery::format(
	Format::auto()));
cloudinary.url().transformation(new Transformation()
  .aspectRatio("0.5").gravity("auto").width(433).crop("fill").chain()
  .quality("auto").chain()
  .fetchFormat("auto")).imageTag("hiking_dog_mountain.jpg");
cl_image_tag("hiking_dog_mountain.jpg", :transformation=>[
  {:aspect_ratio=>"0.5", :gravity=>"auto", :width=>433, :crop=>"fill"},
  {:quality=>"auto"},
  {:fetch_format=>:auto}
  ])
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("0.5").Gravity("auto").Width(433).Crop("fill").Chain()
  .Quality("auto").Chain()
  .FetchFormat("auto")).BuildImageTag("hiking_dog_mountain.jpg")
cloudinary.image('hiking_dog_mountain.jpg').transformation(Transformation()
	.resize(Resize.fill().width(433)
.aspectRatio(0.5)
	.gravity(
	Gravity.autoGravity())
	)
	.delivery(Delivery.quality(
	Quality.auto()))
	.delivery(Delivery.format(
	Format.auto())));
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setAspectRatio("0.5").setGravity("auto").setWidth(433).setCrop("fill").chain()
  .setQuality("auto").chain()
  .setFetchFormat("auto")).generate("hiking_dog_mountain.jpg")!, cloudinary: cloudinary)
MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("0.5").gravity("auto").width(433).crop("fill").chain()
  .quality("auto").chain()
  .fetchFormat("auto")).generate("hiking_dog_mountain.jpg");
cloudinary.image('hiking_dog_mountain.jpg').transformation(Transformation()
	.resize(Resize.fill().width(433)
.aspectRatio(0.5)
	.gravity(
	Gravity.autoGravity())
	)
	.delivery(Delivery.quality(
	Quality.auto()))
	.delivery(Delivery.format(
	Format.auto())));
cloudinary.image {
	publicId("hiking_dog_mountain.jpg")
	 resize(Resize.fill() { width(433)
 aspectRatio(0.5F)
	 gravity(
	Gravity.autoGravity())
	 })
	 delivery(Delivery.quality(
	Quality.auto()))
	 delivery(Delivery.format(
	Format.auto())) 
}.generate()

We recently worked with Cloudinary to design a new page for their website showcasing their extensive and powerful APIs to developers. Cloudinary’s APIs make manipulating and optimizing images and videos easy, but it can be challenging to quickly demonstrate such a wide range of features.

We included an interactive demo to explain and showcase Cloudinary’s APIs while encouraging exploration, discovery, and engagement.

The API Explorer demo has been a big help in explaining our APIs to developers. It increased engagement over 400% and improved the quality of our conversions.

Sanjay Sarathy, Vice President of Marketing

The Design Process

We worked closely with Cloudinary to design and prototype a compelling demo. We performed initial discovery to better understand their product and positioning, brainstormed concepts and sketched potential ideas.

From there, we began prototyping in the browser to see how our ideas would work in the real world. For such an interactive experience, we needed more than a static mockup. Prototyping ideas in code allowed us to quickly understand what was working and what wasn’t. One of our earliest prototypes focused on the breadth of Cloudinary’s capabilities:

But as we tested the prototype, we realized it wasn’t quite right. It showed off a wide range of Cloudinary capabilities, but it wasn’t clear how they help developers solve everyday problems. An interactive prototype allowed us to realize this quickly and pivot to a new design focusing on four common use cases:

The final prototype focusing on four common use cases.

Now we were on the right track! Visitors could swiftly find the right solution to their specific problem. Our friends at Cloudinary agreed… in fact, they liked it so much that they didn’t just want to use it on the Developers page. They wanted to be able to use it on other pages as well as on their separate documentation site!

The Development Process

We needed to step back and determine how our final product could be used in these different contexts. For this type of complex, interactive experience, we wanted to be able to use a modern, component-based JavaScript framework. But we needed to be able to embed this in their WordPress (PHP) marketing site, as well as a statically-rendered Ruby documentation site.

We had a few important requirements for the final deliverable. It had to be:

  • Possible to embed anywhere, regardless of tech stack
  • Performant: quick to load and snappy in the browser
  • Accessible to everyone
  • Easy to maintain and extend
A screenshot of the top of the Cloudinary blog hom page showing a heading saying "Featured Cloudinary Blog Posts" and 5 posts.

We’d worked with Cloudinary to rebuild their blog, and we knew that performance was a top priority for them. We were able to leverage our knowledge from this previous work to help them achieve their goals for this demo.

After discussion with our Cloudinary stakeholders and their technical team, we landed on a three-pronged approach:

  • Preact: We built our components using Preact, a “fast 3kB alternative to React with the same modern API” that was familiar to the Cloudinary development team.
  • Server-Side-Rendering: We built out the ability to render these components server-side. This allowed the components to load and display quickly without having to wait on JavaScript.
  • Netlify Functions: We created custom API endpoints to server-side render the experience. This allowed different Cloudinary websites and tech stacks to easily fetch, cache, and embed the code used to power the experience.

With our goals in mind, and a plan to achieve them, we got to work. We built out a set of reusable Preact components and API endpoints to power the demo experience:

A screenshot of the personalization use case demo: It shows two pictures of a red car. The picture on the left is a regular photograph. The picture on the right has had the background replaced with a dark geometric pattern. It also has a star rating, price and 'New' badge. Under the photos, controls are shown. A photo of a woman and a dog sitting in the mountains. A blue cropping window is overlaid on the photo framing them. Three tabs with icons, labeled Performance Optimization, Image Personalization, and AI-Generated Video Previews A tooltip explaining information about optimized file sizes. Two toggle buttons labeled Option 1 and Option 2. One is toggled on while the other is toggled off. A set of labeled tabs showing code snippets for different programming languages and frameworks. An interface showing four images with one selected A button labeled Click Me A set of stats like 'Duration: 1s' and 'File Size: 30kb' on top of a patterned background
A handful of the Preact components we built to power the API Explorer demo.

These modular components allowed us to quickly build out the different demo use cases. We’re also able to reuse these components to power other experiences with Cloudinary.

A friendly illustrated cloud character with eyes on a red-pink background.
A friendly illustrated cloud character with eyes surrounded by a variety of icons (including check marks, stars, code brackets, buttons, hearts, a checkbox, and many more) on a blue background.

This process was streamlined by building off of our previous work and experience. For example, we leveraged an image comparison web component we’d already built instead of starting from scratch.

You can try the component right here! (It’s not a screenshot.)

The Final Experience

The demo was a huge success. The final result is engaging, performant, responsive, and accessible. It was quickly integrated into Cloudinary’s site without any issues or downtime. Cloudinary even integrated the demo on additional pages we weren’t planning for, including other pages on their primary site and landing pages for targeted ad campaigns. It drastically increased engagement on the Developers page and helped customers understand Cloudinary’s APIs.

Cloud Four is hands down the best agency I have ever worked with on any web project ever in my 25+ web career.

Daniel Divens, Former Director, Website Marketing

We’re Cloud Four

We solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.

See our work