Image transformations

Whether your web or mobile application delivers your organization's own carefully selected images, images uploaded by your end users (UGC), or both, you probably need to adjust the originals to fit the graphic design of your website or mobile application.

Cloudinary's dynamic URL transformations enable you to achieve those goals programmatically and on the fly without the need for graphic designers and fancy editing tools.

You can build these URLs manually in your code, or take advantage of Cloudinary's SDKs, which enable you to write your transformation code using intuitive syntax designed for your preferred programming language or framework and let the SDK automatically build these URLs for you.

Here are just a few examples of some popular use cases that you can accomplish on the fly by combining Cloudinary transformations. 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

See also: Video Transformations

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. Your transformed images are then delivered to your users through a fast CDN with optimized caching.

With image transformations, 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 help your image achieve the desired impact.

Quick example

Below you can see the transformation URL and corresponding SDK code for generating an image with several transformation parameters applied. This transformation generates and delivers an image that is initially cropped to a 400x400 image that automatically focusses on the face, then rounded to a circle and finally, scaled down to a width of 200 pixels.

cl_image_tag("lady.jpg", :transformation=>[
  {:gravity=>"face", :height=>400, :width=>400, :crop=>"crop"},
  {:radius=>"max"},
  {: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));

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

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");

// This code example is not currently available.

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"}
  ]})

// This code example is not currently available.

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

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

// This code example is not currently available.

<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");

// This code example is not currently available.

Original

 

 

 

Transformed image

Transformation URL syntax

Your Cloudinary media assets are accessed 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 defined when uploading the asset to Cloudinary, or automatically assigned by Cloudinary (see Uploading Assets for more details on the various options for specifying the public ID).

Generating transformation URLs with Cloudinary SDKs

Cloudinary's SDKs automatically build the transformation URL for you. They allow you to continue working in your preferred developer framework and also 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:

In the most general case of simply delivering images that were uploaded to your Cloudinary product environment without any transformations, the delivery URL will be in the format:

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

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

cl_image_tag("sample.jpg")

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

cl_image_tag("sample.jpg")

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

cloudinary.image("sample.jpg")

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

new CloudinaryImage("sample.jpg");

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

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

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg");

<Image publicId="sample.jpg" >

</Image>

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

</cld-image>

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg");

<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().transformation(new Transformation().generate("sample.jpg");

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

The following shows an example of delivering the same image with transformation parameters, where the image is scaled and cropped to fill a 250x300 pixel size and a blurring effect is applied:

cl_image_tag("sample.jpg", :transformation=>[
  {:height=>300, :width=>250, :crop=>"fill"},
  {:effect=>"blur:300"}
  ])

(new ImageTag('sample.jpg'))
  ->resize(Resize::fill()->width(250)
->height(300))
  ->effect(Effect::blur()->strength(300));

cl_image_tag("sample.jpg", array("transformation"=>array(
  array("height"=>300, "width"=>250, "crop"=>"fill"),
  array("effect"=>"blur:300")
  )))

CloudinaryImage("sample.jpg").image(transformation=[
  {'height': 300, 'width': 250, 'crop': "fill"},
  {'effect': "blur:300"}
  ])

cloudinary.image("sample.jpg", {transformation: [
  {height: 300, width: 250, crop: "fill"},
  {effect: "blur:300"}
  ]})

cloudinary.url().transformation(new Transformation()
  .height(300).width(250).crop("fill").chain()
  .effect("blur:300")).imageTag("sample.jpg");

new CloudinaryImage("sample.jpg")
  .resize(fill().width(250).height(300))
  .effect(blur().strength(300));

cloudinary.imageTag('sample.jpg', {transformation: [
  {height: 300, width: 250, crop: "fill"},
  {effect: "blur:300"}
  ]}).toHtml();

$.cloudinary.image("sample.jpg", {transformation: [
  {height: 300, width: 250, crop: "fill"},
  {effect: "blur:300"}
  ]})

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg")
  .resize(fill().width(250).height(300))
  .effect(blur().strength(300));

<Image publicId="sample.jpg" >
  <Transformation height="300" width="250" crop="fill" />
  <Transformation effect="blur:300" />
</Image>

<cld-image public-id="sample.jpg" >
  <cld-transformation height="300" width="250" crop="fill" />
  <cld-transformation effect="blur:300" />
</cld-image>

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg")
  .resize(fill().width(250).height(300))
  .effect(blur().strength(300));

<cl-image public-id="sample.jpg" >
  <cl-transformation height="300" width="250" crop="fill">
  </cl-transformation>
  <cl-transformation effect="blur:300">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Height(300).Width(250).Crop("fill").Chain()
  .Effect("blur:300")).BuildImageTag("sample.jpg")

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setHeight(300).setWidth(250).setCrop("fill").chain()
  .setEffect("blur:300")).generate("sample.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .height(300).width(250).crop("fill").chain()
  .effect("blur:300")).generate("sample.jpg");

