Image transformations

Whether your web application delivers static images, supports user-uploaded images, or you display profile pictures from social networks, you probably need to adjust them to fit the graphic design of your website or mobile application. Cloudinary's dynamic URL transformations enable you to achieve those goals programmatically without the need for graphic designers and tools.

Here are just a few examples of things you can accomplish on-the-fly by combining Cloudinary transformations in the image delivery URL. Click each image to see the URL parameters applied in each case:

Convert format, round,
change aspect ratio & crop to face,
add outlines & shadows Place, style, and format
image and text layers Apply special effects like
cartoonify and brightness,
rotate to any angle

Overview

Cloudinary allows you to easily transform your images on-the-fly to any required format, style and dimension, and apply effects and other visual enhancements. You can also optimize your images to deliver them with minimal file size alongside high visual quality for an improved user experience and minimal bandwidth. You can do all of this by implementing dynamic image transformation and delivery URLs. All transformed images are created on-demand (lazily) and delivered to your users through a fast CDN with optimized caching.

For example, you can:

• Deliver images using the image format that fits your needs.
• Resize and crop your images to the required dimensions using different scaling and cropping techniques, or use our smart cropping techniques, including face-detection or auto-gravity for cropping to focus on the most relevant parts of a photo.
• Generate a new image by layering other images or text on your base image.
• Apply a variety of effects, filters, and other visual enhancements to achieve the required impact.

Quick Example

The following dynamic URL with on-the-fly image transformation crops an image to a 400x400 circular thumbnail while automatically focusing on the face, and then scales down the result to a width of 200 pixels. Below you can see the original image (scaled down) and the dynamically created face detection based thumbnail.

cl_image_tag("lady.jpg", :transformation=>[
  {:gravity=>"face", :height=>400, :width=>400, :crop=>"crop"},
  {:radius=>"max"},
  {:width=>200, :crop=>"scale"}
  ])

cl_image_tag("lady.jpg", array("transformation"=>array(
  array("gravity"=>"face", "height"=>400, "width"=>400, "crop"=>"crop"),
  array("radius"=>"max"),
  array("width"=>200, "crop"=>"scale")
  )))

(new ImageTag('lady.jpg'))
  ->resize(Resize::crop()->width(400)->height(400)->gravity(Gravity::focusOn(FocusOn::face())))
  ->roundCorners(RoundCorners::max())
  ->resize(Resize::scale()->width(200));

CloudinaryImage("lady.jpg").image(transformation=[
  {'gravity': "face", 'height': 400, 'width': 400, 'crop': "crop"},
  {'radius': "max"},
  {'width': 200, 'crop': "scale"}
  ])

cloudinary.image("lady.jpg", {transformation: [
  {gravity: "face", height: 400, width: 400, crop: "crop"},
  {radius: "max"},
  {width: 200, crop: "scale"}
  ]})

cloudinary.url().transformation(new Transformation()
  .gravity("face").height(400).width(400).crop("crop").chain()
  .radius("max").chain()
  .width(200).crop("scale")).imageTag("lady.jpg");

cloudinary.imageTag('lady.jpg', {transformation: [
  {gravity: "face", height: 400, width: 400, crop: "crop"},
  {radius: "max"},
  {width: 200, crop: "scale"}
  ]}).toHtml();

$.cloudinary.image("lady.jpg", {transformation: [
  {gravity: "face", height: 400, width: 400, crop: "crop"},
  {radius: "max"},
  {width: 200, crop: "scale"}
  ]})

<Image publicId="lady.jpg" >
  <Transformation gravity="face" height="400" width="400" crop="crop" />
  <Transformation radius="max" />
  <Transformation width="200" crop="scale" />
</Image>

<cld-image publicId="lady.jpg" >
  <cld-transformation gravity="face" height="400" width="400" crop="crop" />
  <cld-transformation radius="max" />
  <cld-transformation width="200" crop="scale" />
</cld-image>

<cl-image public-id="lady.jpg" >
  <cl-transformation gravity="face" height="400" width="400" crop="crop">
  </cl-transformation>
  <cl-transformation radius="max">
  </cl-transformation>
  <cl-transformation width="200" crop="scale">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Gravity("face").Height(400).Width(400).Crop("crop").Chain()
  .Radius("max").Chain()
  .Width(200).Crop("scale")).BuildImageTag("lady.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setGravity("face").setHeight(400).setWidth(400).setCrop("crop").chain()
  .setRadius("max").chain()
  .setWidth(200).setCrop("scale")).generate("lady.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .gravity("face").height(400).width(400).crop("crop").chain()
  .radius("max").chain()
  .width(200).crop("scale")).generate("lady.jpg");

cloudinary.image {
publicId("lady.jpg")
resize(Resize.crop() {
width(400)
height(400)
gravity(Gravity.focusOn(FocusOn.face()))
})
roundCorners(RoundCorners.max())
resize(Resize.scale() {
width(200)
})}.generate()

Transformation URL syntax

Accessing your Cloudinary media assets is done using simple delivery HTTP or HTTPS URLs, which are then delivered to users via a worldwide fast CDN. The URL contains the public ID of the requested asset plus any optional transformation parameters. The public ID is the unique identifier of the asset and is either specified when uploading the asset to your Cloudinary account, or automatically assigned by Cloudinary (see Upload images for more details on the various options for specifying the public ID).

Cloudinary's SDKs take care of the transformation URL building for you, and simplify the integration even further. They allow you to continue working in your preferred developer framework and provide helper methods to simplify building image tags and image transformation URLs.

Transformation URL structure

The default Cloudinary asset delivery URL has the following structure:

Where:

• cloud_name - The name of your Cloudinary account, a unique public identifier for URL building and API access.

  Note: Paid customers on the Advanced plan or higher can request to use a private CDN or CNAME to customize the domain name used for your delivery URLs.

• asset_type - (optional) The type of asset to deliver. Default: image. Valid values: image, raw, or video.
  • The image type includes still image and photo formats, animated images, PDFs, layered files, such as TIFF and PSD, and others.
  • The video type includes video and audio files.
  • The raw type includes any file uploaded to Cloudinary that does not fit in one of the above categories. In general, transformations cannot be performed on raw assets, but they can be delivered as-is for download purposes, or in some cases, they may be used in conjunction with your image or video transformations.
