Named transformations (video tutorial)
On this page:
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
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
Naming the transformation definition will essentially shorten it to one transformation in the URL structure, vastly reducing the original size. |
Prevent human error
When applying transformations to an image or video, it can be easy to forget to add one or more in the process. |
Add security
Naming a transformation definition hides the original transformation details from being in the URL. url: Ruby (cloudinary 1.x): cl_image_tag("Model_woman.jpg", :transformation=>[ {:aspect_ratio=>"1:1", :gravity=>"face", :crop=>"fill"}, {:border=>"5px_solid_rgb:caa5c9"}, {:flags=>["animated", "awebp"], :fetch_format=>"webp"}, {:overlay=>"samples:cloudinary-icon"}, {:fetch_format=>"jpg"}, {:flags=>"layer_apply", :gravity=>"south_east"} ]) PHP (cloudinary_php 2.x): (new ImageTag('Model_woman.jpg')) ->resize(Resize::fill() ->aspectRatio( AspectRatio::ar1X1()) ->gravity( Gravity::focusOn( FocusOn::face())) ) ->border(Border::solid(5,Color::rgb("caa5c9"))) ->transcode(Transcode::toAnimated( AnimatedFormat::webp())) ->overlay(Overlay::source( Source::image("samples/cloudinary-icon") ->transformation((new Transformation()) ->delivery(Delivery::format( Format::jpg()))) ) ->position((new Position()) ->gravity( Gravity::compass( Compass::southEast())) ) ); PHP (cloudinary_php 1.x (legacy)): cl_image_tag("Model_woman.jpg", array("transformation"=>array( array("aspect_ratio"=>"1:1", "gravity"=>"face", "crop"=>"fill"), array("border"=>"5px_solid_rgb:caa5c9"), array("flags"=>array("animated", "awebp"), "fetch_format"=>"webp"), array("overlay"=>"samples:cloudinary-icon"), array("fetch_format"=>"jpg"), array("flags"=>"layer_apply", "gravity"=>"south_east") ))) Python (cloudinary 1.x): CloudinaryImage("Model_woman.jpg").image(transformation=[ {'aspect_ratio': "1:1", 'gravity': "face", 'crop': "fill"}, {'border': "5px_solid_rgb:caa5c9"}, {'flags': ["animated", "awebp"], 'fetch_format': "webp"}, {'overlay': "samples:cloudinary-icon"}, {'fetch_format': "jpg"}, {'flags': "layer_apply", 'gravity': "south_east"} ]) Node.js (cloudinary 1.x): cloudinary.image("Model_woman.jpg", {transformation: [ {aspect_ratio: "1:1", gravity: "face", crop: "fill"}, {border: "5px_solid_rgb:caa5c9"}, {flags: ["animated", "awebp"], fetch_format: "webp"}, {overlay: "samples:cloudinary-icon"}, {fetch_format: "jpg"}, {flags: "layer_apply", gravity: "south_east"} ]}) Java (cloudinary 1.x): cloudinary.url().transformation(new Transformation() .aspectRatio("1:1").gravity("face").crop("fill").chain() .border("5px_solid_rgb:caa5c9").chain() .flags("animated", "awebp").fetchFormat("webp").chain() .overlay(new Layer().publicId("samples:cloudinary-icon")).chain() .fetchFormat("jpg").chain() .flags("layer_apply").gravity("south_east")).imageTag("Model_woman.jpg"); JS (cloudinary-core 2.x (legacy)): cloudinary.imageTag('Model_woman.jpg', {transformation: [ {aspectRatio: "1:1", gravity: "face", crop: "fill"}, {border: "5px_solid_rgb:caa5c9"}, {flags: ["animated", "awebp"], fetchFormat: "webp"}, {overlay: new cloudinary.Layer().publicId("samples:cloudinary-icon")}, {fetchFormat: "jpg"}, {flags: "layer_apply", gravity: "south_east"} ]}).toHtml(); jQuery (cloudinary-jquery 2.x): $.cloudinary.image("Model_woman.jpg", {transformation: [ {aspect_ratio: "1:1", gravity: "face", crop: "fill"}, {border: "5px_solid_rgb:caa5c9"}, {flags: ["animated", "awebp"], fetch_format: "webp"}, {overlay: new cloudinary.Layer().publicId("samples:cloudinary-icon")}, {fetch_format: "jpg"}, {flags: "layer_apply", gravity: "south_east"} ]}) React (cloudinary-react 1.x): <Image publicId="Model_woman.jpg" > <Transformation aspectRatio="1:1" gravity="face" crop="fill" /> <Transformation border="5px_solid_rgb:caa5c9" /> <Transformation flags={["animated", "awebp"]} fetchFormat="webp" /> <Transformation overlay="samples:cloudinary-icon" /> <Transformation fetchFormat="jpg" /> <Transformation flags="layer_apply" gravity="south_east" /> </Image> Vue.js (cloudinary-vue 1.x): <cld-image public-id="Model_woman.jpg" > <cld-transformation aspect-ratio="1:1" gravity="face" crop="fill" /> <cld-transformation border="5px_solid_rgb:caa5c9" /> <cld-transformation flags={["animated", "awebp"]} fetch-format="webp" /> <cld-transformation :overlay="samples:cloudinary-icon" /> <cld-transformation fetch-format="jpg" /> <cld-transformation flags="layer_apply" gravity="south_east" /> </cld-image> Angular (@cloudinary/angular-5.x 1.x (legacy)): <cl-image public-id="Model_woman.jpg" > <cl-transformation aspect-ratio="1:1" gravity="face" crop="fill"> </cl-transformation> <cl-transformation border="5px_solid_rgb:caa5c9"> </cl-transformation> <cl-transformation flags={{["animated", "awebp"]}} fetch-format="webp"> </cl-transformation> <cl-transformation overlay="samples:cloudinary-icon"> </cl-transformation> <cl-transformation fetch-format="jpg"> </cl-transformation> <cl-transformation flags="layer_apply" gravity="south_east"> </cl-transformation> </cl-image> .NET (CloudinaryDotNet 1.x): cloudinary.Api.UrlImgUp.Transform(new Transformation() .AspectRatio("1:1").Gravity("face").Crop("fill").Chain() .Border("5px_solid_rgb:caa5c9").Chain() .Flags("animated", "awebp").FetchFormat("webp").Chain() .Overlay(new Layer().PublicId("samples:cloudinary-icon")).Chain() .FetchFormat("jpg").Chain() .Flags("layer_apply").Gravity("south_east")).BuildImageTag("Model_woman.jpg") iOS (cloudinary 3.x): imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setAspectRatio("1:1").setGravity("face").setCrop("fill").chain() .setBorder("5px_solid_rgb:caa5c9").chain() .setFlags("animated", "awebp").setFetchFormat("webp").chain() .setOverlay("samples:cloudinary-icon").chain() .setFetchFormat("jpg").chain() .setFlags("layer_apply").setGravity("south_east")).generate("Model_woman.jpg")!, cloudinary: cloudinary) Android (cloudinary-android 1.x): MediaManager.get().url().transformation(new Transformation() .aspectRatio("1:1").gravity("face").crop("fill").chain() .border("5px_solid_rgb:caa5c9").chain() .flags("animated", "awebp").fetchFormat("webp").chain() .overlay(new Layer().publicId("samples:cloudinary-icon")).chain() .fetchFormat("jpg").chain() .flags("layer_apply").gravity("south_east")).generate("Model_woman.jpg"); url: Ruby (cloudinary 1.x): PHP (cloudinary_php 2.x): PHP (cloudinary_php 1.x (legacy)): Python (cloudinary 1.x): Node.js (cloudinary 1.x): Java (cloudinary 1.x): JS (@cloudinary/url-gen 1.x): JS (cloudinary-core 2.x (legacy)): jQuery (cloudinary-jquery 2.x): React (@cloudinary/react 1.x): React (cloudinary-react 1.x): Vue.js (cloudinary-vue 1.x): Angular (@cloudinary/ng 1.x): Angular (@cloudinary/angular-5.x 1.x (legacy)): .NET (CloudinaryDotNet 1.x): iOS (cloudinary 3.x): Android (cloudinary-android 1.x): |
Create a transformation in the console
Begin developing your transformation in the Edit page for one or your assets in your Media Library. |
Save the transformation as a named transformation
Take your existing transformation and save it as a named transformation, in the Transformation Editor. |
Apply a named transformation to an image or video
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
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
Related topics
- Learn more about named transformations, including ways to define them programmatically with our Admin API.
- Sign up for our Fundamentals for Developers course for interactive lessons on named transformations.
If you like this, you might also like...
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.
✖️