Developer get started guide

Last updated: Nov-27-2022

Set Up Account Configure SDK Upload Media Transform & Deliver Next Steps

Cloudinary's Programmable Media solution enables you to programmatically add image and video upload, transformation, optimization, and delivery capabilities to your applications via easy-to-use REST APIs. Furthermore, Cloudinary offers a variety of SDK libraries that wrap the APIs, enabling you to seamlessly integrate Programmable Media functionality with your existing application code.

This page offers a high-level overview on the steps required to integrate Cloudinary within your application, with links to more detailed documentation.

Each step of the process involves making some decisions based on your existing code, your programming preferences, and your application requirements. Some of these questions are highlighted at the beginning of each step below.

Tip
In addition to this page, don't miss the Service overview, which provides an overview of Cloudinary's service architecture, asset storage, security, available add-ons, and other details about how the service works at a high-level.

1. Create your account and set up your product environment

Questions you'll answer in this section

  • What's a product environment?
  • What should my product environment cloud name be?
  • What account and product environment settings should I set before I get started?

Creating your account and setting up your product environment takes only a few minutes.

Create and explore your account

If you don't have a Cloudinary account yet, you can sign up for a free account now.

Tips:

  • You can sign up for Cloudinary using an email address, Google account or Github account. If you register with the email option, don't forget to look for the Welcome to Cloudinary email and click the verification link inside to set your account as active.
  • When your account is created, a cloud_name is randomly generated for your initial product environment. Your cloud name will later be used in the URLs of media you deliver from Cloudinary, so it's a good idea to change your cloud name to a descriptive one for your organization, site or app. We'll walk you through this a little later on this page.

When you create an account, an initial product environment is also created. Depending on the plan you're on, you may be able to create multiple product environments (previously known as 'sub-accounts') in your account.

For example, you might create a 'staging' and a 'production' environment, or you might create different product environments for different websites or, if you implement apps for 3rd-party customers, you could create a separate product environment for each customer.

Each product environment has a separate asset repository. Additionally, some options and preferences are set at the product environment level while others are global for the whole account.

Your active product environment is displayed at the bottom of the Product Navigation pane. It shows the product environment display name if one was defined. Otherwise it shows the cloud name.

Getting started page

When you register for your new account, a very short survey opens to help us understand how you'll be using Cloudinary and ensure the best experience for you.

Next, you'll be taken to the Programmable Media Getting Started page. This page contains a host of information and guidance to help you get started with Cloudinary, including how to access your credentials, how to get set up with our SDKs and an introduction to Cloudinary Programmable Media terminology.

Getting started dashboard screenshot

Get familiar with the Cloudinary Console

You'll do most of your Cloudinary work as a developer directly in your favorite IDE. But there are some things that can only be done and/or might sometimes be easier/faster to do in the Cloudinary Console UI.

To get started, the most important areas of the console to become familiar with are the credentials section of the Dashboard page, the Media Library, and the Settings.

For details on other areas of the console, see Cloudinary Console.

Important
Your Cloudinary Console interface and available navigation options may look different than what's shown here. This new navigation experience will be rolled out to all customers by the end of December 2022.

Try it now: If your Console is still using the previous interface and you want to try out the new navigation experience now, you can activate it from the Account page in your Console Settings.

Product Environment Credentials

The Product Environment Credentials section on the Dashboard page shows the credentials for the product environment that was created with your account. These credentials include your cloud name identifier, and your API key and secret, which you'll need in order to configure your SDK or to directly run API requests against that product environment.

The API Environment variable combines all three credential values and can be copied for quick configuration of your SDK and other server-side integrations.

Cloudinary credentials

Important

  • Your cloud name and API key are specific to a product environment and are used for enabling or configuring a variety of Cloudinary Programmable Media features. As mentioned above, your cloud name is also a part of every media asset URL you deliver from Cloudinary. There's no problem to include these two values in client-side code.
  • Your API secret is used for authentication and should never be exposed in client-side code or in any other way outside your organization.
  • You can also find your product environment credentials in the Access Keys section of the Security Settings.
  • By default, new accounts have only one product environment. Paid accounts can have multiple product environments that can be used for things such as production and staging environments, or you might have different product environments to parallel different products, websites, organizations, geographies, or apps that you use with Cloudinary.

Media Library

The Media Library page of your Cloudinary console provides a comprehensive UI for managing all the digital assets in your product environment, including navigating folders, performing advanced searches, compiling assets into ad-hoc collections, collaborating on assets with other Cloudinary users by commenting on assets, drag-and-drop upload of new assets, and more.

Media Library main view

When you create a new Programmable Media product environment, a set of sample assets are provided in the Media Library. You can experiment with the Media Library features using these assets.

For more details, see the Digital Asset Management guide.

Optional. Update cloud name and other settings

You can get started using Cloudinary with the default settings, but there are a few initial settings you may want to consider modifying from the start.

To access your settings, click the Settings icon at the bottom-left of the console.

Account settings

View or update your cloud name

On the Account page of the Console Settings, you can see the current Product environment cloud name that was automatically generated during registration.

This cloud name is a unique identifier of your product environment that's also used in many places, including in the delivery URL of every Cloudinary asset. This can be valuable for SEO, so it's a good idea for your cloud name to be a good representation of your organization, site or app.

As long as you have not yet uploaded more than 1000 new assets in that product environment, you can change your cloud name now. You can also set or change your Product environment display name, which is an optional descriptive name that's shown in the product environment selector at the bottom left of the Cloudinary Console. (If no display name is defined, the selector shows the product environment's cloud name)

Notes

  • The sample assets that are provided when you create a new product environment are not counted against this 1000 asset limit for changing your cloud name, nor are they counted against your product environment storage quota.
  • If you need to change your cloud name and your product environment already has more than 1000 assets, you need to submit a support request.
  • Changing your cloud name will invalidate all cached URLs and all previously derived transformations. Changing the cloud name for the currently active product environment may also invalidate your current session, requiring you to log out and then log back into the Console.
  • If you have multiple product environments in your accounts, you can edit the cloud name and/or display name of any of them from the Product environment section at the bottom of the Accounts page in the Settings.

Check Upload settings

You may want to check or modify the following product environment settings in the Upload page of the Console Settings.

  • Automatic backup: When enabled, every uploaded file is also copied to a secondary write-protected location with multiple revisions per file. This means you can easily revert to an older version if needed. The default backup is to a Cloudinary storage location, meaning that your overall Cloudinary storage usage increases when you overwrite existing assets. Customers on a paid plan can alternatively back up to their own S3 or Google Cloud storage location.

    If you activate this option, then after you click Save at the bottom of the page, you can return to this option and select to Perform initial backup if you want to already back up any file currently in your product environment.