cloudinary.image {
  publicId("sample.jpg")
   resize(Resize.fill() { width(250)
 height(300) })
   effect(Effect.blur() { strength(300) }) 
}.generate()

Transformation URL tips

• For customers with a Custom Domain Name (CNAME) - available for Cloudinary's Advanced plan and above - the basic image delivery URL becomes: https://<custom domain name>/image/upload....
• You can convert and deliver your image in other supported image formats by simply changing the image format file extension. For details, see Delivering in a different format.

• You can append an SEO-friendly suffix to your URL by replacing the image/upload element of the URL with images and then appending the desired suffix with a slash (/) after the public ID and before the extension. For example, if you have a cooking image with a random public ID like: abc1def2, you can deliver your image as:

  https://res.cloudinary.com/<cloud_name>/images/upload/a12345/cooking.jpg

  For more details, see Dynamic SEO suffixes.

• You can also use shortcut URLs when specifically delivering image files using the default upload type. With Cloudinary's Root Path URL feature, the <asset_type> and <delivery_type> elements 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 with both images and videos.

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 Cloudinary.

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:

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}
  ])

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

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

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");

// This code example is not currently available.

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}
  ]})

// This code example is not currently available.

<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 public-id="actor.png" >
  <cld-transformation aspect-ratio="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>

// This code example is not currently available.

<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");

// This code example is not currently available.

In this transformation:

• 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.

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, overlays, metadata and color profiles, as well as PDF and text behaviors, just to name a few.

For example:

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

• fl_relative modifies the way overlay resize parameters are evaluated. This flag can only be used in conjunction with the overlay (l_) 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 asset instead of applying them on the base asset. This flag acts as an indicator to close the layer section of the transformation, similar to a closing bracket. Placement definitions for how the layer should be applied, such as gravity and offsets are also defined in the component with this flag.

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

Generating secure HTTPS URLs using SDKs

For backward compatibility reasons, many of Cloudinary's earlier SDK major versions generate http URLs by default. When using one of these SDKs, you can instruct the SDK to generate https URLs by setting the secure parameter to true, either globally as part of your SDK configuration, or locally in each transformation operation. For example, delivering the sample image with HTTPS:

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

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

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

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

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

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

new CloudinaryImage("sample.jpg");

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

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

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg");

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

</Image>

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

</cld-image>

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg");

<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().transformation(new Transformation().secure(true).generate("sample.jpg");

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

Verbose vs non-verbose syntax

Some transformation parameters 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 (:) or semi-colon (;) depending on the transformation.

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

  With this syntax, 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.

• 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.

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

Verbose vs non-verbose example

The theme effect supports the color and photosensitivity options, but you can specify them in a different order using verbose syntax. For example:

e_theme:photosensitivity_110:color_black

However, when using non-verbose syntax, you must specify the parameters in order. Therefore, even if you only want to change the default behavior of the photosensitivity (last) option, you must still specify the value to use for the color (first) option:

e_theme:black:110

Chained Transformations

Cloudinary supports powerful transformations that are applied on the fly using dynamic URLs. You can combine multiple transformation actions together as part of a single delivery request, e.g., crop an image and then add a border to it.

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:

   URLRubyPHPPythonNode.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 (cloudinary 1.x):

   Copy to clipboard

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

   PHP (cloudinary_php 2.x):

   Copy to clipboard

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

   cloudinary_php 2.x cloudinary_php 1.x (legacy)

   PHP (cloudinary_php 1.x (legacy)):

   Copy to clipboard

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

   cloudinary_php 2.x cloudinary_php 1.x (legacy)

   Python (cloudinary 1.x):

   Copy to clipboard

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

   Node.js (cloudinary 1.x):

   Copy to clipboard

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

   Java (cloudinary 1.x):

   Copy to clipboard

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

   JS (@cloudinary/url-gen 1.x):

   Copy to clipboard

   // This code example is not currently available.

   @cloudinary/url-gen 1.x cloudinary-core 2.x (legacy)

   JS (cloudinary-core 2.x (legacy)):

   Copy to clipboard

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

   @cloudinary/url-gen 1.x cloudinary-core 2.x (legacy)

   jQuery (cloudinary-jquery 2.x):

   Copy to clipboard

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

   React (@cloudinary/react 1.x):

   Copy to clipboard

   // This code example is not currently available.

   @cloudinary/react 1.x cloudinary-react 1.x

   React (cloudinary-react 1.x):

   Copy to clipboard

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

   @cloudinary/react 1.x cloudinary-react 1.x

   Vue.js (cloudinary-vue 1.x):

   Copy to clipboard

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

   Angular (@cloudinary/ng 1.x):

   Copy to clipboard

   // This code example is not currently available.

   @cloudinary/ng 1.x @cloudinary/angular-5.x 1.x (legacy)

   Angular (@cloudinary/angular-5.x 1.x (legacy)):

   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>

   @cloudinary/ng 1.x @cloudinary/angular-5.x 1.x (legacy)

   .NET (CloudinaryDotNet 1.x):

   Copy to clipboard

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

   iOS (cloudinary 3.x):

   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 (cloudinary-android 1.x):

   Copy to clipboard

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

   Kotlin (kotlin-url-gen 1.x):

   Copy to clipboard

   // This code example is not currently available.

   

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%:

   URLRubyPHPPythonNode.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 (cloudinary 1.x):

   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 (cloudinary_php 2.x):

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

   cloudinary_php 2.x cloudinary_php 1.x (legacy)

   PHP (cloudinary_php 1.x (legacy)):

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

   cloudinary_php 2.x cloudinary_php 1.x (legacy)

   Python (cloudinary 1.x):

   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 (cloudinary 1.x):

   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 (cloudinary 1.x):

   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 (@cloudinary/url-gen 1.x):

   Copy to clipboard

   new CloudinaryImage("flower.jpg")
     .resize(crop().width(150).height(100).x(380).y(250))
     .resize(fill().width(130).height(100))
     .rotate(byAngle(20))
     .resize(scale().width(0.8));

   @cloudinary/url-gen 1.x cloudinary-core 2.x (legacy)

   JS (cloudinary-core 2.x (legacy)):

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

   @cloudinary/url-gen 1.x cloudinary-core 2.x (legacy)

   jQuery (cloudinary-jquery 2.x):

   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 (@cloudinary/react 1.x):

   Copy to clipboard

   //React SDK transformations are created using @cloudinary/url-gen.
   new CloudinaryImage("flower.jpg")
     .resize(crop().width(150).height(100).x(380).y(250))
     .resize(fill().width(130).height(100))
     .rotate(byAngle(20))
     .resize(scale().width(0.8));

   @cloudinary/react 1.x cloudinary-react 1.x

   React (cloudinary-react 1.x):

   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>

   @cloudinary/react 1.x cloudinary-react 1.x

   Vue.js (cloudinary-vue 1.x):

   Copy to clipboard

   <cld-image public-id="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 (@cloudinary/ng 1.x):

   Copy to clipboard

   //Angular SDK transformations are created using @cloudinary/url-gen.
   new CloudinaryImage("flower.jpg")
     .resize(crop().width(150).height(100).x(380).y(250))
     .resize(fill().width(130).height(100))
     .rotate(byAngle(20))
     .resize(scale().width(0.8));

   @cloudinary/ng 1.x @cloudinary/angular-5.x 1.x (legacy)

   Angular (@cloudinary/angular-5.x 1.x (legacy)):

   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>

   @cloudinary/ng 1.x @cloudinary/angular-5.x 1.x (legacy)

   .NET (CloudinaryDotNet 1.x):

   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 (cloudinary 3.x):

   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 (cloudinary-android 1.x):

   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 (kotlin-url-gen 1.x):

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

   

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.

Named transformations can include other named transformations, which allows you to define a chain of transformations to run on multiple assets more easily.

You can create and manage named transformations via the API or in the console UI using the Transformation Editor or the new Transformation Builder (Beta).

Once the named transformation has been defined, you can transform an asset with the transformation parameter (t for URLs) and the name of your named transformation. 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.

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

For more details, see user-defined variables. For a use-case example demonstrating named transformations with user-defined variables, see Named transformation with a user-defined variable.

Creating named transformations

You can create a named transformation 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_thumbnail that uses automatic cropping to resize assets to the required size for a particular application's thumbnail display:

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

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

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

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

cloudinary.v2.api
.create_transformation('small_profile_thumbnail',
  { width: 100, height: 150, crop: 'fill', gravity: 'auto' })
.then(result=>console.log(result));

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

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

resp, err := cld.Admin.CreateTransformation(ctx, admin.CreateTransformationParams{
        Name:         "small_profile_thumbnail",
        Transformation: "c_fill,g_auto,h_150,w_100"})

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_thumbnail

cld admin create_transformation "small_profile_thumbnail" '{"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 programmatically: Open the Transformations page, accessible from the Console Product Navigation menu.

From here, there are a few ways to create a named transformation:

1. Start with a cookbook recipe as a template 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 or Transformation Builder (Beta) 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, or enable/disable Strict Transformations.

You can also select to include a transformation as a preset in the Media Library Asset Management page.

Transformation Builder (beta)

The Cloudinary Transformation Builder is a brand new UI designed to help you create and save your transformations in a simple and easy to use way. Here's some of the features and functionality you can get by using the builder:

• Simple and intuitive UI for selecting and configuring transformation actions - easily discover actions and parameters as you build.
• Transformations built as a series of self-contained actions so you can see the results of each one as you apply it.
• URL and SDK code ready to copy and paste directly to your code.
• Ability to update the default preview image to something from your own Media Library.

The builder has support for most common transformation actions. If the transformation action you are trying to apply is not listed, you can add an "Additional Transformation" action and use transformation URL syntax to specify your transformation. Alternatively, you can switch to the legacy editor to create your transformation.

Create a transformation using the Builder

To create a new transformation and verify you have access to the Transformation Builder, head to the transformations page and click Add New. If enabled, you should see the new transformation builder UI where you can start adding actions and building up your transformation. For a taste of what to expect, have a look at the screenshot below:

Named transformation examples

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

• 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"])

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

cl_image_tag("sample.jpg", array("transformation"=>array("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");

new CloudinaryImage("sample.jpg").namedTransformation(name("fit_100x150"));

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

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

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").namedTransformation(name("fit_100x150"));

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

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

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").namedTransformation(name("fit_100x150"));

<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"}
  ])

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

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

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");

new CloudinaryImage("sample.jpg")
  .namedTransformation(name("jpg_with_quality_30"))
  .resize(fit().width(100).height(50));

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"}
  ]})

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg")
  .namedTransformation(name("jpg_with_quality_30"))
  .resize(fit().width(100).height(50));

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

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

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg")
  .namedTransformation(name("jpg_with_quality_30"))
  .resize(fit().width(100).height(50));

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

