Programmable Media

Create transformative visual experiences with image and video APIs

Cloudinary Programmable Media

Programmable Media AI-powered APIs automate image and video lifecycles

Transform and Customize

Generative Fill

Leverage generative AI outpainting with our powerful cropping APIs.
Generative Object Removal

Remove unwanted elements from your image with Generative Remove as if they never existed.
Generative Replace

Use Generative AI and natural language to replace one object or color with another.
Zoom Pan

Apply zooming and/or panning to an image to create a video or animated GIF.
3D Spinset

Easily create 3D animations and videos to give customers a 360° view of your product.
Product Gallery

Enable an interactive shopping experience with high-performant and responsive images, videos, 360° views, and 3D models.
Filters and Overlays

Quickly make programmatic changes to images using upload presets.
Upscaling

Super resolution upscaling uses AI to transform images from grainy or low-quality to high-resolution.

For more, check out our documentation for images and videos.

Original
https://res.cloudinary.com/demo/image/upload/v1689803100/ai/hiker.jpg

Filled (800 pixels wider):
https://res.cloudinary.com/demo/image/upload/c_pad,w_2400,h_1600,b_gen_fill/v1689803100/ai/hiker.jpg

Before:
https://cloudinary-marketing-res.cloudinary.com/image/upload/cups_on_table.jpg

After:
https://cloudinary-marketing-res.cloudinary.com/image/upload/e_gen_remove:prompt_(remove-right-cup)/cups_on_table.jpg

Original
https://res.cloudinary.com/demo/image/upload/v1688737277/ai/model_plain_sweatshirt.jpg

Transformed (shirt to rain coat)
https://res.cloudinary.com/demo/image/upload/e_gen_replace:from_shirt;to_raincoat/v1688737277/ai/model_plain_sweatshirt.jpg

Transformed (shirt to suit jacket)
https://res.cloudinary.com/demo/image/upload/e_gen_replace:from_shirt;to_suit_jacket/v1688737277/ai/model_plain_sweatshirt.jpg

https://res.cloudinary.com/demo/image/upload/e_zoompan:from_(g_persons;zoom_3);du_10/w_1300/f_mp4/v1664906306/pm/hikers_mts.jpg

https://res.cloudinary.com/demo/image/upload/dl_200,f_gif,fl_animated/c_fill,h_600,w_600/v1664984700/pm/Shoe.glb

cloudinary.galleryWidget({
    container: "#my-gallery",
    cloudName: "",
    mediaAssets: [{
            tag: "shoes_product_gallery_demo"
        },
        {
            publicId: "pm/shoes_video",
            mediaType: "video"
        }
    ],
    zoom: true
});
myGallery.render();

Grayscale: 
https://res.cloudinary.com/demo/image/upload/e_grayscale/v1664903773/pm/mountains_autumn.jpg

Tint
https://res.cloudinary.com/demo/image/upload/e_tint/v1664903773/pm/mountains_autumn.jpg

Image Overlay
https://res.cloudinary.com/demo/image/upload/l_pm:cld_logo/w_230/o_80/fl_layer_apply,g_south_east,x_230,y_120/pm/mountains_autumn.jpg

Before (larger with no upscale)
https://cloudinary-marketing-res.cloudinary.com/image/upload/w_2000/brooklyn_bridge.jpg

After (larger with upscaling applied)
https://cloudinary-marketing-res.cloudinary.com/image/upload/e_upscale/w_2000/brooklyn_bridge.jpg

Optimize and Deliver

Object Aware Cropping

Perfect your assets with AI-powered object cropping that identifies the must-keep sections of your image or video. Thousands of out-of-the-box object categories make the process fast and accurate.
Video Smart Cropping

Ensure that the most relevant portions of your content are the main focus throughout the duration of each video.
Auto responsive

Website and app users automatically view images and videos in the correct size and shape for their device.
Automatic optimization

Send the best quality asset every time, formatted to the user’s device, browser and connection – including cutting-edge formats like AVIF, JPEG-XL, HEIC & WebP.

For more, check out our documentation.

LEARN MORE ->

Original
https://res.cloudinary.com/demo/image/upload/v1688585331/pm/kitchen.jpg

Face Crop
https://res.cloudinary.com/demo/image/upload/c_thumb,w_500,g_auto:face/v1688585331/pm/kitchen.jpg

Hands Crop
https://res.cloudinary.com/demo/image/upload/c_thumb,w_500,g_auto:hands/v1688585331/pm/kitchen.jpg

Original
https://res.cloudinary.com/demo/video/upload/pm/surfer.mp4

Cropped
https://res.cloudinary.com/demo/video/upload/w_600,c_fill,g_auto,ar_9:16/pm/surfer.mp4

<html>
  <head>
    <title>
      Auto Responsive Images with Cloudinary
    </title>
    <script src="https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.js" type="text/javascript">
    </script>
  </head>
  <body>
    <img data-src="https://res.cloudinary.com/demo/image/upload/c_limit,w_auto/v1689805772/pm/japan.jpg"
    class="cld-responsive">
    <script type="text/javascript">
      var cl = cloudinary.Cloudinary.new({
        cloud_name: "demo"
      });
      cl.responsive();
    </script>
  </body>