Check User settings

In the Users page of the Console Settings, check your email notification and login preferences.

Two factor authentication (2FA) is recommended for any Production product environment, or per your organization's security policy. SSO is available for enterprise accounts and is recommended if you have more than 100 users or per your organization's security policy.

For details on multiple-user accounts, roles and permissions, and more, see User settings.

Check Media Library preferences

To access Media Library preferences, make sure you've selected Digital Asset Management from the Product Selector at the top-left of the console. Then select Preferences from the Product Navigation menu, located on the left side of the console.

Media Library preferences

As a developer, you may want to consider the following Media Library preference options:

  • Keep existing metadata when uploading newer versions of an asset: By default, overwriting an asset clears all tags, contextual, and structured metadata values for that asset. If you prefer that these values will be retained (unless different values are specified for the tags, context, or metadata parameters as part of the upload), select this option. This option impacts both Media Library and programmatic uploads.

  • Manage Structured Metadata: Structured metadata enables you to predefine a number of typed fields, with or without validation rules, as optional or required fields for every asset in your product environment. For example, if your application supports user-generated content, you can define structured metadata fields that will be captured and passed as part of your end-user uploads to keep track of things like the user who uploaded the asset, product categories, countries, or other important data, and can ensure that these fields are used consistently for all assets in your product environment.

    You can define structured metadata fields for your product environment in the Manage Structured Metadata UI by selecting Structured Metadata from the Product Navigation located on the left side of the console.

    It's also possible to define these metadata fields programmatically using the Metadata API. Once the fields are created, you can set the field values programmatically using the metadata parameter of upload or explicit commands, the metadata method of the Upload API, or manually in the Media Library UI.


2. Configure your SDK

Questions you'll answer in this section

  • Which SDK(s) should I use?
  • Which configuration options should I set globally for my SDK?

Cloudinary develops a vast array of open-source SDKs for easier implementation of Cloudinary Programmable Media functionality in both your server-side and client-side code. The SDK libraries wrap Cloudinary's REST APIs and additionally offer a variety of useful helper methods, enabling you to implement comprehensive image and video upload, transformation, optimization, and delivery capabilities in your application, using code that integrates seamlessly with your existing application code.

Select the SDK(s) you want to use

Cloudinary offers SDKs for backend, frontend and mobile development.

Backend

Frontend

Mobile

iOS (Swift/ObjectiveC)

Android


Kotlin

Flutter

ALPHA

Community-developed framework integrations

You are also invited to use and contribute to these community-developed framework integrations for Cloudinary:

   Gatsby Offers two Gatsby plugins that enable you to to fetch media assets from Cloudinary (gatsby-source-cloudinary) and upload images from file nodes to Cloudinary (gatsby-transformer-cloudinary) and then transform them to Cloudinary file nodes.
   Gridsome Offers plugins that enable you to fetch image assets from Cloudinary into Gridsome (gridsome-source-cloudinary) and to upload images to Cloudinary and apply transformations (gridsome-plugin-cloudinary). You can also use the generic gridsome-transformer-img to upload and load local images with Cloudinary as the loader.
   Laravel The cloudinary-laravel package enables you to upload, optimize, transform and deliver media files using Cloudinary. It also provides a fluent and expressive API to attach your media files to Eloquent models.
   Netlify Hooks in to your Netlify build process and sets up images for optimization and delivery. Install the plug-in on Netlify or contribute to the open-source library.
   Next.js This open-source library provides components to enable you to upload and apply popular Cloudinary transformation and optimization features to your media when building Next.js applications.
   NuxtJS Enables you to upload, optimize and transform images and videos in a Nuxt application with the @nuxtjs/cloudinary module.
   Storefront UI Offers Cloudinary components that enable you to enhance and optimize your media while building your front end in Vue or Nuxt.

Important

  • Community-developed libraries are developed, tested and maintained by the community. Bug fixes and feature requests should be submitted in the relevant repository.
  • Throughout this documentation site, unless otherwise specified, the term "SDKs" refers to official Cloudinary SDK libraries. That information may or may not be relevant or accurate for these community-developed framework integration libraries. For information on setup, configuration and usage of these libraries, refer to the relevant community documentation.

Install the SDK and include it in your application code

You can use the examples below as one way to install an SDK using the relevant package manager. For more detailed instructions and additional options, click an SDK above and review the Installation and setup section of the SDK guide.

Ruby (cloudinary 1.x):
Copy to clipboard
gem install cloudinary
PHP (cloudinary_php 2.x):
Copy to clipboard
//Add to composer.json
{
  "require": {
    "cloudinary/cloudinary_php": "^2"
  }
}
//Then run:
php composer.phar install
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
//Add to composer.json
{
  "require": {
    "cloudinary/cloudinary_php": "dev-master"
  }
}
//Then run:
php composer.phar install
Python (cloudinary 1.x):
Copy to clipboard
pip install cloudinary
Node.js (cloudinary 1.x):
Copy to clipboard
npm install cloudinary
Java (cloudinary 1.x):
Copy to clipboard
//For Gradle, add to dependencies section of build.gradle
compile group: 'com.cloudinary', name: 'cloudinary-http44', version: '[Cloudinary API version, e.g. 1.1.3]'
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
npm install @cloudinary/url-gen
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
npm install cloudinary-core
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
# For NPM:   
npm install jquery
npm install cloudinary-jquery-file-upload

# For Bower: 
bower install cloudinary-jquery --save
React (cloudinary-react 1.x):
Copy to clipboard
npm install cloudinary-react
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
npm install cloudinary-vue
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
bower install cloudinary_ng#1.x --save
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
//Add CloudinaryDotNet using Nuget Package Manager or if using Package Manager Console: 
Install-Package CloudinaryDotNet
iOS (cloudinary 3.x):
Copy to clipboard
pod 'Cloudinary', '~> 2.0'
Android (cloudinary-android 1.x):
Copy to clipboard
//For Gradle, add to dependencies section of build.gradle
compile group: 'com.cloudinary', name: 'cloudinary-android', version: '1.24.0'
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
implementation 'com.cloudinary:kotlin-url-gen:1.0.0''
Go (cloudinary-go 1.x):
Copy to clipboard
go get github.com/cloudinary/cloudinary-go/v2

