This add-on is operated by Cloudinary Ltd.

Manage, optimize, and deliver high-performance image and video experiences.

Last updated September 03, 2020

Cloudinary is a cloud service that offers a solution to a web application’s entire image management pipeline.

Easily upload images to the cloud. Automatically perform smart image resizing, cropping and conversion without installing any complex software. Integrate Facebook or Twitter profile image extraction in a snap, in any dimension and style to match your website’s graphics requirements. Images are seamlessly delivered through a fast CDN, and much much more.

Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with any web application, existing or new.

Cloudinary provides URL and HTTP based APIs that can be easily integrated with any Web development framework.

For Ruby on Rails, Django, and Node.js, Cloudinary provides libraries for simplifying the integration even further.

Sample transformations

Cloudinary provides a variety of transformations to uploaded images - all available simply by modifying the image URL at runtime. For instance, this sample image is automatically available via a CDN at the following URL:

http://res.cloudinary.com/demo/image/upload/sample.jpg

Generating a 150x100 version of the sample image and downloading it through a CDN:

http://res.cloudinary.com/demo/image/upload/w_150,h_100,c_fill/sample.jpg

Converting to a 150x100 PNG with rounded corners of 20 pixels:

http://res.cloudinary.com/demo/image/upload/w_150,h_100,c_fill,r_20/sample.png

For plenty more transformation options, see our image transformations documentation.

Generating a 120x90 thumbnail based on automatic face detection of the Facebook profile picture of Bill Clinton:

http://res.cloudinary.com/demo/image/facebook/c_thumb,g_face,h_90,w_120/billclinton.jpg

For more details, see our documentation for embedding Facebook and Twitter profile pictures.

For a more advanced example, take a look at the following Cloudinary URL that generates the image below:

http://res.cloudinary.com/demo/image/facebook/w_150,h_150,c_thumb,g_face,r_20,e_sepia/l_techcrunch,g_south_west,x_5,y_5,w_50/a_10/AriannaHuffington.png

What happened here? Simply accessing the above URL told Cloudinary to remotely fetch Arriana Huffington’s Facebook profile picture, created a 150x150px thumbnail using face detection based cropping, rounded the image’s corners, added a sepia effect, converted it to a transparent PNG format, added a watermark layer on the bottom-left corner, rotated the image by 10 degrees clock-wise and ultimately delivered the resulting image through a fast CDN using smart caching techniques. Isn’t that great?

Install the add-on

To install the free version of Cloudinary add-on, simply run:

$ heroku addons:create cloudinary
-----> Adding cloudinary to myapp... done

You can also do this from the Resources section of your application’s configuration page on Heroku.

Using with Ruby on Rails

Getting started guide

Take a look at our Getting started guide for Ruby on Rails.

Installation

Edit your Gemfile, add the following line and run bundle install

gem 'cloudinary'

If you would like to use our optional integration module of image uploads with ActiveRecord using CarrierWave, install CarrierWave gem:

Edit your Gemfile and run bundle install:

gem 'carrierwave'
gem 'cloudinary'

Upload

Assuming you have your Cloudinary configuration parameters defined (cloud_name, api_key, api_secret defined via CLOUDINARY_URL configuration variable), uploading to Cloudinary is very simple.

The following example uploads a local JPG to the cloud:

Cloudinary::Uploader.upload("my_picture.png")

# => {"public_id"=>"aamzahmqpc0irmlrcakyg", "version"=>1336304198, "signature"=>"abcdefgc024acceb1c5baa8dca46797137fa5ae0c3", "width"=>80, "height"=>120, "format"=>"png", "resource_type"=>"image", "url"=>"http://res.cloudinary.com/demo/image/upload/v1336304198/aamzahmqpc0irmlrcakyg.png", "secure_url"=>"https://d3jpl91pxevbkh.cloudfront.net/demo/image/upload/v1336304198/aamzahmqpc0irmlrcakyg.png"}

The uploaded image is assigned a randomly generated public ID. The image is immediately available for download through a CDN:

cl_image_tag("aamzahmqpc0irmlrcakyg.png")

# => http://res.cloudinary.com/demo/image/upload/aamzahmqpc0irmlrcakyg.png

You can also specify your own public ID:

Cloudinary::Uploader.upload("http://www.example.com/image.jpg", :public_id => 'sample_remote')