Chaining named transformations

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"]}
  ])

(new ImageTag('sample.jpg'))
  ->namedTransformation(NamedTransformation::name("jpg_with_quality_30"))
  ->namedTransformation(NamedTransformation::name("crop_400x400"))
  ->namedTransformation(NamedTransformation::name("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"))
  )))

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");

new CloudinaryImage("sample.jpg")
  .namedTransformation(name("jpg_with_quality_30"))
  .namedTransformation(name("crop_400x400"))
  .namedTransformation(name("fit_100x150"));

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"]}
  ]})

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg")
  .namedTransformation(name("jpg_with_quality_30"))
  .namedTransformation(name("crop_400x400"))
  .namedTransformation(name("fit_100x150"));

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

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

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg")
  .namedTransformation(name("jpg_with_quality_30"))
  .namedTransformation(name("crop_400x400"))
  .namedTransformation(name("fit_100x150"));

<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, we can create a named transformation that is a composite of the three named transformations described above. It is now simple to specify a single named transformation instead:

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

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

cl_image_tag("sample.jpg", array("transformation"=>array("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");

new CloudinaryImage("sample.jpg").namedTransformation(name("demo_combined"));

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

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

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").namedTransformation(name("demo_combined"));

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

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

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("sample.jpg").namedTransformation(name("demo_combined"));

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

Where t_demo_combined is defined as: t_jpg_with_quality_30/t_crop_400x400/t_fit_100x150.

Limitations of named transformations

Automatic format

The automatic format transformation parameter (f_auto) is not effective if used in named transformations.

When f_auto is used in a delivery URL, the CDN layer determines the best format to deliver. If this parameter is hidden in a named transformation then it is not visible to the CDN.

You can use f_auto together with a named transformation by chaining the components, for example, t_square/f_auto.

Automatic quality

The automatic quality transformation parameter (q_auto) is effective in named transformations, except in one situation.

When q_auto is used in a delivery URL and the browser sets the Save-Data HTTP header to on in the request, q_auto is translated to q_auto:eco at the CDN level. If this parameter is hidden in a named transformation then it is not visible to the CDN, so the default level is applied, q_auto:good.

To accommodate this situation, you may prefer to use q_auto together with a named transformation by chaining the components, for example, t_square/q_auto.

Learn more: Save-Data support

Embedding images in web pages using SDKs

You access uploaded images or their derived transformations with URLs. These URLs can be used as the <src> of the <img> tags in your HTML code or other frontend functions to deliver your media assets.

But the easiest way to deliver them is using Cloudinary's framework SDKs to automatically generate transformation URLs and embed them using HTML image tags. The SDKs offer two main helper methods: the URL helper and the image tag helper.

Cloudinary URL helper method

The Cloudinary URL helper method (e.g., cloudinary_url in the Ruby/Rails SDK) automatically generates the image source URL itself. For example, using the URL helper method to return the URL of the sample image, padded to a scaled width and height of 300 pixels with a blue background for the padding:

cloudinary_url("sample.jpg", :background=>"blue", :height=>300, :width=>300, :crop=>"pad")

(new ImageTag('sample.jpg'))
  ->resize(Resize::pad()->width(300)
->height(300)
  ->background(
  Background::color(Color::BLUE))
  );

Cloudinary::cloudinary_url("sample.jpg", array("background"=>"blue", "height"=>300, "width"=>300, "crop"=>"pad"))

cloudinary.utils.cloudinary_url("sample.jpg", background="blue", height=300, width=300, crop="pad")

cloudinary.url("sample.jpg", {background: "blue", height: 300, width: 300, crop: "pad"})

cloudinary.url().transformation(new Transformation().background("blue").height(300).width(300).crop("pad")).generate("sample.jpg")

new CloudinaryImage("sample.jpg").resize(
  pad()
    .width(300)
    .height(300)
    .background(color("blue"))
);

cloudinary.url('sample.jpg', {background: "blue", height: 300, width: 300, crop: "pad"});