</html>

Original
https://cloudinary-marketing-res.cloudinary.com/image/upload/patagonia_mountains

Optimized
https://cloudinary-marketing-res.cloudinary.com/image/upload/f_auto/q_auto/patagonia_mountains

Manage and Analyze

Smart tagging

Industry leading AI tools power auto tagging of images and video during the upload process
AI Image Captioning

Improve SEO and accessibiity with intelligent image captioning using Large Language Model (LLM) technology
Source and Moderate

The Upload Widget interactive UI enables users to upload assets from a variety of sources and includes AI-based moderation and curation.
Automated Workflows

Generate presets to automatically transform files upon upload to save time and ensure files are delivery-ready automatically.
Quickstart UI

Media Explorer is UI-based visual asset management for developers providing corresponding SDK code snippets that reflect the actions executed in the UI.

Check out relevant documentation for Upload API, Admin API and Search API.

LEARN MORE ->

// utilize AWS Rekognition with Node.js
cloudinary.v2.uploader
.upload("fashion.jpg",
 {categorization: "aws_rek_tagging"})
.then(result=>console.log(result));

cloudinary.v2.uploader.upload("island.jpg", {
    detection: "captioning"
}).then(result => console.log(result));

var myWidget = cloudinary.createUploadWidget({
    cloudName: 'Your Cloud Name',
    uploadPreset: 'my_preset'
}, (error, result) => {
    if (!error && result && result.event === "success") {
        console.log('Done! Here is the image info: ', result.info);
    }
})
document.getElementById("upload_widget").addEventListener("click", function() {
    myWidget.open();
}, false);

require("dotenv").config();
const cloudinary = require("cloudinary").v2;
cloudinary.api.create_upload_preset({
    name: "auto_crop_square",
    transformation: [{
        width: 200,
        height: 200,
        crop: "fill",
        gravity: "auto"
    }, ],
}).then((uploadResult) => console.log(uploadResult)).catch((error) => console.error(error));

Video APIs

Adaptive bitrate streaming

Deliver videos instantly without buffering using on-the-fly encoding and automatic format, quality selection
Video Generation

Programmatically generate videos at scale leveraging existing assets and re-usable templates
Video Previews

Machine learning detects the most compelling video segments to generate video previews.
Video Player

Customize player experience, add subtitles, captions and even add interactivity with pre-built widget
Engagement Analytics

Get content performance and audience viewing insights to plan future video investments and maximize ROI

Check out relevant documentation for Upload API, Admin API and Search API.

LEARN MORE ->

URL
https://res.cloudinary.com/demo/pm/video/upload/sp_auto/pm/travel_shorts.m3u8

{
    "type": "video",
    "width": 1280,
    "height": 720,
    "duration": 10,
    "fps": 30,
    "vars": {
        "bgColor": "#8e998a",
        "imageUrl": "docs/retirement",
        "sponsoredText": "Elder Care & Nursing Home",
        "titleText": "The more we care, the  more beautiful life becomes.",
        "ctaText": "Read more"
    },
    "tracks": [
      {1 item},
      {6 items},
      {6 items},
      {5 items},
   ]
}

Original:
https://res.cloudinary.com/demo/video/upload/rocket_launch

AI Generated Preview
https://res.cloudinary.com/demo/video/upload/e_preview:duration_12:max_seg_4:min_seg_dur_3/e_volume:mute/rocket_launch

<div style = "max-width: 1024px;">
    <video id = "doc-player" class = "cld-video-player cld-video-player-skin-dark cld-fluid"></video>
</div>
<script type = "text/javascript">
    var demoplayer = cloudinary.videoPlayer("doc-player", {
        cloud_name: 'Your Cloud Name',
        transformation: {
            effect: "deshake"
        },
        controls: true,
        showLogo: false,
        autoplay: true
    });
demoplayer.source("race_road_car");
</script>

Developers

Discover how Cloudinary helps you build more engaging and performant web and app
experiences while making your life easier along the way.

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.

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

JPEG: 135 KB
WebP: 135 KB
AVIF: 90 KB
JPEG XL: 94 KB

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

JPEG: 135 KB
WebP: 135 KB
AVIF: 90 KB
JPEG XL: 94 KB

Duration: 1:42

Duration: 0:15

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()

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

Created with your success in mind

Engagement

During their game casts experience, Bleacher Report increased video engagement by

350%

VIEW CASE STUDY →

Conversions

Discover how Stylight increased conversions and revenue

2.2%

VIEW CASE STUDY →

Efficiency

Check out how Minted went from new product launch in weeks to

Hours

VIEW CASE STUDY →

Reach customers anywhere

Find out how Vorwerk is reaching customers through the Internet of Things (IoT).

LEARN MORE ->
Reduce repetitive manual tasks

Forrester Consulting found that enterprises using Cloudinary were able to “refocus FTEs due to centralization and automatic transformation of images and videos, resulting in $4.1 million of savings”. Source: Forrester Total Economic Impact report.

LEARN MORE ->
Accelerate experience creation

Boombah turned to Cloudinary to automate and elevate its online shopping experience to support a visual-first faster go to market.

LEARN MORE ->