• delivery_type - (optional) The storage or delivery type. Default: upload. For details on all possible types, see Delivery types.
• transformations (optional) One or more transformation parameters in a single component, or a set of chained transformations in multiple components. When the transformation URL is first accessed, the derived media file is created on-the-fly and delivered to your user. The derived file is also cached on the CDN and is immediately available to all subsequent users requesting the same asset.
• version - (optional) You can add the version to your delivery URL to bypass the cached version on the CDN and force delivery of the latest resource (in the case that a resource has been overwritten with a newer file). For simplicity, the version component is generally not included in the example URLs on this page. For details, see Asset versions.
• public_id - The unique identifier of the resource, including the folder structure if relevant.
• extension - (optional) The file extension of the requested delivery format for the resource. Default: The originally uploaded format or the format determined by f_auto, when used.

Therefore, in the most general case of delivering an image that has been uploaded to your Cloudinary account, the delivery URL is given as:

https://res.cloudinary.com/<cloud_name>/image/upload/<public_id>.<extension>

For example, displaying the image with a public ID of sample uploaded to Cloudinary's demo account in jpg format:

cl_image_tag("sample.jpg")

cl_image_tag("sample.jpg")

(new ImageTag('sample.jpg'));

CloudinaryImage("sample.jpg").image()

cloudinary.image("sample.jpg")

cloudinary.url().imageTag("sample.jpg");

cloudinary.imageTag('sample.jpg').toHtml();

$.cloudinary.image("sample.jpg")

<Image publicId="sample.jpg" >

</Image>

<cld-image publicId="sample.jpg" >

</cld-image>

<cl-image public-id="sample.jpg" >

</cl-image>

cloudinary.Api.UrlImgUp.BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().generate("sample.jpg");

cloudinary.image {
publicId("sample.jpg")
}.generate()

Any transformation instructions can be added before the public ID in the delivery URL. When the URL is first accessed, the derived asset is created on-the-fly and delivered to your user. The derived asset is also cached on the CDN and is immediately available to all subsequent users requesting the same asset.

The following shows an example of delivering an image with transformation parameters, where the image with a public ID of sample is cropped to a width of 300 pixels and a height of 200 pixels, and delivered in JPEG format:

cl_image_tag("sample.jpg", :height=>200, :width=>300, :crop=>"crop")

cl_image_tag("sample.jpg", array("height"=>200, "width"=>300, "crop"=>"crop"))

(new ImageTag('sample.jpg'))
  ->resize(Resize::crop()->width(300)->height(200));

CloudinaryImage("sample.jpg").image(height=200, width=300, crop="crop")

cloudinary.image("sample.jpg", {height: 200, width: 300, crop: "crop"})

cloudinary.url().transformation(new Transformation().height(200).width(300).crop("crop")).imageTag("sample.jpg");

cloudinary.imageTag('sample.jpg', {height: 200, width: 300, crop: "crop"}).toHtml();

$.cloudinary.image("sample.jpg", {height: 200, width: 300, crop: "crop"})

<Image publicId="sample.jpg" >
  <Transformation height="200" width="300" crop="crop" />
</Image>

<cld-image publicId="sample.jpg" >
  <cld-transformation height="200" width="300" crop="crop" />
</cld-image>

<cl-image public-id="sample.jpg" >
  <cl-transformation height="200" width="300" crop="crop">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200).Width(300).Crop("crop")).BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200).setWidth(300).setCrop("crop")).generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation().height(200).width(300).crop("crop")).generate("sample.jpg");

cloudinary.image {
publicId("sample.jpg")
resize(Resize.crop() {
width(300)
height(200)
})}.generate()

You can also use shortcut URLs when specifically delivering image files using the default upload type. With Cloudinary’s Root Path URL feature, the resource type and type parameters can be omitted from the URL (they automatically default to the values 'image' and 'upload' respectively). For example, the Root Path shortcut delivery URL for the cropped image above is:

https://res.cloudinary.com/demo/c_crop,h_200,w_300/sample.jpg

Transformation URL video tutorial

The following video provides a quick demonstration of how dynamic transformation URLs work.

Delivery types

The delivery type element of the URL provides an indication about the way the asset will be delivered, although in most cases, the delivery type value is determined at the time that the asset is stored in your account.

The following delivery type values are supported:

Parameter types

There are two types of transformation parameters:

• Action parameters: Parameters that perform a specific transformation on the asset.
• Qualifier parameters: Parameters that do not perform an action on their own, but rather alter the default behavior or otherwise adjust the outcome of the corresponding action parameter.

It's best practice to include only one action parameter per URL component.

If you want to apply multiple actions in a single transformation URL, apply them in separate chained components, where each action is performed on the result of the previous one.

In contrast, qualifier parameters must be included in the component with the action parameter they qualify.

• Most qualifiers are optional, meaning the related action parameter can be used independently, but you can add optional qualifiers to modify the default behavior.
• In some cases, an action parameter requires one or more qualifiers to fully define the transformation behavior.
• There are a few parameters that can be used independently as action parameters, but can also be used in other scenarios as a qualifier for another action.

For example, the transformation below includes a crop action, a rounding action, and 2 effect actions. The qualifier transformations included in each action define additional adjustments on the transformation action's behavior:

• The width, aspect ratio, gravity, and zoom qualifiers control the way the thumbnail crop action will be performed.
• The rounding action does not have any qualifiers.
• The color qualifier overrides the default color of the outline effect action.
• The x and y qualifiers adjust the placement of the shadow effect and the color qualifier overrides the default shadow color.

cl_image_tag("actor.png", :transformation=>[
  {:aspect_ratio=>"1.0", :gravity=>"face", :width=>0.6, :zoom=>0.7, :crop=>"thumb"},
  {:radius=>"max"},
  {:color=>"brown", :effect=>"outline"},
  {:color=>"grey", :effect=>"shadow", :x=>30, :y=>55}
  ])

cl_image_tag("actor.png", array("transformation"=>array(
  array("aspect_ratio"=>"1.0", "gravity"=>"face", "width"=>"0.6", "zoom"=>"0.7", "crop"=>"thumb"),
  array("radius"=>"max"),
  array("color"=>"brown", "effect"=>"outline"),
  array("color"=>"grey", "effect"=>"shadow", "x"=>30, "y"=>55)
  )))

(new ImageTag('actor.png'))
  ->resize(Resize::thumbnail()->width(0.6)->aspectRatio(1.0)
    ->zoom(0.7)->gravity(Gravity::focusOn(FocusOn::face())))
  ->roundCorners(RoundCorners::max())
  ->effect(Effect::outline()->color(Color::BROWN))
  ->effect(Effect::shadow()->color(Color::GREY)->offsetX(30)
    ->offsetY(55));

CloudinaryImage("actor.png").image(transformation=[
  {'aspect_ratio': "1.0", 'gravity': "face", 'width': "0.6", 'zoom': "0.7", 'crop': "thumb"},
  {'radius': "max"},
  {'color': "brown", 'effect': "outline"},
  {'color': "grey", 'effect': "shadow", 'x': 30, 'y': 55}
  ])

cloudinary.image("actor.png", {transformation: [
  {aspect_ratio: "1.0", gravity: "face", width: "0.6", zoom: "0.7", crop: "thumb"},
  {radius: "max"},
  {color: "brown", effect: "outline"},
  {color: "grey", effect: "shadow", x: 30, y: 55}
  ]})

cloudinary.url().transformation(new Transformation()
  .aspectRatio("1.0").gravity("face").width(0.6).zoom(0.7).crop("thumb").chain()
  .radius("max").chain()
  .color("brown").effect("outline").chain()
  .color("grey").effect("shadow").x(30).y(55)).imageTag("actor.png");

cloudinary.imageTag('actor.png', {transformation: [
  {aspectRatio: "1.0", gravity: "face", width: "0.6", zoom: "0.7", crop: "thumb"},
  {radius: "max"},
  {color: "brown", effect: "outline"},
  {color: "grey", effect: "shadow", x: 30, y: 55}
  ]}).toHtml();

$.cloudinary.image("actor.png", {transformation: [
  {aspect_ratio: "1.0", gravity: "face", width: "0.6", zoom: "0.7", crop: "thumb"},
  {radius: "max"},
  {color: "brown", effect: "outline"},
  {color: "grey", effect: "shadow", x: 30, y: 55}
  ]})

<Image publicId="actor.png" >
  <Transformation aspectRatio="1.0" gravity="face" width="0.6" zoom="0.7" crop="thumb" />
  <Transformation radius="max" />
  <Transformation color="brown" effect="outline" />
  <Transformation color="grey" effect="shadow" x="30" y="55" />
</Image>

<cld-image publicId="actor.png" >
  <cld-transformation aspectRatio="1.0" gravity="face" width="0.6" zoom="0.7" crop="thumb" />
  <cld-transformation radius="max" />
  <cld-transformation color="brown" effect="outline" />
  <cld-transformation color="grey" effect="shadow" x="30" y="55" />
</cld-image>

<cl-image public-id="actor.png" >
  <cl-transformation aspect-ratio="1.0" gravity="face" width="0.6" zoom="0.7" crop="thumb">
  </cl-transformation>
  <cl-transformation radius="max">
  </cl-transformation>
  <cl-transformation color="brown" effect="outline">
  </cl-transformation>
  <cl-transformation color="grey" effect="shadow" x="30" y="55">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("1.0").Gravity("face").Width(0.6).Zoom(0.7).Crop("thumb").Chain()
  .Radius("max").Chain()
  .Color("brown").Effect("outline").Chain()
  .Color("grey").Effect("shadow").X(30).Y(55)).BuildImageTag("actor.png")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setAspectRatio("1.0").setGravity("face").setWidth(0.6).setZoom(0.7).setCrop("thumb").chain()
  .setRadius("max").chain()
  .setColor("brown").setEffect("outline").chain()
  .setColor("grey").setEffect("shadow").setX(30).setY(55)).generate("actor.png")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("1.0").gravity("face").width(0.6).zoom(0.7).crop("thumb").chain()
  .radius("max").chain()
  .color("brown").effect("outline").chain()
  .color("grey").effect("shadow").x(30).y(55)).generate("actor.png");

cloudinary.image {
publicId("actor.png")
resize(Resize.thumbnail() {
width(0.6f)
aspectRatio(1.0f)
zoom(0.7f)
gravity(Gravity.focusOn(FocusOn.face()))
})
roundCorners(RoundCorners.max())
effect(Effect.outline() {
color(Color.BROWN)
})
effect(Effect.shadow() {
color(Color.GREY)
offsetX(30)
offsetY(55)
})}.generate()

Transformation flags

Transformation flags alter default transformation behavior. In some cases, they alter the default behavior of the transformation URL as a whole. In other cases, they alter the behavior of one or more specific transformation parameters that must be used together in the same URL component.

In general, tens of flags are available that can alter delivery and format, cropping and positioning, metadata and color profiles, and overlays, PDFs, and text behaviors.

For example:

• fl_attachment alters the normal behavior of the overall transformation. Instead of delivering an image or video in a web page, it causes the transformed media file to download as an attachment. This flag can be used independently.

• fl_relative modifies the way overlay resize parameters are evaluated. This flag can only be used in conjunction with the overlay (l_publicid) parameter.

• fl_layer_apply tells Cloudinary to apply all chained transformations, until a transformation component that includes this flag, on the last added overlay or underlay instead of applying them on the base image (it closes the layer, similar to a closing bracket).

For details on all available transformation flags, see the flag section of the Transformation Reference.

Secure HTTPS URLs

Cloudinary supports delivering media assets using HTTPS URLs. The process for creating HTTPS delivery URLs is identical to creating HTTP URLs, with only the URL protocol changing. When using one of Cloudinary's framework SDKs, you can generate HTTPS URLs by setting the secure parameter to true, either globally (e.g., in the CLOUDINARY_URL environment variable) or locally in each call. For example, delivering the sample image with HTTPS:

cl_image_tag("sample.jpg", :secure=>true)

cl_image_tag("sample.jpg", array("secure"=>true))

(new ImageTag('sample.jpg'));

CloudinaryImage("sample.jpg").image(secure=True)

cloudinary.image("sample.jpg", {secure: true})

cloudinary.url().secure(true).imageTag("sample.jpg");

cloudinary.imageTag('sample.jpg', {secure: true}).toHtml();

$.cloudinary.image("sample.jpg", {secure: true})

<Image publicId="sample.jpg" secure="true">

</Image>

<cld-image publicId="sample.jpg" secure="true">

</cld-image>

<cl-image public-id="sample.jpg" secure="true">

</cl-image>

cloudinary.Api.UrlImgUp.Secure(true).BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().secure(true).generate("sample.jpg");

cloudinary.image {
publicId("sample.jpg")
}.generate()

For more information on using HTTPS to deliver your media assets, see the article on Why isn't everyone using HTTPS and how to do it with Cloudinary.

Verbose vs non-verbose syntax

Some transformations with multiple options offer two alternative syntaxes for defining the option values:

• Verbose, unordered: Each option of the transformation (whether required or optional) is specified in the verbose format name_value and each option is separated by a colon (:).

  The options can be specified in any order, and you only need to include those that you want (or are required) to define.

  For example, the progressbar effect supports the type, color, and width parameters, but you can specify them in a different order: e_progressbar:width_5:type_frame:color_FF0000.

  You can also choose to specify only the options for which you don't want to use default values and default values will be applied for the others. For example: e_progressbar:width_5 will generate a progressbar with a width of 5 pixels, while applying the default values for type and frame.

• Non-verbose, ordered: Transformation options are specified only by values, and must be entered in the pre-defined option order for that transformation. All values from the syntax to the left of the value you want to supply must also be entered.

  For example, if you only need to change the default behavior of the second option, you must still specify the value to use for the first option: e_progressbar:bar:FF0000 applies the bar (default) type and a custom color, along with the default width of 10 pixels.

Transformations that support both verbose and non-verbose URL syntax are indicated as such in the Transformation Reference. SDKs always output the verbose syntax.

Named Transformations

A named transformation is a pre-defined set of transformation parameters that has been given a custom name for easy reference. Instead of applying each of the required transformations separately to an asset, you can apply a single named transformation to apply all the transformations defined for it. This makes it easy to:

• Reuse transformations on multiple assets
• Shorten complex transformation URLs
• Hide the details of a transformation in your delivery URL.
• Simplify the enabling/disabling of transformations in Strict Transformations mode.

You can set named transformations as transformation presets, which enables you to preview how assets from your Media Library will look with different named transformations applied.

Named transformations can include other named transformations, which allows you to define a chain of transformations to run on multiple assets more easily. To apply a named transformation to an asset, use the transformation parameter (t for URLs) with the name of an asset. For example t_instagram-auto-crop.

You can include user-defined variables in your named transformations, and then pass the value for the user-defined variable into the transformation from an external source. This enables creating a named transformation 'template' with a lot of flexibility. For example, you could define a complex named transformation that includes a text overlay as a named transformation, using a user-defined variable for the text string value. For a use-case example, see this Named transformation with a user-defined variable.

Creating named transformations

You can create a named transformations programmatically or using the Transformations UI in your Cloudinary console:

To create a named transformation programmatically, use the Transformations Admin API method. The following example defines a named transformation called small_profile_photo that uses automatic cropping to resize photos to the required size for a particular application's profile photos:

Cloudinary::Api.create_transformation('small_profile_photo',
  {:width => 100, :height => 150, :crop => :fill, :gravity=>:auto})

$api->create_transformation("small_profile_photo",
  ["width" => 100, "height" => 150, "crop" => "fill", "gravity" =>"auto"]);

$api->createTransformation("small_profile_photo",
  [resize(Resize::fill()->width(200)->height(300)->gravity(Gravity::autoGravity()]);

cloudinary.api.create_transformation("small_profile_photo",
  dict(width = 100, height = 150, crop = "fill", "gravity" = "auto"))

cloudinary.v2.api.create_transformation('small_profile_photo',
  { width: 100, height: 150, crop: 'fill', gravity: 'auto' },
  function(error, result) {console.log(result, error); });

api.createTransformation("small_profile_photo",
  new Transformation().width(150).height(100).crop("fill").gravity("auto").generate(),
  ObjectUtils.emptyMap());

var createTransformParams = new CreateTransformParams(){
  Name = "small_profile_photo",
  Transformation = new Transformation().Width(100).Height(150).Crop("fill").Gravity("auto")};
cloudinary.CreateTransform(createTransformParams);

curl \
  -d 'transformation=w_100,h_150,c_fill,g_auto' \
  -X POST \
  https://<API_KEY>:<API_SECRET>@api.cloudinary.com/v1_1/<CLOUD_NAME>/transformations/small_profile_photo

cld admin create_transformation "small_profile_photo" '{"width": 150, "height": 100, "crop": "fill", "gravity": "auto"}'

For more details and examples, see the Create Transformation method in the Admin API Reference.

To create a named transformation using the console, you have a few options:

1. Start with a cookbook recipe and refine it to your needs before saving it with your chosen name.
2. View a list of all your dynamic transformations (those you generated and delivered on-the-fly) and save one of those with your chosen name.
3. Create a new transformation from scratch using the transformation editor and save with your chosen name.

Once you've saved your named transformations, you can view a list of them on the Named Transformations page of the console. From here, you can edit, copy, enable/disable Strict Transformations or select to include a transformation as a preset in the Media Library Asset Management page.

Named transformation examples

Below are some examples of using the following named transformations that have been defined for the Cloudinary demo account:

• jpg_with_quality_30: Convert the image to a JPEG with 30% quality.
• crop_400x400: Crop the image to 400x400 with center gravity.
• fit_100x150: Fit the image into a 100x150 rectangle.

To create a version of the sample image based on the fit_100x150 transformation:

cl_image_tag("sample.jpg", :transformation=>["fit_100x150"])

cl_image_tag("sample.jpg", array("transformation"=>array("fit_100x150")))

(new ImageTag('sample.jpg'))
  ->namedTransformation(NamedTransformation::name('fit_100x150'));

CloudinaryImage("sample.jpg").image(transformation=["fit_100x150"])

cloudinary.image("sample.jpg", {transformation: ["fit_100x150"]})

cloudinary.url().transformation(new Transformation().named("fit_100x150")).imageTag("sample.jpg");

cloudinary.imageTag('sample.jpg', {transformation: ["fit_100x150"]}).toHtml();

$.cloudinary.image("sample.jpg", {transformation: ["fit_100x150"]})

<Image publicId="sample.jpg" >
  <Transformation transformation={["fit_100x150"]} />
</Image>

<cld-image publicId="sample.jpg" >
  <cld-transformation transformation={["fit_100x150"]} />
</cld-image>

<cl-image public-id="sample.jpg" >
  <cl-transformation transformation={{["fit_100x150"]}}>
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation().Named("fit_100x150")).BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setNamed("fit_100x150")).generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation().named("fit_100x150")).generate("sample.jpg");

cloudinary.image {
publicId("sample.jpg")
namedTransformation(NamedTransformation.name("fit_100x150"))}.generate()

To create a transformation that applies additional transformations to the jpg_with_quality_30 named transformation, such as fitting it to a 100 pixel width and a 50 pixel height:

cl_image_tag("sample.jpg", :transformation=>[
  {:transformation=>["jpg_with_quality_30"]},
  {:height=>50, :width=>100, :crop=>"fit"}
  ])

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("transformation"=>array("jpg_with_quality_30")),
  array("height"=>50, "width"=>100, "crop"=>"fit")
  )))

(new ImageTag('sample.jpg'))
  ->namedTransformation(NamedTransformation::name('jpg_with_quality_30'))
  ->resize(Resize::fit()->width(100)->height(50));

CloudinaryImage("sample.jpg").image(transformation=[
  {'transformation': ["jpg_with_quality_30"]},
  {'height': 50, 'width': 100, 'crop': "fit"}
  ])

cloudinary.image("sample.jpg", {transformation: [
  {transformation: ["jpg_with_quality_30"]},
  {height: 50, width: 100, crop: "fit"}
  ]})

cloudinary.url().transformation(new Transformation()
  .named("jpg_with_quality_30").chain()
  .height(50).width(100).crop("fit")).imageTag("sample.jpg");

cloudinary.imageTag('sample.jpg', {transformation: [
  {transformation: ["jpg_with_quality_30"]},
  {height: 50, width: 100, crop: "fit"}
  ]}).toHtml();

$.cloudinary.image("sample.jpg", {transformation: [
  {transformation: ["jpg_with_quality_30"]},
  {height: 50, width: 100, crop: "fit"}
  ]})

<Image publicId="sample.jpg" >
  <Transformation transformation={["jpg_with_quality_30"]} />
  <Transformation height="50" width="100" crop="fit" />
</Image>

<cld-image publicId="sample.jpg" >
  <cld-transformation transformation={["jpg_with_quality_30"]} />
  <cld-transformation height="50" width="100" crop="fit" />
</cld-image>

<cl-image public-id="sample.jpg" >
  <cl-transformation transformation={{["jpg_with_quality_30"]}}>
  </cl-transformation>
  <cl-transformation height="50" width="100" crop="fit">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Named("jpg_with_quality_30").Chain()
  .Height(50).Width(100).Crop("fit")).BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setNamed("jpg_with_quality_30").chain()
  .setHeight(50).setWidth(100).setCrop("fit")).generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .named("jpg_with_quality_30").chain()
  .height(50).width(100).crop("fit")).generate("sample.jpg");

cloudinary.image {
publicId("sample.jpg")
namedTransformation(NamedTransformation.name("jpg_with_quality_30"))
resize(Resize.fit() {
width(100)
height(50)
})}.generate()

You can also chain multiple named transformations. For example, to chain the three named transformations we defined above:

cl_image_tag("sample.jpg", :transformation=>[
  {:transformation=>["jpg_with_quality_30"]},
  {:transformation=>["crop_400x400"]},
  {:transformation=>["fit_100x150"]}
  ])

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("transformation"=>array("jpg_with_quality_30")),
  array("transformation"=>array("crop_400x400")),
  array("transformation"=>array("fit_100x150"))
  )))

(new ImageTag('sample.jpg'))
  ->namedTransformation(NamedTransformation::name('jpg_with_quality_30'))
  ->namedTransformation(NamedTransformation::name('crop_400x400'))
  ->namedTransformation(NamedTransformation::name('fit_100x150'));

CloudinaryImage("sample.jpg").image(transformation=[
  {'transformation': ["jpg_with_quality_30"]},
  {'transformation': ["crop_400x400"]},
  {'transformation': ["fit_100x150"]}
  ])

cloudinary.image("sample.jpg", {transformation: [
  {transformation: ["jpg_with_quality_30"]},
  {transformation: ["crop_400x400"]},
  {transformation: ["fit_100x150"]}
  ]})

cloudinary.url().transformation(new Transformation()
  .named("jpg_with_quality_30").chain()
  .named("crop_400x400").chain()
  .named("fit_100x150")).imageTag("sample.jpg");

cloudinary.imageTag('sample.jpg', {transformation: [
  {transformation: ["jpg_with_quality_30"]},
  {transformation: ["crop_400x400"]},
  {transformation: ["fit_100x150"]}
  ]}).toHtml();

$.cloudinary.image("sample.jpg", {transformation: [
  {transformation: ["jpg_with_quality_30"]},
  {transformation: ["crop_400x400"]},
  {transformation: ["fit_100x150"]}
  ]})

<Image publicId="sample.jpg" >
  <Transformation transformation={["jpg_with_quality_30"]} />
  <Transformation transformation={["crop_400x400"]} />
  <Transformation transformation={["fit_100x150"]} />
</Image>

<cld-image publicId="sample.jpg" >
  <cld-transformation transformation={["jpg_with_quality_30"]} />
  <cld-transformation transformation={["crop_400x400"]} />
  <cld-transformation transformation={["fit_100x150"]} />
</cld-image>

<cl-image public-id="sample.jpg" >
  <cl-transformation transformation={{["jpg_with_quality_30"]}}>
  </cl-transformation>
  <cl-transformation transformation={{["crop_400x400"]}}>
  </cl-transformation>
  <cl-transformation transformation={{["fit_100x150"]}}>
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Named("jpg_with_quality_30").Chain()
  .Named("crop_400x400").Chain()
  .Named("fit_100x150")).BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setNamed("jpg_with_quality_30").chain()
  .setNamed("crop_400x400").chain()
  .setNamed("fit_100x150")).generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .named("jpg_with_quality_30").chain()
  .named("crop_400x400").chain()
  .named("fit_100x150")).generate("sample.jpg");

cloudinary.image {
publicId("sample.jpg")
namedTransformation(NamedTransformation.name("jpg_with_quality_30"))
namedTransformation(NamedTransformation.name("crop_400x400"))
namedTransformation(NamedTransformation.name("fit_100x150"))}.generate()

Chaining transformations can create long URLs, so instead you could define a named transformation that includes a chain of other transformations, including other named transformations. For example, the named transformation demo_combined has been defined for the Cloudinary demo account and is a composite of the three named transformations described above: jpg_with_quality_30, crop_400x400 and fit_100x150. It is now simple to specify the demo_combined named transformation instead:

cl_image_tag("sample.jpg", :transformation=>["demo_combined"])

cl_image_tag("sample.jpg", array("transformation"=>array("demo_combined")))

(new ImageTag('sample.jpg'))
  ->namedTransformation(NamedTransformation::name('demo_combined'));

CloudinaryImage("sample.jpg").image(transformation=["demo_combined"])

cloudinary.image("sample.jpg", {transformation: ["demo_combined"]})

cloudinary.url().transformation(new Transformation().named("demo_combined")).imageTag("sample.jpg");

cloudinary.imageTag('sample.jpg', {transformation: ["demo_combined"]}).toHtml();

$.cloudinary.image("sample.jpg", {transformation: ["demo_combined"]})

<Image publicId="sample.jpg" >
  <Transformation transformation={["demo_combined"]} />
</Image>

<cld-image publicId="sample.jpg" >
  <cld-transformation transformation={["demo_combined"]} />
</cld-image>

<cl-image public-id="sample.jpg" >
  <cl-transformation transformation={{["demo_combined"]}}>
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation().Named("demo_combined")).BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setNamed("demo_combined")).generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation().named("demo_combined")).generate("sample.jpg");

cloudinary.image {
publicId("sample.jpg")
namedTransformation(NamedTransformation.name("demo_combined"))}.generate()

Chained Transformations

Cloudinary supports powerful image transformations that are applied on the fly using dynamic URLs, and you can also combine multiple transformations together as part of a single delivery request, e.g., crop an image and then add a border. In certain cases you may want to perform additional transformations on the result of another transformation request. In order to do that, you can chain the transformations together.

In general, it's best practice to chain each transformation action in your URL as a separate component in the chain.

To support chained transformations, Cloudinary's transformation URLs allow you to include multiple transformation components, each separated by a slash (/), where each of the transformation components is executed on the result of the previous one. Cloudinary's SDKs can apply multiple transformation components by specifying the transformation parameter and setting it to an array of transformation maps.

Examples with the uploaded jpg image named flower:

1. Two chained transformations: fill to a 150px square and then round to a circle:

   URLRubyPHP v1PHP v2PythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinAll

   URL:

   Copy to clipboard

   https://res.cloudinary.com/demo/image/upload/ar_1.0,c_fill,w_150/r_max/flower.jpg

   Ruby:

   Copy to clipboard

   cl_image_tag("flower.jpg", :transformation=>[
     {:aspect_ratio=>"1.0", :width=>150, :crop=>"fill"},
     {:radius=>"max"}
     ])

   PHP v1:

   Copy to clipboard

   cl_image_tag("flower.jpg", array("transformation"=>array(
     array("aspect_ratio"=>"1.0", "width"=>150, "crop"=>"fill"),
     array("radius"=>"max")
     )))

   PHP v2:

   Copy to clipboard

   (new ImageTag('flower.jpg'))
     ->resize(Resize::fill()->width(150)->aspectRatio(1.0))
     ->roundCorners(RoundCorners::max());

   Python:

   Copy to clipboard

   CloudinaryImage("flower.jpg").image(transformation=[
     {'aspect_ratio': "1.0", 'width': 150, 'crop': "fill"},
     {'radius': "max"}
     ])

   Node.js:

   Copy to clipboard

   cloudinary.image("flower.jpg", {transformation: [
     {aspect_ratio: "1.0", width: 150, crop: "fill"},
     {radius: "max"}
     ]})

   Java:

   Copy to clipboard

   cloudinary.url().transformation(new Transformation()
     .aspectRatio("1.0").width(150).crop("fill").chain()
     .radius("max")).imageTag("flower.jpg");

   JS:

   Copy to clipboard

   cloudinary.imageTag('flower.jpg', {transformation: [
     {aspectRatio: "1.0", width: 150, crop: "fill"},
     {radius: "max"}
     ]}).toHtml();

   jQuery:

   Copy to clipboard

   $.cloudinary.image("flower.jpg", {transformation: [
     {aspect_ratio: "1.0", width: 150, crop: "fill"},
     {radius: "max"}
     ]})

   React:

   Copy to clipboard

   <Image publicId="flower.jpg" >
     <Transformation aspectRatio="1.0" width="150" crop="fill" />
     <Transformation radius="max" />
   </Image>

   Vue.js:

   Copy to clipboard

   <cld-image publicId="flower.jpg" >
     <cld-transformation aspectRatio="1.0" width="150" crop="fill" />
     <cld-transformation radius="max" />
   </cld-image>

   Angular:

   Copy to clipboard

   <cl-image public-id="flower.jpg" >
     <cl-transformation aspect-ratio="1.0" width="150" crop="fill">
     </cl-transformation>
     <cl-transformation radius="max">
     </cl-transformation>
   </cl-image>

   .NET:

   Copy to clipboard

   cloudinary.Api.UrlImgUp.Transform(new Transformation()
     .AspectRatio("1.0").Width(150).Crop("fill").Chain()
     .Radius("max")).BuildImageTag("flower.jpg")

   iOS:

   Copy to clipboard

   imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
     .setAspectRatio("1.0").setWidth(150).setCrop("fill").chain()
     .setRadius("max")).generate("flower.jpg")!, cloudinary: cloudinary)

   Android:

   Copy to clipboard

   MediaManager.get().url().transformation(new Transformation()
     .aspectRatio("1.0").width(150).crop("fill").chain()
     .radius("max")).generate("flower.jpg");

   Kotlin:

   Copy to clipboard

   cloudinary.image {
   publicId("flower.jpg")
   resize(Resize.fill() {
   width(150)
   aspectRatio(1.0f)
   })
   roundCorners(RoundCorners.max())}.generate()

   

2. Four chained transformations: crop to 150x100 with a custom offset from the center, fill crop to 130x100, rotate by 20 degrees, and then scale down to 80%:

   URLRubyPHP v1PHP v2PythonNode.jsJavaJSjQueryReactVue.jsAngular.NETiOSAndroidKotlinAll

   URL:

   Copy to clipboard

   https://res.cloudinary.com/demo/image/upload/c_crop,h_100,w_150,x_380,y_250/c_fill,h_100,w_130/a_20/c_scale,w_0.8/flower.jpg

   Ruby:

   Copy to clipboard

   cl_image_tag("flower.jpg", :transformation=>[
     {:height=>100, :width=>150, :x=>380, :y=>250, :crop=>"crop"},
     {:height=>100, :width=>130, :crop=>"fill"},
     {:angle=>20},
     {:width=>0.8, :crop=>"scale"}
     ])

   PHP v1:

   Copy to clipboard

   cl_image_tag("flower.jpg", array("transformation"=>array(
     array("height"=>100, "width"=>150, "x"=>380, "y"=>250, "crop"=>"crop"),
     array("height"=>100, "width"=>130, "crop"=>"fill"),
     array("angle"=>20),
     array("width"=>"0.8", "crop"=>"scale")
     )))

   PHP v2:

   Copy to clipboard

   (new ImageTag('flower.jpg'))
     ->resize(Resize::crop()->width(150)->height(100)->x(380)->y(250))
     ->resize(Resize::fill()->width(130)->height(100))
     ->rotate(Rotate::byAngle(20))
     ->resize(Resize::scale()->width(0.8));

   Python:

   Copy to clipboard

   CloudinaryImage("flower.jpg").image(transformation=[
     {'height': 100, 'width': 150, 'x': 380, 'y': 250, 'crop': "crop"},
     {'height': 100, 'width': 130, 'crop': "fill"},
     {'angle': 20},
     {'width': "0.8", 'crop': "scale"}
     ])

   Node.js:

   Copy to clipboard

   cloudinary.image("flower.jpg", {transformation: [
     {height: 100, width: 150, x: 380, y: 250, crop: "crop"},
     {height: 100, width: 130, crop: "fill"},
     {angle: 20},
     {width: "0.8", crop: "scale"}
     ]})

   Java:

   Copy to clipboard

   cloudinary.url().transformation(new Transformation()
     .height(100).width(150).x(380).y(250).crop("crop").chain()
     .height(100).width(130).crop("fill").chain()
     .angle(20).chain()
     .width(0.8).crop("scale")).imageTag("flower.jpg");

   JS:

   Copy to clipboard

   cloudinary.imageTag('flower.jpg', {transformation: [
     {height: 100, width: 150, x: 380, y: 250, crop: "crop"},
     {height: 100, width: 130, crop: "fill"},
     {angle: 20},
     {width: "0.8", crop: "scale"}
     ]}).toHtml();

   jQuery:

   Copy to clipboard

   $.cloudinary.image("flower.jpg", {transformation: [
     {height: 100, width: 150, x: 380, y: 250, crop: "crop"},
     {height: 100, width: 130, crop: "fill"},
     {angle: 20},
     {width: "0.8", crop: "scale"}
     ]})

   React:

   Copy to clipboard

   <Image publicId="flower.jpg" >
     <Transformation height="100" width="150" x="380" y="250" crop="crop" />
     <Transformation height="100" width="130" crop="fill" />
     <Transformation angle="20" />
     <Transformation width="0.8" crop="scale" />
   </Image>

   Vue.js:

   Copy to clipboard

   <cld-image publicId="flower.jpg" >
     <cld-transformation height="100" width="150" x="380" y="250" crop="crop" />
     <cld-transformation height="100" width="130" crop="fill" />
     <cld-transformation angle="20" />
     <cld-transformation width="0.8" crop="scale" />
   </cld-image>

   Angular:

   Copy to clipboard

   <cl-image public-id="flower.jpg" >
     <cl-transformation height="100" width="150" x="380" y="250" crop="crop">
     </cl-transformation>
     <cl-transformation height="100" width="130" crop="fill">
     </cl-transformation>
     <cl-transformation angle="20">
     </cl-transformation>
     <cl-transformation width="0.8" crop="scale">
     </cl-transformation>
   </cl-image>

   .NET:

   Copy to clipboard

   cloudinary.Api.UrlImgUp.Transform(new Transformation()
     .Height(100).Width(150).X(380).Y(250).Crop("crop").Chain()
     .Height(100).Width(130).Crop("fill").Chain()
     .Angle(20).Chain()
     .Width(0.8).Crop("scale")).BuildImageTag("flower.jpg")

   iOS:

   Copy to clipboard

   imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
     .setHeight(100).setWidth(150).setX(380).setY(250).setCrop("crop").chain()
     .setHeight(100).setWidth(130).setCrop("fill").chain()
     .setAngle(20).chain()
     .setWidth(0.8).setCrop("scale")).generate("flower.jpg")!, cloudinary: cloudinary)

   Android:

   Copy to clipboard

   MediaManager.get().url().transformation(new Transformation()
     .height(100).width(150).x(380).y(250).crop("crop").chain()
     .height(100).width(130).crop("fill").chain()
     .angle(20).chain()
     .width(0.8).crop("scale")).generate("flower.jpg");

   Kotlin:

   Copy to clipboard

   cloudinary.image {
   publicId("flower.jpg")
   resize(Resize.crop() {
   width(150)
   height(100)
   x(380)
   y(250)
   })
   resize(Resize.fill() {
   width(130)
   height(100)
   })
   rotate(Rotate.byAngle(20))
   resize(Resize.scale() {
   width(0.8f)
   })}.generate()

   

Embedding images in web pages

Accessing uploaded images or their derived transformations is done using simple URLs that you can use as the 'src' of the 'img' tags in your HTML code or Javascript functions. URLs for accessing resources contain the resource kind, the Public ID of the resource, and optional version and transformation parameters. You can also use Cloudinary’s web framework SDKs to aid you in adding images to your web application and simplify the creation of transformation URLs and embedding HTML image tags. Cloudinary offers two main helper methods in this regard:

The Cloudinary URL helper method (e.g., cloudinary_url in Ruby on Rails) automatically generates the image source URL for use as the 'src' of the 'img' tags in your HTML code or Javascript functions. For example, using the URL helper method to return the URL of the sample image, scaled to a width of 300 pixels and a height of 100 pixels:

cloudinary_url("sample.jpg", :height=>100, :width=>300, :crop=>"scale")

Cloudinary::cloudinary_url("sample.jpg", array("height"=>100, "width"=>300, "crop"=>"scale"))

(new Media('sample.jpg'))
  ->resize(Resize::scale()->width(300)->height(100));

cloudinary.utils.cloudinary_url("sample.jpg", height=100, width=300, crop="scale")

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

cloudinary.url().transformation(new Transformation().height(100).width(300).crop("scale")).generate("sample.jpg")

cloudinary.url('sample.jpg', {height: 100, width: 300, crop: "scale"});

$.cloudinary.url("sample.jpg", {height: 100, width: 300, crop: "scale"})

cloudinary.url('sample.jpg', {height: 100, width: 300, crop: "scale"});

cloudinary.url('sample.jpg', {height: 100, width: 300, crop: "scale"});

cloudinary.url('sample.jpg', {height: 100, width: 300, crop: "scale"});

cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(100).Width(300).Crop("scale")).BuildUrl("sample.jpg")

cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(100).setWidth(300).setCrop("scale")).generate("sample.jpg")

MediaManager.get().url().transformation(new Transformation().height(100).width(300).crop("scale")).generate("sample.jpg");

cloudinary.media {
publicId("sample.jpg")
resize(Resize.scale() {
width(300)
height(100)
})}.generate()

The Cloudinary Image Tag helper method (e.g., cl_image_tag in Ruby on Rails) automatically generates an HTML image tag including the image source URL. For example, using the Image Tag helper method to create an HTML image tag for the sample image, scaled to a width of 300 pixels and a height of 100 pixels:

cl_image_tag("sample.jpg", :height=>100, :width=>300, :crop=>"scale")

cl_image_tag("sample.jpg", array("height"=>100, "width"=>300, "crop"=>"scale"))

(new ImageTag('sample.jpg'))
  ->resize(Resize::scale()->width(300)->height(100));

CloudinaryImage("sample.jpg").image(height=100, width=300, crop="scale")

cloudinary.image("sample.jpg", {height: 100, width: 300, crop: "scale"})

cloudinary.url().transformation(new Transformation().height(100).width(300).crop("scale")).imageTag("sample.jpg");

cloudinary.imageTag('sample.jpg', {height: 100, width: 300, crop: "scale"}).toHtml();

$.cloudinary.image("sample.jpg", {height: 100, width: 300, crop: "scale"})

<Image publicId="sample.jpg" >
  <Transformation height="100" width="300" crop="scale" />
</Image>

<cld-image publicId="sample.jpg" >
  <cld-transformation height="100" width="300" crop="scale" />
</cld-image>

<cl-image public-id="sample.jpg" >
  <cl-transformation height="100" width="300" crop="scale">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(100).Width(300).Crop("scale")).BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(100).setWidth(300).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation().height(100).width(300).crop("scale")).generate("sample.jpg");

cloudinary.image {
publicId("sample.jpg")
resize(Resize.scale() {
width(300)
height(100)
})}.generate()

The Cloudinary Image Tag helper method allows you to not only specify any Cloudinary transformations parameters, but also to specify regular HTML image tag attributes (e.g., alt, title, width, height). For example, using the Image Tag helper method to create an HTML image tag for the sample image, with the 'alt' attribute set to "A sample photo" and the 'className' attribute set to "Samples":

cl_image_tag("sample.jpg", :alt=>"A sample photo", :className=>"Samples")

cl_image_tag("sample.jpg", ["alt"=>"A sample photo", "className"=>"Samples"])

ImageTag::fromParams("sample.jpg", ["alt"=>"A sample photo", "className"=>"Samples"])

CloudinaryImage("sample.jpg").image(alt="A sample photo", className="Samples")

cloudinary.image("sample.jpg", {alt: "A sample photo", className: "Samples"})

cloudinary.url().imageTag("sample.jpg", ObjectUtils.asMap("alt","A sample photo","className","Samples"));

cl.imageTag('sample.jpg', {alt: "A sample photo", className: "Samples"}).toHtml();

$.cloudinary.image("sample.jpg", {alt: "A sample photo", className: "Samples"})

<Image publicId="sample.jpg" alt="A sample photo" className="Samples">
</Image>

<CLDImage publicId="sample.jpg" alt="A sample photo" className="Samples">
</CLDImage>

<cl-image public-id="sample.jpg" alt="A sample photo" className="Samples">
</cl-image>

@Model.Cloudinary.Api.UrlImgUp.BuildImageTag("sample.jpg", new CloudinaryDotNet.StringDictionary("alt=A sample photo", "className=Samples"));

cl_image_tag("flower.jpg", 
  :transformation=>[{:raw_transformation=> "o_90,w_1000,c_fill,g_south_east/l_my_image,fl_relative,w_1.0"}])

cl_image_tag("sample.jpg", 
  ["raw_transformation" => "w_400,c_pad"]);

CloudinaryImage("sample.jpg").image(
  transformation=[{"raw_transformation":"w_400,c_pad"}])

cloudinary.image("sample.jpg", { transformation: { raw_transformation: "w_400,c_pad" }})

<cl:image src="sample.jpg" raw_transformation="w_100,h_150,c_fill"/>

// or
cloudinary.url()
  .transformation(new Transformation().rawTransformation("w_100,h_150,c_fill"))
  .imageTag("sample.jpg");

cl.imageTag("sample.jpg", { raw_transformation: "w_400,c_pad" }}).toHtml();

$.cloudinary.imageTag("sample.jpg", { raw_transformation: "w_400,c_pad" }}).toHtml();

<Image publicId="mypic">
  <Transformation rawTransformation="h_150,w_150,c_fill,e_sepia,r_20" />
</Image>

<CLDImage publicId="sample.jpg" rawTransformation="w_150,h_150,c_fill">
</CLDImage>

<cl-image 
  public-id="mypic" 
  class="thumbnail inline" 
  format="jpg"
  raw-transformation="w_150,h_150,c_fill">
</cl-image>

@Model.Cloudinary.Api.UrlImgUp.Transform(
    new Transformation().RawTransformation("w_100,h_150,c_fill")).BuildImageTag("sample.jpg");

For more information on these SDK helper methods, see the transformation documentation in the relevant SDK guide.

Image format support

Images can be uploaded to Cloudinary in various formats (input formats), and you can easily convert these images to other formats for displaying in your web site or application (output formats). Examples of situations where you might want to change the delivered image format:

• Delivering JPEGs for photos that you want to load quickly (or WebP if your users are on a Chrome browser or on a mobile app you control).
• Delivering a GIF if the image contains a drawing with only a few colors.
• Delivering a PNG (24 bit) for high quality illustrations with a transparent background.
• Delivering an image where the original format is not supported for delivery by the browser. For example, you could deliver a Photoshop (.psd) image as a JPG.

Delivering in a different format

You can convert and deliver images in a different format by specifying the requested format as the file extension of the delivery URL. When using an SDK to build the URL, you can either append the extension of the new format to the asset's public ID or use the format parameter.

For example, to display a GIF version of the uploaded sample JPEG file:

cl_image_tag("sample.gif")

cl_image_tag("sample.gif")