Set global configuration options

  • For all SDKs, you'll need to configure at least your cloud name.
  • For backend SDKs, you'll also need to configure your api_key and api_secret.
  • For all legacy SDKs, you'll probably want to set the secure parameter to true to ensure that your transformation URLs are always generated as HTTPS.
  • If you have a private CDN or CName, you'll need to configure those as well, and there are other optional configurations you may want to set.
  • Here are some basic examples of setting global configuration options in our SDKs:
Ruby (cloudinary 1.x):
Copy to clipboard
development: 
  cloud_name: "demo"
  api_key: YOUR_KEY
  api_secret: YOUR_SECRET
  secure: true

production:
  cloud_name: "demo"
  api_key: YOUR_KEY
  api_secret: YOUR_SECRET
  secure:true
PHP (cloudinary_php 2.x):
Copy to clipboard
Configuration::instance([
  'cloud' => [
    'cloud_name' => 'my_cloud_name', 
    'api_key' => 'my_key', 
    'api_secret' => 'my_secret'],
  'url' => [
    'secure' => true]]);
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
\Cloudinary::config([ 
  "cloud_name" => "my_cloud_name", 
  "api_key" => "my_key", 
  "api_secret" => "my_secret", 
  "secure" => true]);
Python (cloudinary 1.x):
Copy to clipboard
cloudinary.config( 
  cloud_name = "sample", 
  api_key = "874837483274837", 
  api_secret = "a676b67565c6767a6767d6767f676fe1",
  secure = True
)
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.config({ 
  cloud_name: 'sample', 
  api_key: '874837483274837', 
  api_secret: 'a676b67565c6767a6767d6767f676fe1',
  secure: true 
});
Java (cloudinary 1.x):
Copy to clipboard
import com.cloudinary.*;
...
Cloudinary cloudinary = new Cloudinary(ObjectUtils.asMap(
  "cloud_name", "my_cloud_name",
  "api_key", "my_api_key",
  "api_secret", "my_api_secret",
  "secure", "true"));
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo'
  }
});
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
var cl = new cloudinary.Cloudinary({cloud_name: "demo", secure: true});
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.config({ cloud_name: 'sample', secure: true});
React (cloudinary-react 1.x):
Copy to clipboard
<CloudinaryContext cloudName="demo" secure="true" upload_preset="my_unsigned_preset">
  <Image publicId="sample" />
  ...
  ...
</CloudinaryContext>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
import Cloudinary from 'cloudinary-vue';
Vue.use(Cloudinary, {
  configuration: {
    cloudName: "demo",
    secure: "true"
  }
});
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
CloudinaryModule.forRoot(Cloudinary, 
    {
      cloud_name: 'mycompany', 
      secure: true, 
      upload_preset: 'mypreset', 
      private_cdn: true, 
      cname: 'mycompany.images.com'
    }),
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
Account account = new Account(
  "my_cloud_name",
  "my_api_key",
  "my_api_secret");

Cloudinary cloudinary = new Cloudinary(account);
cloudinary.Api.Secure = true;
iOS (cloudinary 3.x):
Copy to clipboard
let config = CLDConfiguration(cloudName: "CLOUD_NAME", secure: "true")
let cloudinary = CLDCloudinary(configuration: config)
Android (cloudinary-android 1.x):
Copy to clipboard
Map config = new HashMap();
config.put("cloud_name", "myCloudName");
config.put("secure", true);
MediaManager.init(this, config);
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
import com.cloudinary.*; 
...
private val cloudinary = Cloudinary("cloudinary://<your-api-key>:<your-api-secret>@<your-cloud-name>")
Go (cloudinary-go 1.x):
Copy to clipboard
cld, _ := cloudinary.NewFromParams("<your-cloud-name>", "<your-api-key>", "<your-api-secret>")

You can find more information on where and how to specify Cloudinary configuration options for your SDK in the Configuration section of the relevant SDK guide.


3. Add upload capabilities

Questions you'll answer in this section

  • Which upload method(s) are most appropriate for my needs?
  • Which types of upload options will be useful for my app?
  • If migrating existing assets to Cloudinary, which migration option is best for me?

Cloudinary offers a variety of options for programmatically uploading assets to your product environment from your application.

  • Upload API - Implement your own upload functionality with the upload method of the Upload API. This method can be called directly from within your own custom code or by using one of Cloudinary's SDKs that wrap the REST API and greatly simplify the implementation. You also have the option to upload the resources directly to Cloudinary (bypassing your servers) with unsigned uploads - see how it's done in this CodeSandbox example.

    The following simple example shows the single line of code needed to upload an image from the remote URL https://www.example.com/mysample.jpg, and set its public_id (identifier) as sample_woman using any of our backend SDKs or the REST API:

    Ruby (cloudinary 1.x):
    Copy to clipboard
    Cloudinary::Uploader.upload("https://www.example.com/mysample.jpg",
      :public_id => "sample_woman")
    PHP (cloudinary_php 2.x):
    Copy to clipboard
    $cloudinary->uploadApi()->upload("https://www.example.com/mysample.jpg", 
      ["public_id" => "sample_woman"]);
    PHP (cloudinary_php 1.x (legacy)):
    Copy to clipboard
    \Cloudinary\Uploader::upload("https://www.example.com/mysample.jpg", 
      ["public_id" => "sample_woman"]);
    Python (cloudinary 1.x):
    Copy to clipboard
    cloudinary.uploader.upload("https://www.example.com/mysample.jpg", 
      public_id = "sample_woman")
    Node.js (cloudinary 1.x):
    Copy to clipboard
    cloudinary.v2.uploader
    .upload("https://www.example.com/mysample.jpg",
      { public_id: "sample_woman" })
    .then(result=>console.log(result));
    Java (cloudinary 1.x):
    Copy to clipboard
    cloudinary.uploader().upload(new File("https://www.example.com/mysample.jpg"),
      ObjectUtils.asMap("public_id", "sample_woman"));
    .NET (CloudinaryDotNet 1.x):
    Copy to clipboard
    var uploadParams = new ImageUploadParams(){
      File = new FileDescription(@"https://www.example.com/mysample.jpg"),
      PublicId = "sample_woman"};
    var uploadResult = cloudinary.Upload(uploadParams);
    Go (cloudinary-go 1.x):
    Copy to clipboard
    resp, err := cld.Upload.Upload(ctx, "https://www.example.com/mysample.jpg", uploader.UploadParams{
        PublicID: "sample_woman"})
    curl:
    Copy to clipboard
    curl https://api.cloudinary.com/v1_1/demo/image/upload -X POST --data 'file=https://www.example.com/mysample.jpg&public_id=sample_woman&timestamp=12345678&api_key=98765432&signature=a123456f987664af'
    cli:
    Copy to clipboard
    cld uploader upload "https://www.example.com/mysample.jpg" public_id="sample_woman"
  • Upload widget - Enable your users to upload images, videos or other files from their device or from their social media or media storage accounts via a self-contained, interactive user interface that can be easily embedded within your web application. The widget requires just a couple lines of JavaScript code to integrate into your app and can be optionally implemented with unsigned upload, enabling you to offer it as an exclusively front-end upload solution and eliminates the need to develop in-house interactive media upload capabilities.


    Upload widget

  • Auto Upload - Lazily migrate your existing assets to your Cloudinary product environment based on dynamic URL mapping. Your assets are dynamically retrieved the first time the URL is accessed and then stored in your Cloudinary product environment.

Tip
If you just want to upload assets to your product environment manually so that they are available for delivery, you can also drag-and-drop from your file system to the relevant folder in the Media Library, or open the Media Library Upload widget to upload media files from any source. For details, see Media Library upload options.

Upload preferences

You can specify a wide range of parameters for customizing how a file will be uploaded including:

  • Whether asset names will match the uploaded filename or include random characters
  • What resource data should be extracted/stored/tagged with the asset
  • Analysis or transformations to perform on the uploaded asset
  • Incoming or on-demand transformations to perform as part of the upload
  • Whether to send status updates to a notification URL

    And much more...

Check out the full list of available upload parameters.

You can set these preferences either by specifying them as parameters directly in your upload command or by specifying a pre-defined upload preset.

Upload presets enable you to centrally define a set of upload preferences instead of specifying them in each upload call. You can define multiple upload presets and then apply different presets in different upload scenarios. You can also assign the presets that should be used by default for API or Media Library uploads.

You can create and manage upload presets as well as set your product environment's default upload presets from the Upload page of the Console Settings. You can also create and manage upload presets programmatically using the upload_presets method of the Admin API. New product environments come with a default Media Library upload preset already configured.

For more information on upload presets, see Upload presets.

Migration

Cloudinary offers various methods for migrating your existing resources to Cloudinary:

  • Direct migration: A one time migration based on the upload method of the Upload API for migrating all existing resources in one phase.
  • Lazy migration: Migrate resources on demand from a remote location using Auto Upload, where migration is carried out only when the resource is requested by a visitor.
  • Bulk migration code (Rails only): Complete, automatic and exhaustive migration of images from your production environment to Cloudinary with the Cloudinary migration tool.

4. Transform and deliver assets

Questions you'll answer in this section

  • What kinds of automatic effects and adjustments might you want to apply to your delivered media?
  • Which advanced transformation options might be relevant for the features I need?
  • Should I apply optimization functionality to all my delivered assets?
  • How does Cloudinary help me automate responsive image delivery?
  • How can I improve SEO via my media assets?

Upload an original image or video once and use Cloudinary to generate different versions from the original, on the fly or in advance, enabling you to deliver optimized and responsive media via leading CDNs that perfectly fits your graphic design across every device and resolution.

Image and video transformations

By adding transformation parameters to an image or video URL (usually via SDK functions), you can apply a huge variety of automatic adjustments and effects to your delivered media.

Tip
You can also create your transformation URLs using the Transformation Editor or new Transformation Builder (Beta). Alternatively, you can take one of our Cookbook recipes as a starting point and then further modify it in the Transformation Editor to fit your needs. The editor and builder generate the URL and SDK code for the transformation you define so that you can copy it in the language you require.

Learn how to apply image transformations

For example, after uploading the following 'sample_woman' image:

Original woman (scaled down)

Using on-the-fly transformation parameters directly in the image URL, you could deliver the image with the following changes automatically applied:

  • Generate a 200x200px square thumbnail of the largest face in the image (w_200,h_200,c_thumb,g_face).
  • Round the corners with a radius of 20 pixels (r_20).
  • Add a 5 pixel wide black border (bo_5px_solid_black).
  • Add the cloudinary_icon_white image as an overlay, scaled to 25% of the width of the main image, placed 10 pixels away (vertically and horizontally) from the northeast corner, and with 50% opacity (l_cloudinary_icon_white,o_50,w_0.25,fl_relative,g_north_east,y_10,x_10).
  • Deliver as a PNG to enable transparency around the rounded corners.

Transformed image

And this is what the URL and corresponding SDK delivery code looks like for those transformations:

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("sample_woman.png", :transformation=>[
  {:gravity=>"face", :height=>200, :width=>200, :crop=>"thumb"},
  {:border=>"5px_solid_black", :radius=>20},
  {:overlay=>"cloudinary_icon_white"},
  {:flags=>"relative", :width=>0.25, :crop=>"scale"},
  {:opacity=>50},
  {:flags=>"layer_apply", :gravity=>"north_east", :x=>10, :y=>10}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('sample_woman.png'))
  ->resize(Resize::thumbnail()->width(200)
->height(200)
  ->gravity(
  Gravity::focusOn(
  FocusOn::face()))
  )
  ->border(Border::solid(5,Color::BLACK)
  ->roundCorners(
  RoundCorners::byRadius(20))
  )
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_white")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(0.25)
  ->relative()
  )
  ->adjust(Adjust::opacity(50)))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::northEast()))
