Cloudinary Blog

Automatic Background Image Rotation and Removal

Automatic Background Image Rotation and Removal

As a rule, user interfaces, whether for mobile or desktop apps, encompass a significant amount of visual media (images and videos), necessitating close collaboration among designers and front-end developers. The process for building UIs entails a designer-to-developer handoff, at which the designer transfers to the developer blueprints produced with such tools as Photoshop, InVision, and Sketch. The developer then implements the blueprints with Cascading Style Sheets (CSS).

Rotating image backgrounds is a common task. An excellent tutorial written by Craig Buckler in July 2018 describes how to do that with CSS. With Cloudinary, you can transform images in many ways—without using CSS or involving the designer. For example:

  • Remove image backgrounds.
  • Rotate images.
  • Place an image over another.
  • Make the image background transparent so that it blends with a background color.

This article steps you through the procedures. Overall, Cloudinary shines as an end-to-end solution for visual media: it effectively processes their uploads and on-the-fly manipulations, automates optimizations, and delivers images and videos responsively across all devices.


How to Optimize for Page Load Speed


Rotating Images Programmatically

Remarkably, you can manipulate and transform images on Cloudinary by simply adding parameters to their URLs.

To rotate an image, such as this one— :

Logo

—upload it to Coudinary and then add to its URL the angle parameter with the number of degrees by which to rotate the image clockwise. An example is a_60, where 60 denotes a 60-degree rotation. The URL then reads—

Ruby:
Copy to clipboard
cl_image_tag("180_yacaar.png", :angle=>60)
PHP v1:
Copy to clipboard
cl_image_tag("180_yacaar.png", array("angle"=>60))
PHP v2:
Copy to clipboard
(new ImageTag('180_yacaar.png'))
  ->rotate(Rotate::byAngle(60));
Python:
Copy to clipboard
CloudinaryImage("180_yacaar.png").image(angle=60)
Node.js:
Copy to clipboard
cloudinary.image("180_yacaar.png", {angle: 60})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().angle(60)).imageTag("180_yacaar.png");
JS:
Copy to clipboard
cloudinary.imageTag('180_yacaar.png', {angle: 60}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("180_yacaar.png", {angle: 60})
React:
Copy to clipboard
<Image publicId="180_yacaar.png" >
  <Transformation angle="60" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="180_yacaar.png" >
  <cld-transformation angle="60" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="180_yacaar.png" >
  <cl-transformation angle="60">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(60)).BuildImageTag("180_yacaar.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().angle(60)).generate("180_yacaar.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAngle(60)).generate("180_yacaar.png")!, cloudinary: cloudinary)
Logo

Programmatically, you can rotate images with only one codeline in Ruby, PHP, Python, Node.js, Java, JavaScript, JQuery, React, Angular, .Net, Android, and iOs.

Note
A positive value for the angle parameter rotates the image clockwise; a negative value rotates it counterclockwise.

Enhancing Rotated Image Programmatically

Cloudinary offers dozens of transformation effects for images. For example, for a shadow effect to the preceding rotated image, add a shadow-transformation parameter (e_shadow) before the angle parameter (a_60) in the URL, like this:

Ruby:
Copy to clipboard
cl_image_tag("180_yacaar.png", :transformation=>[
  {:effect=>"shadow:40"},
  {:angle=>60}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("180_yacaar.png", array("transformation"=>array(
  array("effect"=>"shadow:40"),
  array("angle"=>60)
  )))
PHP v2:
Copy to clipboard
(new ImageTag('180_yacaar.png'))
  ->effect(Effect::shadow()->strength(40))
  ->rotate(Rotate::byAngle(60));
Python:
Copy to clipboard
CloudinaryImage("180_yacaar.png").image(transformation=[
  {'effect': "shadow:40"},
  {'angle': 60}
  ])
Node.js:
Copy to clipboard
cloudinary.image("180_yacaar.png", {transformation: [
  {effect: "shadow:40"},
  {angle: 60}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("shadow:40").chain()
  .angle(60)).imageTag("180_yacaar.png");
JS:
Copy to clipboard
cloudinary.imageTag('180_yacaar.png', {transformation: [
  {effect: "shadow:40"},
  {angle: 60}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("180_yacaar.png", {transformation: [
  {effect: "shadow:40"},
  {angle: 60}
  ]})
React:
Copy to clipboard
<Image publicId="180_yacaar.png" >
  <Transformation effect="shadow:40" />
  <Transformation angle="60" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="180_yacaar.png" >
  <cld-transformation effect="shadow:40" />
  <cld-transformation angle="60" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="180_yacaar.png" >
  <cl-transformation effect="shadow:40">
  </cl-transformation>
  <cl-transformation angle="60">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("shadow:40").Chain()
  .Angle(60)).BuildImageTag("180_yacaar.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("shadow:40").chain()
  .angle(60)).generate("180_yacaar.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("shadow:40").chain()
  .setAngle(60)).generate("180_yacaar.png")!, cloudinary: cloudinary)
Logo

Also, you can customize the x and y shadow offsets and change the shadow’s color (co) by specifying the values you desire in the parameters, for example:

Ruby:
Copy to clipboard
cl_image_tag("180_yacaar.png", :transformation=>[
  {:effect=>"shadow:40", :x=>15, :y=>15, :color=>"yellow"},
  {:angle=>60}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("180_yacaar.png", array("transformation"=>array(
  array("effect"=>"shadow:40", "x"=>15, "y"=>15, "color"=>"yellow"),
  array("angle"=>60)
  )))
PHP v2:
Copy to clipboard
(new ImageTag('180_yacaar.png'))
  ->effect(Effect::shadow()->strength(40)->color(Color::YELLOW)
    ->offsetX(15)->offsetY(15))
  ->rotate(Rotate::byAngle(60));
Python:
Copy to clipboard
CloudinaryImage("180_yacaar.png").image(transformation=[
  {'effect': "shadow:40", 'x': 15, 'y': 15, 'color': "yellow"},
  {'angle': 60}
  ])
Node.js:
Copy to clipboard
cloudinary.image("180_yacaar.png", {transformation: [
  {effect: "shadow:40", x: 15, y: 15, color: "yellow"},
  {angle: 60}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("shadow:40").x(15).y(15).color("yellow").chain()
  .angle(60)).imageTag("180_yacaar.png");
JS:
Copy to clipboard
cloudinary.imageTag('180_yacaar.png', {transformation: [
  {effect: "shadow:40", x: 15, y: 15, color: "yellow"},
  {angle: 60}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("180_yacaar.png", {transformation: [
  {effect: "shadow:40", x: 15, y: 15, color: "yellow"},
  {angle: 60}
  ]})
React:
Copy to clipboard
<Image publicId="180_yacaar.png" >
  <Transformation effect="shadow:40" x="15" y="15" color="yellow" />
  <Transformation angle="60" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="180_yacaar.png" >
  <cld-transformation effect="shadow:40" x="15" y="15" color="yellow" />
  <cld-transformation angle="60" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="180_yacaar.png" >
  <cl-transformation effect="shadow:40" x="15" y="15" color="yellow">
  </cl-transformation>
  <cl-transformation angle="60">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("shadow:40").X(15).Y(15).Color("yellow").Chain()
  .Angle(60)).BuildImageTag("180_yacaar.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("shadow:40").x(15).y(15).color("yellow").chain()
  .angle(60)).generate("180_yacaar.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("shadow:40").setX(15).setY(15).setColor("yellow").chain()
  .setAngle(60)).generate("180_yacaar.png")!, cloudinary: cloudinary)
Logo

Placing an Image Over Another

For a displacement effect, place one image over another by adding the e_displace parameter to the URL, as in this example:

Ruby:
Copy to clipboard
cl_image_tag("glass.jpg", :transformation=>[
  {:overlay=>"sample", :width=>182, :height=>198},
  {:height=>2.0, :width=>1.0, :crop=>"pad"},
  {:overlay=>"radial_ipdlli", :effect=>"displace", :y=>-8},
  {:effect=>"trim"},
  {:flags=>"layer_apply", :x=>-26, :y=>28}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("glass.jpg", array("transformation"=>array(
  array("overlay"=>"sample", "width"=>182, "height"=>198),
  array("height"=>"2.0", "width"=>"1.0", "crop"=>"pad"),
  array("overlay"=>"radial_ipdlli", "effect"=>"displace", "y"=>-8),
  array("effect"=>"trim"),
  array("flags"=>"layer_apply", "x"=>-26, "y"=>28)
  )))
PHP v2:
Copy to clipboard
This code example is not currently available.
Python:
Copy to clipboard
CloudinaryImage("glass.jpg").image(transformation=[
  {'overlay': "sample", 'width': 182, 'height': 198},
  {'height': "2.0", 'width': "1.0", 'crop': "pad"},
  {'overlay': "radial_ipdlli", 'effect': "displace", 'y': -8},
  {'effect': "trim"},
  {'flags': "layer_apply", 'x': -26, 'y': 28}
  ])
Node.js:
Copy to clipboard
cloudinary.image("glass.jpg", {transformation: [
  {overlay: "sample", width: 182, height: 198},
  {height: "2.0", width: "1.0", crop: "pad"},
  {overlay: "radial_ipdlli", effect: "displace", y: -8},
  {effect: "trim"},
  {flags: "layer_apply", x: -26, y: 28}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("sample")).width(182).height(198).chain()
  .height(2.0).width(1.0).crop("pad").chain()
  .overlay(new Layer().publicId("radial_ipdlli")).effect("displace").y(-8).chain()
  .effect("trim").chain()
  .flags("layer_apply").x(-26).y(28)).imageTag("glass.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('glass.jpg', {transformation: [
  {overlay: new cloudinary.Layer().publicId("sample"), width: 182, height: 198},
  {height: "2.0", width: "1.0", crop: "pad"},
  {overlay: new cloudinary.Layer().publicId("radial_ipdlli"), effect: "displace", y: -8},
  {effect: "trim"},
  {flags: "layer_apply", x: -26, y: 28}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("glass.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("sample"), width: 182, height: 198},
  {height: "2.0", width: "1.0", crop: "pad"},
  {overlay: new cloudinary.Layer().publicId("radial_ipdlli"), effect: "displace", y: -8},
  {effect: "trim"},
  {flags: "layer_apply", x: -26, y: 28}
  ]})
React:
Copy to clipboard
<Image publicId="glass.jpg" >
  <Transformation overlay="sample" width="182" height="198" />
  <Transformation height="2.0" width="1.0" crop="pad" />
  <Transformation overlay="radial_ipdlli" effect="displace" y="-8" />
  <Transformation effect="trim" />
  <Transformation flags="layer_apply" x="-26" y="28" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="glass.jpg" >
  <cld-transformation :overlay="sample" width="182" height="198" />
  <cld-transformation height="2.0" width="1.0" crop="pad" />
  <cld-transformation :overlay="radial_ipdlli" effect="displace" y="-8" />
  <cld-transformation effect="trim" />
  <cld-transformation flags="layer_apply" x="-26" y="28" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="glass.jpg" >
  <cl-transformation overlay="sample" width="182" height="198">
  </cl-transformation>
  <cl-transformation height="2.0" width="1.0" crop="pad">
  </cl-transformation>
  <cl-transformation overlay="radial_ipdlli" effect="displace" y="-8">
  </cl-transformation>
  <cl-transformation effect="trim">
  </cl-transformation>
  <cl-transformation flags="layer_apply" x="-26" y="28">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("sample")).Width(182).Height(198).Chain()
  .Height(2.0).Width(1.0).Crop("pad").Chain()
  .Overlay(new Layer().PublicId("radial_ipdlli")).Effect("displace").Y(-8).Chain()
  .Effect("trim").Chain()
  .Flags("layer_apply").X(-26).Y(28)).BuildImageTag("glass.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("sample")).width(182).height(198).chain()
  .height(2.0).width(1.0).crop("pad").chain()
  .overlay(new Layer().publicId("radial_ipdlli")).effect("displace").y(-8).chain()
  .effect("trim").chain()
  .flags("layer_apply").x(-26).y(28)).generate("glass.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("sample").setWidth(182).setHeight(198).chain()
  .setHeight(2.0).setWidth(1.0).setCrop("pad").chain()
  .setOverlay("radial_ipdlli").setEffect("displace").setY(-8).chain()
  .setEffect("trim").chain()
  .setFlags("layer_apply").setX(-26).setY(28)).generate("glass.jpg")!, cloudinary: cloudinary)
Mug

For details, see Cloudinary’s demo of product personalization on Codepen.

Removing Image Backgrounds

To remove the background of an image, e.g., a photo, first activate the AI Removal Background add-on on your Cloudinary Dashboard.

You can then remove an image’s background with the following code:

Ruby:
Copy to clipboard
Cloudinary::Uploader.upload("baseball.jpg",
  :public_id => "baseball_no_bg",
  :background_removal => 'cloudinary_ai',
  :notification_url => "https://mysite.example.com/hooks")
PHP:
Copy to clipboard
\Cloudinary\Uploader::upload("baseball.jpg", 
  array(
    "public_id" => "baseball_no_bg",
    "background_removal" => "cloudinary_ai",
    "notification_url" => "https://mysite.example.com/hooks"));
Python:
Copy to clipboard
cloudinary.uploader.upload("baseball.jpg",
  public_id = "baseball_no_bg",
  background_removal = "cloudinary_ai",
  notification_url = "https://mysite.example.com/hooks")
Node.js:
Copy to clipboard
cloudinary.v2.uploader.upload("baseball.jpg", 
  { public_id: "baseball_no_bg",
    background_removal: "cloudinary_ai",
    notification_url: "https://mysite.example.com/hooks" }),
  function(error, result){console.log(result);});
Java:
Copy to clipboard
cloudinary.uploader().upload("baseball.jpg", 
  ObjectUtils.asMap(
    "public_id", "baseball_no_bg",
    "background_removal", "cloudinary_ai",
    "notification_url", "https://mysite.example.com/hooks"));
.NET:
Copy to clipboard
var uploadParams = new ImageUploadParams(){
  File = new FileDescription(@"baseball.jpg"),
  PublicId = "baseball_no_bg",
  BackgroundRemoval = "cloudinary_ai",
  NotificationUrl = "https://mysite.example.com/hooks"};
var uploadResult = cloudinary.Upload(uploadParams);

In the code above, notification_url is the endpoint that receives a POST request when background removal is complete. Here’s an example:

Copy to clipboard
{
    "info_kind": "cloudinary_ai",
    "info_status": "complete",
    "public_id": "bg",
    "uploaded_at": "2019-02-25T17:33:45Z",
    "version": 1551104931,
    "url": "http://res.cloudinary.com/demo/image/upload/v1551104931/bg.png",
    "secure_url": "https://res.cloudinary.com/demo/image/upload/v1551104931/bg.png",
    "etag": "6567d798ca4087468dc7d23bcb8a45ec",
    "notification_type": "info"
}

As a comparison, see—

These:

Become These!

Baseball player - original

baseball player - no background

Optimizing Rotated Images

By default, regardless of the programming language, Cloudinary automatically performs certain optimizations on all transformed images. For an enhanced user experience, before delivering them to users, further optimize your visual media by adding a couple of parameters to their URLs.

Automatic Quality and Encoding

The q_auto parameter directs Cloudinary to select the optimal quality-compression level and encoding settings according to the image content and format, also the viewing browser. The resultant image, reduced in size to save bandwidth, is of excellent visual quality. See this example URL:

Ruby:
Copy to clipboard
cl_image_tag("180_yacaar.png", :transformation=>[
  {:effect=>"shadow:40", :quality=>"auto"},
  {:angle=>60}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("180_yacaar.png", array("transformation"=>array(
  array("effect"=>"shadow:40", "quality"=>"auto"),
  array("angle"=>60)
  )))
PHP v2:
Copy to clipboard
(new ImageTag('180_yacaar.png'))
  ->effect(Effect::shadow()->strength(40))
  ->delivery(Delivery::quality(Quality::auto()))
  ->rotate(Rotate::byAngle(60));
Python:
Copy to clipboard
CloudinaryImage("180_yacaar.png").image(transformation=[
  {'effect': "shadow:40", 'quality': "auto"},
  {'angle': 60}
  ])
Node.js:
Copy to clipboard
cloudinary.image("180_yacaar.png", {transformation: [
  {effect: "shadow:40", quality: "auto"},
  {angle: 60}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("shadow:40").quality("auto").chain()
  .angle(60)).imageTag("180_yacaar.png");
JS:
Copy to clipboard
cloudinary.imageTag('180_yacaar.png', {transformation: [
  {effect: "shadow:40", quality: "auto"},
  {angle: 60}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("180_yacaar.png", {transformation: [
  {effect: "shadow:40", quality: "auto"},
  {angle: 60}
  ]})
React:
Copy to clipboard
<Image publicId="180_yacaar.png" >
  <Transformation effect="shadow:40" quality="auto" />
  <Transformation angle="60" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="180_yacaar.png" >
  <cld-transformation effect="shadow:40" quality="auto" />
  <cld-transformation angle="60" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="180_yacaar.png" >
  <cl-transformation effect="shadow:40" quality="auto">
  </cl-transformation>
  <cl-transformation angle="60">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("shadow:40").Quality("auto").Chain()
  .Angle(60)).BuildImageTag("180_yacaar.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("shadow:40").quality("auto").chain()
  .angle(60)).generate("180_yacaar.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("shadow:40").setQuality("auto").chain()
  .setAngle(60)).generate("180_yacaar.png")!, cloudinary: cloudinary)
Logo

Automatic Formatting

The f_auto parameter directs Cloudinary to analyze the image content and then select the best delivery format. For example, Cloudinary delivers WebP images to Chrome browsers, JPEG-XR images to Internet Explorer browsers, and retain the original format for all other browsers. However, regardless of the browser, if the quality algorithm determines that the optimal format for certain images is PNG-8 or PNG-24, Cloudinary delivers them according to that deduction.

Ruby:
Copy to clipboard
cl_image_tag("180_yacaar.png", :transformation=>[
  {:effect=>"shadow:40"},
  {:angle=>60}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("180_yacaar.png", array("transformation"=>array(
  array("effect"=>"shadow:40"),
  array("angle"=>60)
  )))
PHP v2:
Copy to clipboard
(new ImageTag('180_yacaar.png'))
  ->effect(Effect::shadow()->strength(40))
  ->delivery(Delivery::format(Format::auto()))
  ->rotate(Rotate::byAngle(60));
Python:
Copy to clipboard
CloudinaryImage("180_yacaar.png").image(transformation=[
  {'effect': "shadow:40"},
  {'angle': 60}
  ])
Node.js:
Copy to clipboard
cloudinary.image("180_yacaar.png", {transformation: [
  {effect: "shadow:40"},
  {angle: 60}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("shadow:40").chain()
  .angle(60)).imageTag("180_yacaar.png");
JS:
Copy to clipboard
cloudinary.imageTag('180_yacaar.png', {transformation: [
  {effect: "shadow:40"},
  {angle: 60}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("180_yacaar.png", {transformation: [
  {effect: "shadow:40"},
  {angle: 60}
  ]})
React:
Copy to clipboard
<Image publicId="180_yacaar.png" >
  <Transformation effect="shadow:40" />
  <Transformation angle="60" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="180_yacaar.png" >
  <cld-transformation effect="shadow:40" />
  <cld-transformation angle="60" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="180_yacaar.png" >
  <cl-transformation effect="shadow:40">
  </cl-transformation>
  <cl-transformation angle="60">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("shadow:40").Chain()
  .Angle(60)).BuildImageTag("180_yacaar.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("shadow:40").chain()
  .angle(60)).generate("180_yacaar.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("shadow:40").chain()
  .setAngle(60)).generate("180_yacaar.png")!, cloudinary: cloudinary)
Logo

Summing Up

It’s a cakewalk to rotate or remove image backgrounds with Cloudinary. For more details, check out the related Cloudinary documentation and this article, which also describes how to perform other image transformations on Cloudinary.

About Cloudinary

Cloudinary provides easy-to-use, cloud-based media management solutions for the world’s top brands. With offices in the US, UK and Israel, Cloudinary has quickly become the de facto solution used by developers and marketers at major companies around the world to streamline rich media management and deliver optimal end-user experiences.

For more information, visit www.cloudinary.com or follow us on Twitter

Recent Blog Posts

Creating an API With Python Flask to Upload Files to Cloudinary

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.
This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

Read more
How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out­-of­-the-­box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

Read more
Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.

Read more
Enhance Your Travel Site With Cloudinary in Anticipation of a Return to New Normal

Read more
The Benefits of Headless DAMs

Headless is not a buzzword anymore. In fact, the concept of headless architecture is gaining momentum due to the flexibility it offers for composing new experiences and for tackling the undue complexity of an ever-evolving technology stack. That’s because while the evolution of the martech landscape has enabled disruptive, digital innovations, the approach of buying point solutions for solving specific challenges can expose companies to the complicated nature of new technologies, systems, and platforms.

Read more