# => {"public_id"=>"sample_remote", "version"=>1336304441, "signature"=>"abcde20044f8c8ba71fb31ebe81e9d72ec8763dd", "width"=>100, "height"=>100, "format"=>"jpg", "resource_type"=>"image", "url"=>"http://res.cloudinary.com/demo/image/upload/v1336304441/sample_remote.jpg", "secure_url"=>"https://d3jpl91pxevbkh.cloudfront.net/demo/image/upload/v1336304441/sample_remote.jpg"}

The uploaded image is assigned with the given sample_remote public ID. The image is immediately available for download through a CDN:

cl_image_tag("sample_remote.jpg")

# => http://res.cloudinary.com/demo/image/upload/sample_remote.jpg

See our documentation for plenty more options of direct uploading to the cloud from your Ruby code or directly from the browser.

Embedding and transforming images

Any image uploaded to Cloudinary can be transformed and embedded using powerful view helper methods:

The following example generates an image of an uploaded sample image while transforming it to fill a 100x150 rectangle:

cl_image_tag("sample.jpg", :width => 100, :height => 150, :crop => :fill)

Another example, embedding a smaller version of an uploaded image while generating a 90x90 face detection based thumbnail:

cl_image_tag("woman.jpg", :width => 90, :height => 90, :crop => :thumb, :gravity => :face)

Embedding a Facebook profile to match your graphic design is very simple:

facebook_profile_image_tag("billclinton.jpg", :width => 90, :height => 130, :crop => :fill, :gravity => :north_west)

Same goes for Twitter:

twitter_name_profile_image_tag("billclinton.jpg")

See our documentation for more information about displaying and transforming images in Rails.

CarrierWave integration

Cloudinary’s Ruby gem includes an optional plugin for CarrierWave. If you already use CarrierWave, simply include Cloudinary::CarrierWave to switch to cloud storage and image processing in the cloud.

class PictureUploader < CarrierWave::Uploader::Base
  include Cloudinary::CarrierWave
    ...
  end

For more details on CarrierWave integration see our documentation.

We also published an interesting blog post about Ruby on Rails image uploads with CarrierWave and Cloudinary.

Face detection based cropping

Cloudinary can automatically crop a clear picture of a person in a way that the face of the person is in the center of the derived picture.

For example, we want to display a face thumbnail of the following uploaded image:

The following view helper method would generate a 100x100 thumbnail while using face detection for correctly cropping the image:

cl_image_tag("face_top.jpg", :width =>100, :height => 100, :crop => :thumb, :gravity => :face)

Cloudinary also supports fill cropping based on the position of a detected face and can crop by detecting multiple faces in the same image.

See our face detection documentation for more details. Additional examples are available in our blog post.

Sprite generation

A sprite is a single image that combines multiple images needed in your web application. In this case, the browser downloads only a single image while the CSS code directs the browser to the portion of the sprite to display for each contained image. Sprites are a great way to improve user experience by reducing network overhead and bypassing download limitations.

Cloudinary supports generating sprites with multiple uploaded images. Simply assign tags to uploaded images so you can group multiple images into a single sprite sharing the same tag.

You can assign tags while uploading images. For example:

Cloudinary::Uploader.upload("amazon_logo.png", :tags => ["logo"])

You can also manage tag assignment using our API. The following example adds the logo tag to four images with the given public IDs.

Cloudinary::Uploader.add_tag('logo', ['google_logo', 'apple_logo', 'amazon_logo', 'microsoft_logo'])

Generating a sprite can be done either dynamically when first accessing its URL or eagerly. The following command generates a sprite with all images sharing the logo tag:

Cloudinary::Uploader.generate_sprite('logo')

In order to embed sprite based images in your HTML views, simply include the automatically generated CSS of the sprite:

cl_sprite_tag("logo")

This would generate a Stylesheet link tag:

<link href="http://res.cloudinary.com/demo/image/sprite/logo.css" rel="stylesheet" type="text/css"/>

In your HTML code, simply use the public ID of the original uploaded images as the class name:

<div class="amazon_logo"/>

You can also automatically generate sprites while transforming all included images to fit in a certain dimension. The following example shows how to generate a sprite of the logo tag while transforming all images to fit in a 120x50 rectangle:

cl_sprite_tag("logo", :width => 120, :height => 50, :crop => :fit)

The following dynamic URLs allow accessing the generated CSS and PNG of the sprite:

http://res.cloudinary.com/demo/image/sprite/w_120,h_50,c_fit/logo.css

http://res.cloudinary.com/demo/image/sprite/w_120,h_50,c_fit/logo.png

For more details, see our documentation of sprite generation in general and sprite generation in Rails.

Using with Node.js

Getting started guide

Take a look at our Getting started guide for Node.js.

Installation

Edit your package.json, add cloudinary to the dependencies section. For example:

{
  "name": "node-example",
  "version": "0.0.1",
  "dependencies": {
    "express": "2.5.x",
    "cloudinary": ""
  },
  "engines": {
    "node": "0.6.x"
  }
}

Run npm install to install the Cloudinary npm in your local environment:

$ npm install
npm http GET https://registry.npmjs.org/cloudinary
...
cloudinary@0.2.1 ./node_modules/cloudinary
 ----- temp@0.4.0
 ----- underscore@1.3.3
 ----- coffee-script@1.3.3

Cloudinary npm will be automatically installed and available for your application on Heroku when you push a new version (git push heroku master).

Upload

Assuming you have your Cloudinary configuration parameters defined (cloud_name, api_key, api_secret defined via CLOUDINARY_URL configuration variable), uploading to Cloudinary is very simple.

The following example uploads a local JPG to the cloud:

var cloudinary = require('cloudinary')
cloudinary.uploader.upload("my_picture.jpg",
function(result) { console.log(result) })

Below is an example of an upload’s result:

{ public_id: '4srvcynxrf5j87niqcx6w',
  version: 1340625837,
  signature: '01234567890abcdef01234567890abcdef012345',
  width: 200,
  height: 200,
  format: 'jpg',
  resource_type: 'image',
  url: 'http://res.cloudinary.com/demo/image/upload/v1340625837/4srvcynxrf5j87niqcx6w.jpg',
  secure_url: 'https://d3jpl91pxevbkh.cloudfront.net/demo/image/upload/v1340625837/4srvcynxrf5j87niqcx6w.jpg' }

The uploaded image is assigned a randomly generated public ID. The image is immediately available for download through a CDN:

cloudinary.url("4srvcynxrf5j87niqcx6w.jpg")

// http://res.cloudinary.com/demo/image/upload/4srvcynxrf5j87niqcx6w.jpg

You can also specify your own public ID:

cloudinary.uploader.upload("http://www.example.com/image.jpg",
  function(result) {
    console.log(result)
    }, {public_id: 'sample_remote'})

{ public_id: 'sample_remote',
  version: 1336304441,
  signature: 'abcde20044f8c8ba71fb31ebe81e9d72ec8763dd',
  width: 100,
  height: 100,
  format: 'jpg',
  resource_type: 'image',
  url: 'http://res.cloudinary.com/demo/image/upload/v1336304441/sample_remote.jpg',
  secure_url: 'https://d3jpl91pxevbkh.cloudfront.net/demo/image/upload/v1336304441/sample_remote.jpg' }

The uploaded image is assigned with the given sample_remote public ID. The image is immediately available for download through a CDN:

cloudinary.url("sample_remote.jpg")

// http://res.cloudinary.com/demo/image/upload/sample_remote.jpg

See our documentation for plenty more options of uploading to the cloud from your Node.js code or directly from the browser.

You can also use cloudinary.upload_stream to write to the uploader as a stream:

var fs = require('fs');
var stream = cloudinary.uploader.upload_stream(function(result) { console.log(result); });
var file_reader = fs.createReadStream('my_picture.jpg', {encoding: 'binary'}).on('data', stream.write).on('end', stream.end);

Here’s a sample code that uses the Express framework for displaying an upload form, uploading an image to Cloudinary using streams and displaying a transformed version of the uploaded image:

var express = require('express');
var fs = require('fs');

var cloudinary = require('cloudinary');

var app = express.createServer(express.logger());
app.use(express.bodyParser())

app.get('/', function(req, res) {
  res.send('<form method="post" enctype="multipart/form-data">'
    + '<p>Public ID: <input type="text" name="title"/></p>'
    + '<p>Image: <input type="file" name="image"/></p>'
    + '<p><input type="submit" value="Upload"/></p>'
    + '</form>');
});

app.post('/', function(req, res, next) {
  stream = cloudinary.uploader.upload_stream(function(result) {
    console.log(result);
    res.send('Done:<br/> <img src="' + result.url + '"/><br/>' +
             cloudinary.image(result.public_id, { format: "png", width: 100, height: 130, crop: "fill" }));
  }, { public_id: req.body.title } );
  fs.createReadStream(req.files.image.path, {encoding: 'binary'}).on('data', stream.write).on('end', stream.end);
});

if (!module.parent) {
  var port = process.env.PORT || 5000;
  app.listen(port, function() {
    console.log("Listening on " + port);
  });
}

Embedding and transforming images

Any image uploaded to Cloudinary can be transformed and embedded using powerful view helper methods:

The following example generates the URL for accessing an uploaded sample image while transforming it to fill a 100x150 rectangle:

cloudinary.url("sample.jpg", { width: 100, height: 150, crop: "fill" })

Another example, embedding a smaller version of an uploaded image while generating a 90x90 face detection based thumbnail:

cloudinary.url("woman.jpg", { width: 90, height: 90, crop: "thumb", gravity: "face" })

Embedding a Facebook profile to match your graphic design is very simple:

cloudinary.url("billclinton.jpg", { width: 90, height: 130, type: "facebook", crop: "fill", gravity: "north_west"})

Same goes for Twitter:

cloudinary.url("billclinton.jpg", { type: "twitter_name" })

You can also generate image tags for your HTML page by using the cloudinary.image method. The syntax is very similar to the cloudinary.url method:

cloudinary.image("sample", { format: "png", width: 100, height: 100, crop: "fill"})

// <img src='http://res.cloudinary.com/demo/image/upload/c_fill,h_100,w_100/sample.png' height='100' width='100'/>

See our documentation for more information about displaying and transforming images in Node.js.

For more transformation examples, see our image transformation documentation.

Using with Django

Getting started guide

Take a look at our Getting started guide for Python & Django.

Installation

Install Cloudinary’s Python library by running:

$ pip install cloudinary

Downloading/unpacking cloudinary
  Downloading cloudinary-0.2.1.tar.gz
  Running setup.py egg_info for package cloudinary

Installing collected packages: cloudinary
  Running setup.py install for cloudinary

Successfully installed cloudinary
Cleaning up...

Create a pip requirements file which declares the required Python modules:

$ pip freeze > requirements.txt

The requirements.txt file should include all required packages including Cloudinary’s:

$ cat requirements.txt

Django==1.4
cloudinary==0.2.1
distribute==0.6.27
dj-database-url==0.2.1
poster==0.8.1
psycopg2==2.4.5
wsgiref==0.1.2

Cloudinary’s package will be automatically installed and available for your application on Heroku when you push a new version (git push heroku master).

Upload

Assuming you have your Cloudinary configuration parameters defined (cloud_name, api_key, api_secret defined via CLOUDINARY_URL configuration variable), uploading to Cloudinary is very simple.

The following example uploads a local JPG to the cloud:

cloudinary.uploader.upload("my_picture.jpg")

Below is an example of an upload’s result:

{u'secure_url': u'https://d3jpl91pxevbkh.cloudfront.net/demo/image/upload/v1340625837/4srvcynxrf5j87niqcx6w.jpg', u'public_id': u'4srvcynxrf5j87niqcx6w', u'format': u'jpg', u'url': u'http://res.cloudinary.com/demo/image/upload/v1336304441/sample_remote.jpg', u'height': 200, u'width': 200, u'version': 1340625837, u'signature': u'01234567890abcdef01234567890abcdef012345', u'resource_type': u'image'}

The uploaded image is assigned a randomly generated public ID. The image is immediately available for download through a CDN:

```python
cloudinary.utils.cloudinary_url("4srvcynxrf5j87niqcx6w.jpg")

# http://res.cloudinary.com/demo/image/upload/4srvcynxrf5j87niqcx6w.jpg

You can also specify your own public ID:

cloudinary.uploader.upload("http://www.example.com/image.jpg", public_id = 'sample_remote')

# {u'secure_url': u'https://d3jpl91pxevbkh.cloudfront.net/demo/image/upload/v1336304441/sample_remote.jpg', u'public_id': u'sample_remote', u'format': u'jpg', u'url': u'http://res.cloudinary.com/demo/image/upload/v1336304441/sample_remote.jpg', u'height': 100, u'width': 100, u'version': 1336304441, u'signature': u'abcde20044f8c8ba71fb31ebe81e9d72ec8763dd', u'resource_type': u'image'}


The uploaded image is assigned with the given `sample_remote` public ID. The image is immediately available for download through a CDN:

```python
cloudinary.utils.cloudinary_url("sample_remote.jpg")

# http://res.cloudinary.com/demo/image/upload/sample_remote.jpg

See our documentation for plenty more options of uploading to the cloud from your Python & Django code or directly from the browser.

Embedding and transforming images

Any image uploaded to Cloudinary can be transformed and embedded using powerful view helper methods:

The following example generates the URL for accessing an uploaded sample image while transforming it to fill a 100x150 rectangle:

cloudinary.utils.cloudinary_url("sample.jpg", width = 100, height = 150, crop = "fill")

Another example, embedding a smaller version of an uploaded image while generating a 90x90 face detection based thumbnail:

cloudinary.utils.cloudinary_url("woman.jpg", width = 90, height = 90, crop = "thumb", gravity = "face")

Embedding a Facebook profile to match your graphic design is very simple:

cloudinary.utils.cloudinary_url("billclinton.jpg", width = 90, height = 130, type = "facebook",crop => "fill", gravity => "north_west")

Same goes for Twitter:

cloudinary.utils.cloudinary_url("billclinton.jpg", type = "twitter_name")

See our documentation for more information about displaying and transforming images in Python & Django.

For more transformation examples, see our image transformation documentation.

For integrating with your Django application, you can use the following classes and template tags:

cloudinary.CloudinaryImage

Represents an image stored in Cloudinary.

Usage: img = cloudinary.CloudinaryImage(“sample”, format=“png”)

img.url(width=100, height=100, crop="fill")
# http://res.cloudinary.com/cloud_name/image/upload/c_fill,h_100,w_100/sample.png

img.image(width=100, height=100, crop="fill")
# <img src="http://res.cloudinary.com/cloud_name/image/upload/c_fill,h_100,w_100/sample.png" width="100" height="100"/>

cloudinary.models.CloudinaryField

Allows you to store references to Cloudinary stored images in your model. Returns an CloudinaryImage object.

class Poll(models.Model):
  # ...
  image = cloudinary.models.CloudinaryField('image')

cloudinary.forms.CloudinaryField

Form field that allows you to validate and convert to CloudinaryImage a signed Cloudinary image reference (see here).

Template tags

Initialization:

{% load cloudinary %}

Image tags can be generated from public_id or from CloudinaryImage object using:

{% cloudinary image width=100, height=100, crop="fill" %}
# <img src="http://res.cloudinary.com/cloud_name/image/upload/c_fill,h_100,w_100/sample.png" width="100" height="100" crop="scale"/>

The following tag generates an html form that can be used to upload the file directly to Cloudinary. The result is a redirect to the supplied callback_url.

{% cloudinary_direct_upload callback_url %}

Optional parameters:

public_id - The name of the uploaded file in Cloudinary

Local environment setup

After provisioning the add-on it’s necessary to locally replicate the config vars so your development environment can operate against the service.

You can use heroku config for displaying Cloudinary’s environment variables:

$ heroku config | grep CLOUDINARY
CLOUDINARY_URL      => cloudinary://123456789012345:abcdeghijklmnopqrstuvwxyz12@n07t21i7

Use Heroku Local to configure, run and manage process types specified in your app’s Procfile. Heroku Local reads configuration variables from a .env file. Use the following command to add the Cloudinary values retrieved from heroku config to .env.

$ heroku config -s | grep CLOUDINARY >> .env
$ more .env

Management console

The Management Console allows you to browse through uploaded images and generated transformations. You can also view your usage reports and cloud settings. Comprehensive documentation is also available.

The dashboard can be accessed via the CLI:

$ heroku addons:open cloudinary
Opening cloudinary for myapp...

or by visiting the Heroku Dashboard and selecting the application in question. Select Cloudinary from the Add-ons menu.

Support

All Cloudinary support and runtime issues should be logged with Heroku Support at https://support.heroku.com. Any non-support related issues or product feedback is welcome at info@cloudinary.com.

Additional resources

Additional resources are available at:

• Website
• Features overview
• Twitter Profile
• Documentation
• Knowledge Base
• Documentation for Ruby on Rails integration
• Documentation for Python & Django
• Documentation for Node.js
• Documentation for jQuery
• Image transformations documentation
• Upload API documentation

Our open-source client libraries can be found at:

• Ruby on Rails
• Python & Django
• Node.js
• jQuery
• Java