->offsetX(10)
->offsetY(10))
  );
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("sample_woman.png", array("transformation"=>array(
  array("gravity"=>"face", "height"=>200, "width"=>200, "crop"=>"thumb"),
  array("border"=>"5px_solid_black", "radius"=>20),
  array("overlay"=>"cloudinary_icon_white"),
  array("flags"=>"relative", "width"=>"0.25", "crop"=>"scale"),
  array("opacity"=>50),
  array("flags"=>"layer_apply", "gravity"=>"north_east", "x"=>10, "y"=>10)
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("sample_woman.png").image(transformation=[
  {'gravity': "face", 'height': 200, 'width': 200, 'crop': "thumb"},
  {'border': "5px_solid_black", 'radius': 20},
  {'overlay': "cloudinary_icon_white"},
  {'flags': "relative", 'width': "0.25", 'crop': "scale"},
  {'opacity': 50},
  {'flags': "layer_apply", 'gravity': "north_east", 'x': 10, 'y': 10}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("sample_woman.png", {transformation: [
  {gravity: "face", height: 200, width: 200, crop: "thumb"},
  {border: "5px_solid_black", radius: 20},
  {overlay: "cloudinary_icon_white"},
  {flags: "relative", width: "0.25", crop: "scale"},
  {opacity: 50},
  {flags: "layer_apply", gravity: "north_east", x: 10, y: 10}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .gravity("face").height(200).width(200).crop("thumb").chain()
  .border("5px_solid_black").radius(20).chain()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .flags("relative").width(0.25).crop("scale").chain()
  .opacity(50).chain()
  .flags("layer_apply").gravity("north_east").x(10).y(10)).imageTag("sample_woman.png");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('sample_woman.png', {transformation: [
  {gravity: "face", height: 200, width: 200, crop: "thumb"},
  {border: "5px_solid_black", radius: 20},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {flags: "relative", width: "0.25", crop: "scale"},
  {opacity: 50},
  {flags: "layer_apply", gravity: "north_east", x: 10, y: 10}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("sample_woman.png", {transformation: [
  {gravity: "face", height: 200, width: 200, crop: "thumb"},
  {border: "5px_solid_black", radius: 20},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {flags: "relative", width: "0.25", crop: "scale"},
  {opacity: 50},
  {flags: "layer_apply", gravity: "north_east", x: 10, y: 10}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
// This code example is not currently available.
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="sample_woman.png" >
  <Transformation gravity="face" height="200" width="200" crop="thumb" />
  <Transformation border="5px_solid_black" radius="20" />
  <Transformation overlay="cloudinary_icon_white" />
  <Transformation flags="relative" width="0.25" crop="scale" />
  <Transformation opacity="50" />
  <Transformation flags="layer_apply" gravity="north_east" x="10" y="10" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="sample_woman.png" >
  <cld-transformation gravity="face" height="200" width="200" crop="thumb" />
  <cld-transformation border="5px_solid_black" radius="20" />
  <cld-transformation :overlay="cloudinary_icon_white" />
  <cld-transformation flags="relative" width="0.25" crop="scale" />
  <cld-transformation opacity="50" />
  <cld-transformation flags="layer_apply" gravity="north_east" x="10" y="10" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
// This code example is not currently available.
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="sample_woman.png" >
  <cl-transformation gravity="face" height="200" width="200" crop="thumb">
  </cl-transformation>
  <cl-transformation border="5px_solid_black" radius="20">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon_white">
  </cl-transformation>
  <cl-transformation flags="relative" width="0.25" crop="scale">
  </cl-transformation>
  <cl-transformation opacity="50">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_east" x="10" y="10">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Gravity("face").Height(200).Width(200).Crop("thumb").Chain()
  .Border("5px_solid_black").Radius(20).Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon_white")).Chain()
  .Flags("relative").Width(0.25).Crop("scale").Chain()
  .Opacity(50).Chain()
  .Flags("layer_apply").Gravity("north_east").X(10).Y(10)).BuildImageTag("sample_woman.png")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setGravity("face").setHeight(200).setWidth(200).setCrop("thumb").chain()
  .setBorder("5px_solid_black").setRadius(20).chain()
  .setOverlay("cloudinary_icon_white").chain()
  .setFlags("relative").setWidth(0.25).setCrop("scale").chain()
  .setOpacity(50).chain()
  .setFlags("layer_apply").setGravity("north_east").setX(10).setY(10)).generate("sample_woman.png")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .gravity("face").height(200).width(200).crop("thumb").chain()
  .border("5px_solid_black").radius(20).chain()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .flags("relative").width(0.25).crop("scale").chain()
  .opacity(50).chain()
  .flags("layer_apply").gravity("north_east").x(10).y(10)).generate("sample_woman.png");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.

One of the great things about these transformations, is that once you've chosen the transformation combination that answers your needs, you can reliably apply and deliver any image with the same transformations. For example, here's the same automatically generated face thumbnail for an image of a business man (who was posing in front of the capitol building in the originally uploaded photo):

Ruby (cloudinary 1.x):
Copy to clipboard
cl_image_tag("business_man.png", :transformation=>[
  {:gravity=>"face", :height=>200, :width=>200, :crop=>"thumb"},
  {:border=>"5px_solid_black", :radius=>20},
  {:overlay=>"cloudinary_icon_white"},
  {:flags=>"relative", :width=>0.25, :crop=>"scale"},
  {:opacity=>50},
  {:flags=>"layer_apply", :gravity=>"north_east", :x=>10, :y=>10}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new ImageTag('business_man.png'))
  ->resize(Resize::thumbnail()->width(200)
->height(200)
  ->gravity(
  Gravity::focusOn(
  FocusOn::face()))
  )
  ->border(Border::solid(5,Color::BLACK)
  ->roundCorners(
  RoundCorners::byRadius(20))
  )
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_white")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(0.25)
  ->relative()
  )
  ->adjust(Adjust::opacity(50)))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::northEast()))
->offsetX(10)
->offsetY(10))
  );
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_image_tag("business_man.png", array("transformation"=>array(
  array("gravity"=>"face", "height"=>200, "width"=>200, "crop"=>"thumb"),
  array("border"=>"5px_solid_black", "radius"=>20),
  array("overlay"=>"cloudinary_icon_white"),
  array("flags"=>"relative", "width"=>"0.25", "crop"=>"scale"),
  array("opacity"=>50),
  array("flags"=>"layer_apply", "gravity"=>"north_east", "x"=>10, "y"=>10)
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryImage("business_man.png").image(transformation=[
  {'gravity': "face", 'height': 200, 'width': 200, 'crop': "thumb"},
  {'border': "5px_solid_black", 'radius': 20},
  {'overlay': "cloudinary_icon_white"},
  {'flags': "relative", 'width': "0.25", 'crop': "scale"},
  {'opacity': 50},
  {'flags': "layer_apply", 'gravity': "north_east", 'x': 10, 'y': 10}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.image("business_man.png", {transformation: [
  {gravity: "face", height: 200, width: 200, crop: "thumb"},
  {border: "5px_solid_black", radius: 20},
  {overlay: "cloudinary_icon_white"},
  {flags: "relative", width: "0.25", crop: "scale"},
  {opacity: 50},
  {flags: "layer_apply", gravity: "north_east", x: 10, y: 10}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .gravity("face").height(200).width(200).crop("thumb").chain()
  .border("5px_solid_black").radius(20).chain()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .flags("relative").width(0.25).crop("scale").chain()
  .opacity(50).chain()
  .flags("layer_apply").gravity("north_east").x(10).y(10)).imageTag("business_man.png");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('business_man.png', {transformation: [
  {gravity: "face", height: 200, width: 200, crop: "thumb"},
  {border: "5px_solid_black", radius: 20},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {flags: "relative", width: "0.25", crop: "scale"},
  {opacity: 50},
  {flags: "layer_apply", gravity: "north_east", x: 10, y: 10}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.image("business_man.png", {transformation: [
  {gravity: "face", height: 200, width: 200, crop: "thumb"},
  {border: "5px_solid_black", radius: 20},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {flags: "relative", width: "0.25", crop: "scale"},
  {opacity: 50},
  {flags: "layer_apply", gravity: "north_east", x: 10, y: 10}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
// This code example is not currently available.
React (cloudinary-react 1.x):
Copy to clipboard
<Image publicId="business_man.png" >
  <Transformation gravity="face" height="200" width="200" crop="thumb" />
  <Transformation border="5px_solid_black" radius="20" />
  <Transformation overlay="cloudinary_icon_white" />
  <Transformation flags="relative" width="0.25" crop="scale" />
  <Transformation opacity="50" />
  <Transformation flags="layer_apply" gravity="north_east" x="10" y="10" />
</Image>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-image public-id="business_man.png" >
  <cld-transformation gravity="face" height="200" width="200" crop="thumb" />
  <cld-transformation border="5px_solid_black" radius="20" />
  <cld-transformation :overlay="cloudinary_icon_white" />
  <cld-transformation flags="relative" width="0.25" crop="scale" />
  <cld-transformation opacity="50" />
  <cld-transformation flags="layer_apply" gravity="north_east" x="10" y="10" />
</cld-image>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
// This code example is not currently available.
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-image public-id="business_man.png" >
  <cl-transformation gravity="face" height="200" width="200" crop="thumb">
  </cl-transformation>
  <cl-transformation border="5px_solid_black" radius="20">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon_white">
  </cl-transformation>
  <cl-transformation flags="relative" width="0.25" crop="scale">
  </cl-transformation>
  <cl-transformation opacity="50">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_east" x="10" y="10">
  </cl-transformation>
</cl-image>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Gravity("face").Height(200).Width(200).Crop("thumb").Chain()
  .Border("5px_solid_black").Radius(20).Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon_white")).Chain()
  .Flags("relative").Width(0.25).Crop("scale").Chain()
  .Opacity(50).Chain()
  .Flags("layer_apply").Gravity("north_east").X(10).Y(10)).BuildImageTag("business_man.png")
iOS (cloudinary 3.x):
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setGravity("face").setHeight(200).setWidth(200).setCrop("thumb").chain()
  .setBorder("5px_solid_black").setRadius(20).chain()
  .setOverlay("cloudinary_icon_white").chain()
  .setFlags("relative").setWidth(0.25).setCrop("scale").chain()
  .setOpacity(50).chain()
  .setFlags("layer_apply").setGravity("north_east").setX(10).setY(10)).generate("business_man.png")!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .gravity("face").height(200).width(200).crop("thumb").chain()
  .border("5px_solid_black").radius(20).chain()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .flags("relative").width(0.25).crop("scale").chain()
  .opacity(50).chain()
  .flags("layer_apply").gravity("north_east").x(10).y(10)).generate("business_man.png");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
// This code example is not currently available.
Transformed image with the same transformations

Learn how to apply video transformations

The same concepts apply for video transformations. This time we'll:

  • Scale the portrait video to a height of 320 pixels (h_320,c_scale).
  • Pad the video with a blurred version of the same video to generate a 480 * 320 landscape video (c_pad,h_320,w_480,b_blurred:400:15).
  • Remove the audio from (mutes) the video (e_volume:mute).
  • Double the video speed (e_accelerate:100).

Ruby (cloudinary 1.x):
Copy to clipboard
cl_video_tag("cld_rubiks_guy", :transformation=>[
  {:height=>320, :crop=>"scale"},
  {:background=>"blurred:400:15", :height=>320, :width=>480, :crop=>"pad"},
  {:effect=>"volume:mute"},
  {:effect=>"accelerate:100"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('cld_rubiks_guy.mp4'))
  ->resize(Resize::scale()->height(320))
  ->resize(Resize::pad()->width(480)
->height(320)
  ->background(
  Background::blurred()->intensity(400)
->brightness(15))
  )
  ->videoEdit(VideoEdit::volume(
  Volume::mute()))
  ->effect(Effect::accelerate()->rate(100));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("cld_rubiks_guy", array("transformation"=>array(
  array("height"=>320, "crop"=>"scale"),
  array("background"=>"blurred:400:15", "height"=>320, "width"=>480, "crop"=>"pad"),
  array("effect"=>"volume:mute"),
  array("effect"=>"accelerate:100")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("cld_rubiks_guy").video(transformation=[
  {'height': 320, 'crop': "scale"},
  {'background': "blurred:400:15", 'height': 320, 'width': 480, 'crop': "pad"},
  {'effect': "volume:mute"},
  {'effect': "accelerate:100"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("cld_rubiks_guy", {transformation: [
  {height: 320, crop: "scale"},
  {background: "blurred:400:15", height: 320, width: 480, crop: "pad"},
  {effect: "volume:mute"},
  {effect: "accelerate:100"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .height(320).crop("scale").chain()
  .background("blurred:400:15").height(320).width(480).crop("pad").chain()
  .effect("volume:mute").chain()
  .effect("accelerate:100")).videoTag("cld_rubiks_guy");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryVideo("cld_rubiks_guy.mp4")
  .resize(scale().height(320))
  .resize(
    pad()
      .width(480)
      .height(320)
      .background(blurred().intensity(400).brightness(15))
  )
  .videoEdit(volume(mute()))
  .effect(accelerate().rate(100));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('cld_rubiks_guy', {transformation: [
  {height: 320, crop: "scale"},
  {background: "blurred:400:15", height: 320, width: 480, crop: "pad"},
  {effect: "volume:mute"},
  {effect: "accelerate:100"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.video("cld_rubiks_guy", {transformation: [
  {height: 320, crop: "scale"},
  {background: "blurred:400:15", height: 320, width: 480, crop: "pad"},
  {effect: "volume:mute"},
  {effect: "accelerate:100"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("cld_rubiks_guy.mp4")
  .resize(scale().height(320))
  .resize(
    pad()
      .width(480)
      .height(320)
      .background(blurred().intensity(400).brightness(15))
  )
  .videoEdit(volume(mute()))
  .effect(accelerate().rate(100));
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="cld_rubiks_guy" >
  <Transformation height="320" crop="scale" />
  <Transformation background="blurred:400:15" height="320" width="480" crop="pad" />
  <Transformation effect="volume:mute" />
  <Transformation effect="accelerate:100" />
</Video>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-video public-id="cld_rubiks_guy" >
  <cld-transformation height="320" crop="scale" />
  <cld-transformation background="blurred:400:15" height="320" width="480" crop="pad" />
  <cld-transformation effect="volume:mute" />
  <cld-transformation effect="accelerate:100" />
</cld-video>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("cld_rubiks_guy.mp4")
  .resize(scale().height(320))
  .resize(
    pad()
      .width(480)
      .height(320)
      .background(blurred().intensity(400).brightness(15))
  )
  .videoEdit(volume(mute()))
  .effect(accelerate().rate(100));
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="cld_rubiks_guy" >
  <cl-transformation height="320" crop="scale">
  </cl-transformation>
  <cl-transformation background="blurred:400:15" height="320" width="480" crop="pad">
  </cl-transformation>
  <cl-transformation effect="volume:mute">
  </cl-transformation>
  <cl-transformation effect="accelerate:100">
  </cl-transformation>
</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Height(320).Crop("scale").Chain()
  .Background("blurred:400:15").Height(320).Width(480).Crop("pad").Chain()
  .Effect("volume:mute").Chain()
  .Effect("accelerate:100")).BuildVideoTag("cld_rubiks_guy")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setHeight(320).setCrop("scale").chain()
  .setBackground("blurred:400:15").setHeight(320).setWidth(480).setCrop("pad").chain()
  .setEffect("volume:mute").chain()
  .setEffect("accelerate:100")).generate("cld_rubiks_guy.mp4")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .height(320).crop("scale").chain()
  .background("blurred:400:15").height(320).width(480).crop("pad").chain()
  .effect("volume:mute").chain()
  .effect("accelerate:100")).resourceType("video").generate("cld_rubiks_guy.mp4");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.video {
  publicId("cld_rubiks_guy.mp4")
   resize(Resize.scale() { height(320) })
   resize(Resize.pad() { width(480)
 height(320)
   background(
  Background.blurred() { intensity(400)
 brightness(15) })
   })
   videoEdit(VideoEdit.volume(
  Volume.mute()))
   effect(Effect.accelerate() { rate(100) }) 
}.generate()


For the complete list of transformations parameters available, see the Transformation URL API Reference.

Note
Your account's pricing plan is in part dependent on the total number of "transformations" performed during a billing cycle. For details, see How are transformations counted?.

Optimization and delivery

Cloudinary leverages multiple CDNs, including Akamai, the leading CDN provider, with thousands of global delivery servers. Together with Cloudinary's advanced caching techniques and dynamic URL-based asset delivery, your media assets are efficiently delivered to your users all around the world.

Image and video optimizations

Deliver your assets with the smallest possible file size while maintaining visual quality, saving bandwidth and improving performance for your website. For images, Cloudinary automatically implements certain image optimizations by default. Additionally, for both images and videos, Cloudinary offers many other features for optimizing the resources you deliver to your users, for example:

  • Automatic gravity (g_auto) for images or videos instructs Cloudinary to resize and adjust your asset to fill the required dimensions while including the main subject.
  • Automatic format selection (f_auto) for images or videos instructs Cloudinary to deliver your asset to each user in the optimal format for the requesting browser.
  • Automatic quality selection (q_auto) for images or videos instructs Cloudinary's intelligent quality and encoding algorithm to apply the optimal quality compression level and encoding settings based on the specific content, format, and the requesting browser, in order to generate and deliver the asset with good visual quality while minimizing the file size.

The example shown on the left below applies all 3 of the above optimizations when delivering a cropped portrait video. The original (landscape orientation) 'frisbee_dog' video is shown on the right for comparison.

Ruby (cloudinary 1.x):
Copy to clipboard
cl_video_tag("frisbee_dog", :transformation=>[
  {:gravity=>"auto", :height=>250, :width=>150, :crop=>"fill"},
  {:quality=>"auto"}
  ])
PHP (cloudinary_php 2.x):
Copy to clipboard
(new VideoTag('frisbee_dog.mp4'))
  ->resize(Resize::fill()->width(150)
->height(250)
  ->gravity(
  Gravity::autoGravity())
  )
  ->delivery(Delivery::format(
  Format::auto()))
  ->delivery(Delivery::quality(
  Quality::auto()));
PHP (cloudinary_php 1.x (legacy)):
Copy to clipboard
cl_video_tag("frisbee_dog", array("transformation"=>array(
  array("gravity"=>"auto", "height"=>250, "width"=>150, "crop"=>"fill"),
  array("quality"=>"auto")
  )))
Python (cloudinary 1.x):
Copy to clipboard
CloudinaryVideo("frisbee_dog").video(transformation=[
  {'gravity': "auto", 'height': 250, 'width': 150, 'crop': "fill"},
  {'quality': "auto"}
  ])
Node.js (cloudinary 1.x):
Copy to clipboard
cloudinary.video("frisbee_dog", {transformation: [
  {gravity: "auto", height: 250, width: 150, crop: "fill"},
  {quality: "auto"}
  ]})
Java (cloudinary 1.x):
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .gravity("auto").height(250).width(150).crop("fill").chain()
  .quality("auto")).videoTag("frisbee_dog");
JS (@cloudinary/url-gen 1.x):
Copy to clipboard
new CloudinaryVideo("frisbee_dog.mp4")
  .resize(
    fill()
      .width(150)
      .height(250)
      .gravity(autoGravity())
  )
  .delivery(format(auto()))
  .delivery(quality(auto()));
JS (cloudinary-core 2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('frisbee_dog', {transformation: [
  {gravity: "auto", height: 250, width: 150, crop: "fill"},
  {quality: "auto"}
  ]}).toHtml();
jQuery (cloudinary-jquery 2.x):
Copy to clipboard
$.cloudinary.video("frisbee_dog", {transformation: [
  {gravity: "auto", height: 250, width: 150, crop: "fill"},
  {quality: "auto"}
  ]})
React (@cloudinary/react 1.x):
Copy to clipboard
//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("frisbee_dog.mp4")
  .resize(
    fill()
      .width(150)
      .height(250)
      .gravity(autoGravity())
  )
  .delivery(format(auto()))
  .delivery(quality(auto()));
React (cloudinary-react 1.x):
Copy to clipboard
<Video publicId="frisbee_dog" >
  <Transformation gravity="auto" height="250" width="150" crop="fill" />
  <Transformation quality="auto" />
</Video>
Vue.js (cloudinary-vue 1.x):
Copy to clipboard
<cld-video public-id="frisbee_dog" >
  <cld-transformation gravity="auto" height="250" width="150" crop="fill" />
  <cld-transformation quality="auto" />
</cld-video>
Angular (@cloudinary/ng 1.x):
Copy to clipboard
//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("frisbee_dog.mp4")
  .resize(
    fill()
      .width(150)
      .height(250)
      .gravity(autoGravity())
  )
  .delivery(format(auto()))
  .delivery(quality(auto()));
Angular (@cloudinary/angular-5.x 1.x (legacy)):
Copy to clipboard
<cl-video public-id="frisbee_dog" >
  <cl-transformation gravity="auto" height="250" width="150" crop="fill">
  </cl-transformation>
  <cl-transformation quality="auto">
  </cl-transformation>
</cl-video>
.NET (CloudinaryDotNet 1.x):
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Gravity("auto").Height(250).Width(150).Crop("fill").Chain()
  .Quality("auto")).BuildVideoTag("frisbee_dog")
iOS (cloudinary 3.x):
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setGravity("auto").setHeight(250).setWidth(150).setCrop("fill").chain()
  .setQuality("auto")).generate("frisbee_dog.mp4")
Android (cloudinary-android 1.x):
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .gravity("auto").height(250).width(150).crop("fill").chain()
  .quality("auto")).resourceType("video").generate("frisbee_dog.mp4");
Kotlin (kotlin-url-gen 1.x):
Copy to clipboard
cloudinary.video {
  publicId("frisbee_dog.mp4")
   resize(Resize.fill() { width(150)
 height(250)
   gravity(
  Gravity.autoGravity())
   })
   delivery(Delivery.format(
  Format.auto()))
   delivery(Delivery.quality(
  Quality.auto())) 
}.generate()

Responsive images

Upload a single high resolution image and let Cloudinary automatically transform it to perfectly fit any HiDPI device and Retina display, at any pixel density (DPR). Cloudinary supports responsive images using smart, on-the-fly resizing and cropping based on your visitor specific web layout, and also provides various solutions for automatically implementing responsive images on your website. Cloudinary also offers comprehensive options for delivering responsive image options on native android and iOS mobile apps.

Even more transformation and delivery options

You may also want to take advantage of:

  • Eager transformations: Create derived transformations for images and videos during the upload process and before publishing to visitors. All transformed resources will be available before your users request them for the first time.
  • Incoming transformations: Transform original images and videos during the upload process and then store them as original resources.
  • Named transformations: Define named transformations through the Cloudinary Console. This is useful when you have relatively long or complex transformations, or multiple transformations that are commonly used.
  • Conditional transformations: Apply transformations if a specified condition is met. The condition is based on specific image characteristics. Especially useful for delivering user generated content, and allows treating different images with different transformation criteria using a single transformation sequence.
  • User-defined variables: Enable you to create
  • Advanced URL delivery options: Cloudinary offers a range of advanced URL delivery options including:
    media access control, fetch and deliver remote images with transformations, asset versions, private CDNs and CNAMEs, SEO friendly URLs, multi-CDN solutions and more.

5. Next steps

Congratulations! You've taken the first steps to integrating Cloudinary Programmable Media capabilities into your app and you've answered many of the essential questions needed to make the most of Cloudinary.

At this point, you may also want to:

Learn more

This get started page walked you through the most common developer features. Below are a few more major functionalities we didn't cover here:

  • Learn how to programmatically manage your assets using Admin API (rate-limited) and Upload API (non-rate-limited) methods.
  • Further enhance your media upload and delivery with Cloudinary's add-ons.
  • Take advantage of Cloudinary's platform integrations to use Cloudinary capabilities directly within leading platforms.

Try it!

Jump right in and start playing with Cloudinary features by taking advantage of our collection of code explorers and interactive demos.

Code explorers and interactive demos page

Stay on top of What's New

Once you've got the hang of using Cloudinary, you'll probably want to know when new features, integrations, SDKs, and add-ons are available. Bookmark the Cloudinary Documentation Home page, where you can always see a list of the latest additions and jump straight into the docs for how to use them.

Documentation Home page What's New

Sign up for a course at Cloudinary Academy

Cloudinary Academy

 

Check out Cloudinary Academy, where you can take free self-paced courses or register for instructor-led virtual or on-site courses.

You may want to start with one or both of the following free Programmable Media courses:

(You must be signed in to your Cloudinary account to register for these courses.)

Follow and impact the Cloudinary Roadmap

We invite you to take a look at what's coming, what we are thinking about, and suggest your own ideas on the Cloudinary Roadmap. You can even vote on the planned or considered Roadmap items, indicating what's nice-to-have, what's important and what you see as critical.

Cloudinary Roadmap

Ask questions or share answers on the Cloudinary Community Forum


Cloudinary Community Forum

 

Bookmark the Cloudinary Community Forum, so you can regularly visit to post your questions and get answers from fellow developers and the Cloudinary team, find or share cool tips, learn about new features, and help others solve their media management and delivery challenges.

Watch some DevJams podcasts


Cloudinary DevJams podcasts

 

Choose from a variety of developer-centric podcasts where Cloudinary developers walk you through their innovative implementations for some very cool media use-cases.

Find all the DevJams podcasts on our Cloudinary Podcasts page or subscribe to the Cloudinary DevJams YouTube channel so you'll never miss one.

Try out some Media Jams developer tutorials


MediaJam

 

Visit MediaJams to find solutions (Jams) to the challenges that developers often encounter when building rich-media apps. Media Jams are easy-to-follow, bite-size tutorials and accompanying code sandboxes that facilitate learning-by-example for a variety of use-cases.

Media Jams are authored by subject-matter experts with applied knowledge of media best practices and design patterns in popular tech stacks (e.g. Jamstack).

✔️ Feedback sent!

Rate this page: