Named transformations (video tutorial)

On this page:

Overview
Video tutorial
Tutorial contents
Keep learning

Overview

Named transformations are one of the most useful aspects of Cloudinary’s service, allowing you to take one or more transformations you have created for your images and/or videos and develop a codename for them.

Video tutorial

This video is brought to you by Cloudinary's video player - embed your own!

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Use-cases for named transformations

Shorten your URLs


0:20	Naming the transformation definition will essentially shorten it to one transformation in the URL structure, vastly reducing the original size.

Prevent human error


0:41	When applying transformations to an image or video, it can be easy to forget to add one or more in the process.

Add security


0:55	Naming a transformation definition hides the original transformation details from being in the URL. URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All URL: Copy to clipboard https://res.cloudinary.com/demo/image/upload/ar_1:1,bo_5px_solid_rgb:caa5c9,c_fill,f_webp,fl_awebp,g_face/f_jpg,g_south_east,l_samples:cloudinary-icon/Model_woman.jpg Ruby: Copy to clipboard cl_image_tag("Model_woman.jpg", :format=>"jpg", :transformation=>[ {:aspect_ratio=>"1:1", :border=>"5px_solid_rgb:caa5c9", :flags=>"awebp", :gravity=>"face", :crop=>"fill", :fetch_format=>"webp"}, {:gravity=>"south_east", :overlay=>"samples:cloudinary-icon"} ]) PHP: Copy to clipboard cl_image_tag("Model_woman.jpg", array("format"=>"jpg", "transformation"=>array( array("aspect_ratio"=>"1:1", "border"=>"5px_solid_rgb:caa5c9", "flags"=>"awebp", "gravity"=>"face", "crop"=>"fill", "fetch_format"=>"webp"), array("gravity"=>"south_east", "overlay"=>"samples:cloudinary-icon") ))) Python: Copy to clipboard CloudinaryImage("Model_woman.jpg").image(format="jpg", transformation=[ {'aspect_ratio': "1:1", 'border': "5px_solid_rgb:caa5c9", 'flags': "awebp", 'gravity': "face", 'crop': "fill", 'fetch_format': "webp"}, {'gravity': "south_east", 'overlay': "samples:cloudinary-icon"} ]) Node.js: Copy to clipboard cloudinary.image("Model_woman.jpg", {format: "jpg", transformation: [ {aspect_ratio: "1:1", border: "5px_solid_rgb:caa5c9", flags: "awebp", gravity: "face", crop: "fill", fetch_format: "webp"}, {gravity: "south_east", overlay: "samples:cloudinary-icon"} ]}) Java: Copy to clipboard cloudinary.url().transformation(new Transformation() .aspectRatio("1:1").border("5px_solid_rgb:caa5c9").flags("awebp").gravity("face").crop("fill").fetchFormat("webp").chain() .gravity("south_east").overlay(new Layer().publicId("samples:cloudinary-icon"))).format("jpg").imageTag("Model_woman.jpg"); JS: Copy to clipboard cloudinary.imageTag('Model_woman.jpg', {format: "jpg", transformation: [ {aspectRatio: "1:1", border: "5px_solid_rgb:caa5c9", flags: "awebp", gravity: "face", crop: "fill", fetchFormat: "webp"}, {gravity: "south_east", overlay: new cloudinary.Layer().publicId("samples:cloudinary-icon")} ]}).toHtml(); jQuery: Copy to clipboard $.cloudinary.image("Model_woman.jpg", {format: "jpg", transformation: [ {aspect_ratio: "1:1", border: "5px_solid_rgb:caa5c9", flags: "awebp", gravity: "face", crop: "fill", fetch_format: "webp"}, {gravity: "south_east", overlay: new cloudinary.Layer().publicId("samples:cloudinary-icon")} ]}) React: Copy to clipboard <Image publicId="Model_woman.jpg" format="jpg"> <Transformation aspectRatio="1:1" border="5px_solid_rgb:caa5c9" flags="awebp" gravity="face" crop="fill" fetchFormat="webp" /> <Transformation gravity="south_east" overlay="samples:cloudinary-icon" /> </Image> Vue.js: Copy to clipboard <cld-image publicId="Model_woman.jpg" format="jpg"> <cld-transformation aspectRatio="1:1" border="5px_solid_rgb:caa5c9" flags="awebp" gravity="face" crop="fill" fetchFormat="webp" /> <cld-transformation gravity="south_east" overlay="samples:cloudinary-icon" /> </cld-image> Angular: Copy to clipboard <cl-image public-id="Model_woman.jpg" format="jpg"> <cl-transformation aspect-ratio="1:1" border="5px_solid_rgb:caa5c9" flags="awebp" gravity="face" crop="fill" fetch-format="webp"> </cl-transformation> <cl-transformation gravity="south_east" overlay="samples:cloudinary-icon"> </cl-transformation> </cl-image> .NET: Copy to clipboard cloudinary.Api.UrlImgUp.Transform(new Transformation() .AspectRatio("1:1").Border("5px_solid_rgb:caa5c9").Flags("awebp").Gravity("face").Crop("fill").FetchFormat("webp").Chain() .Gravity("south_east").Overlay(new Layer().PublicId("samples:cloudinary-icon"))).Format("jpg").BuildImageTag("Model_woman.jpg") Android: Copy to clipboard MediaManager.get().url().transformation(new Transformation() .aspectRatio("1:1").border("5px_solid_rgb:caa5c9").flags("awebp").gravity("face").crop("fill").fetchFormat("webp").chain() .gravity("south_east").overlay(new Layer().publicId("samples:cloudinary-icon"))).format("jpg").generate("Model_woman.jpg"); iOS: Copy to clipboard imageView.cldSetImage(cloudinary.createUrl().setFormat("jpg").setTransformation(CLDTransformation() .setAspectRatio("1:1").setBorder("5px_solid_rgb:caa5c9").setFlags("awebp").setGravity("face").setCrop("fill").setFetchFormat("webp").chain() .setGravity("south_east").setOverlay("samples:cloudinary-icon")).generate("Model_woman.jpg")!, cloudinary: cloudinary) URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All URL: Copy to clipboard https://res.cloudinary.com/demo/image/upload/t_global/Model_woman.jpg Ruby: Copy to clipboard cl_image_tag("Model_woman.jpg", :transformation=>["global"]) PHP: Copy to clipboard cl_image_tag("Model_woman.jpg", array("transformation"=>array("global"))) Python: Copy to clipboard CloudinaryImage("Model_woman.jpg").image(transformation=["global"]) Node.js: Copy to clipboard cloudinary.image("Model_woman.jpg", {transformation: ["global"]}) Java: Copy to clipboard cloudinary.url().transformation(new Transformation().named("global")).imageTag("Model_woman.jpg"); JS: Copy to clipboard cloudinary.imageTag('Model_woman.jpg', {transformation: ["global"]}).toHtml(); jQuery: Copy to clipboard $.cloudinary.image("Model_woman.jpg", {transformation: ["global"]}) React: Copy to clipboard <Image publicId="Model_woman.jpg" > <Transformation transformation={["global"]} /> </Image> Vue.js: Copy to clipboard <cld-image publicId="Model_woman.jpg" > <cld-transformation transformation={["global"]} /> </cld-image> Angular: Copy to clipboard <cl-image public-id="Model_woman.jpg" > <cl-transformation transformation={{["global"]}}> </cl-transformation> </cl-image> .NET: Copy to clipboard cloudinary.Api.UrlImgUp.Transform(new Transformation().Named("global")).BuildImageTag("Model_woman.jpg") Android: Copy to clipboard MediaManager.get().url().transformation(new Transformation().named("global")).generate("Model_woman.jpg"); iOS: Copy to clipboard imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setNamed("global")).generate("Model_woman.jpg")!, cloudinary: cloudinary) Click on the sample URLs and you'll see that both images look the same. The first example exposes all the steps with its overly long URL, whereas the second is much shorter and concealed.

0:55

Naming a transformation definition hides the original transformation details from being in the URL.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/ar_1:1,bo_5px_solid_rgb:caa5c9,c_fill,f_webp,fl_awebp,g_face/f_jpg,g_south_east,l_samples:cloudinary-icon/Model_woman.jpg

Ruby:

cl_image_tag("Model_woman.jpg", :format=>"jpg", :transformation=>[
  {:aspect_ratio=>"1:1", :border=>"5px_solid_rgb:caa5c9", :flags=>"awebp", :gravity=>"face", :crop=>"fill", :fetch_format=>"webp"},
  {:gravity=>"south_east", :overlay=>"samples:cloudinary-icon"}
  ])

PHP:

cl_image_tag("Model_woman.jpg", array("format"=>"jpg", "transformation"=>array(
  array("aspect_ratio"=>"1:1", "border"=>"5px_solid_rgb:caa5c9", "flags"=>"awebp", "gravity"=>"face", "crop"=>"fill", "fetch_format"=>"webp"),
  array("gravity"=>"south_east", "overlay"=>"samples:cloudinary-icon")
  )))

Python:

CloudinaryImage("Model_woman.jpg").image(format="jpg", transformation=[
  {'aspect_ratio': "1:1", 'border': "5px_solid_rgb:caa5c9", 'flags': "awebp", 'gravity': "face", 'crop': "fill", 'fetch_format': "webp"},
  {'gravity': "south_east", 'overlay': "samples:cloudinary-icon"}
  ])

Node.js:

cloudinary.image("Model_woman.jpg", {format: "jpg", transformation: [
  {aspect_ratio: "1:1", border: "5px_solid_rgb:caa5c9", flags: "awebp", gravity: "face", crop: "fill", fetch_format: "webp"},
  {gravity: "south_east", overlay: "samples:cloudinary-icon"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .aspectRatio("1:1").border("5px_solid_rgb:caa5c9").flags("awebp").gravity("face").crop("fill").fetchFormat("webp").chain()
  .gravity("south_east").overlay(new Layer().publicId("samples:cloudinary-icon"))).format("jpg").imageTag("Model_woman.jpg");

JS:

cloudinary.imageTag('Model_woman.jpg', {format: "jpg", transformation: [
  {aspectRatio: "1:1", border: "5px_solid_rgb:caa5c9", flags: "awebp", gravity: "face", crop: "fill", fetchFormat: "webp"},
  {gravity: "south_east", overlay: new cloudinary.Layer().publicId("samples:cloudinary-icon")}
  ]}).toHtml();

jQuery:

$.cloudinary.image("Model_woman.jpg", {format: "jpg", transformation: [
  {aspect_ratio: "1:1", border: "5px_solid_rgb:caa5c9", flags: "awebp", gravity: "face", crop: "fill", fetch_format: "webp"},
  {gravity: "south_east", overlay: new cloudinary.Layer().publicId("samples:cloudinary-icon")}
  ]})

React:

<Image publicId="Model_woman.jpg" format="jpg">
  <Transformation aspectRatio="1:1" border="5px_solid_rgb:caa5c9" flags="awebp" gravity="face" crop="fill" fetchFormat="webp" />
  <Transformation gravity="south_east" overlay="samples:cloudinary-icon" />
</Image>

Vue.js:

<cld-image publicId="Model_woman.jpg" format="jpg">
  <cld-transformation aspectRatio="1:1" border="5px_solid_rgb:caa5c9" flags="awebp" gravity="face" crop="fill" fetchFormat="webp" />
  <cld-transformation gravity="south_east" overlay="samples:cloudinary-icon" />
</cld-image>

Angular:

<cl-image public-id="Model_woman.jpg" format="jpg">
  <cl-transformation aspect-ratio="1:1" border="5px_solid_rgb:caa5c9" flags="awebp" gravity="face" crop="fill" fetch-format="webp">
  </cl-transformation>
  <cl-transformation gravity="south_east" overlay="samples:cloudinary-icon">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("1:1").Border("5px_solid_rgb:caa5c9").Flags("awebp").Gravity("face").Crop("fill").FetchFormat("webp").Chain()
  .Gravity("south_east").Overlay(new Layer().PublicId("samples:cloudinary-icon"))).Format("jpg").BuildImageTag("Model_woman.jpg")

Android:

MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("1:1").border("5px_solid_rgb:caa5c9").flags("awebp").gravity("face").crop("fill").fetchFormat("webp").chain()
  .gravity("south_east").overlay(new Layer().publicId("samples:cloudinary-icon"))).format("jpg").generate("Model_woman.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setFormat("jpg").setTransformation(CLDTransformation()
  .setAspectRatio("1:1").setBorder("5px_solid_rgb:caa5c9").setFlags("awebp").setGravity("face").setCrop("fill").setFetchFormat("webp").chain()
  .setGravity("south_east").setOverlay("samples:cloudinary-icon")).generate("Model_woman.jpg")!, cloudinary: cloudinary)

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/t_global/Model_woman.jpg

Ruby:

cl_image_tag("Model_woman.jpg", :transformation=>["global"])

PHP:

cl_image_tag("Model_woman.jpg", array("transformation"=>array("global")))

Python:

CloudinaryImage("Model_woman.jpg").image(transformation=["global"])

Node.js:

cloudinary.image("Model_woman.jpg", {transformation: ["global"]})

Java:

cloudinary.url().transformation(new Transformation().named("global")).imageTag("Model_woman.jpg");

JS:

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

jQuery:

$.cloudinary.image("Model_woman.jpg", {transformation: ["global"]})

React:

<Image publicId="Model_woman.jpg" >
  <Transformation transformation={["global"]} />
</Image>

Vue.js:

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

Angular:

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

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Named("global")).BuildImageTag("Model_woman.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().named("global")).generate("Model_woman.jpg");

iOS:

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

Click on the sample URLs and you'll see that both images look the same. The first example exposes all the steps with its overly long URL, whereas the second is much shorter and concealed.

Create a transformation in the console


1:21	Begin developing your transformation in the Edit page for one or your assets in your Media Library.

Save the transformation as a named transformation


2:49	Take your existing transformation and save it as a named transformation, in the Transformation Editor.

Apply a named transformation to an image or video


3:18	Apply the named transformation to any image or video in your Cloudinary Media Library as you would with other transformations. Simply use the `t_` parameter and then the name of the transformation, e.g. `t_global`.

Use a named transformation as a preset


3:34	You can also add any named transformation as a preset by selecting the Add to Presets link, when you are viewing the transformation in the Transformations page.

Keep learning

If you like this, you might also like...

Media Library Intro

Explore the main elements of the Media Library

Media Library Upload

Drag & drop or select from remote sources to upload

Transformation Basics

Learn the basics of a transformation URL

Check out Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

✔️ Feedback sent!

✖️

Error

Unfortunately there's been an error sending your feedback.

Rate this page: