> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Named transformations (video tutorial)

## Overview

[Named transformations](image_transformations#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.

In this tutorial, you'll gain an overview of what [transformations](image_transformations) and [named transformations](image_transformations#named_transformations) are used for in Cloudinary's APIs. Then you'll learn how to programmatically create and apply Cloudinary's named transformations to assets. Finally, you'll go a step further, optimizing your assets by utilizing Cloudinary's automatic format (`f_auto`) and quality (`q_auto`) features. 

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### What is a transformation? 
{table:class=tutorial-bullets}|  |  
| --- | --- |
|{videotime:id=media :min=0 :sec=06 :player=cld} | A transformation is essentially one or more instructions that tell Cloudinary how to change the properties of a media asset. Cloudinary transformations are displayed as abbreviated parameters directly in the URL that accesses the media.|

### What is a named transformation?
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=31 :player=cld} | Named transformations allow you to take one or more transformations, and group them under a unique custom name. Learn more in the named transformation documentation for [images](image_transformations#named_transformations) or [video](video_manipulation_and_delivery#named_transformations).|

### Example of a named transformation in the wild

{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=38 :player=cld} | The first example exposes all of the parameters within the URL. The second example keeps your set of transformations concealed within a single named transformation.|

### Use cases for named transformations
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=51 :player=cld} | Named transformations help with security, reusability, and reducing human error. When we add many transformations, the URL can get quite lengthy, and all transformations applied are visible in the URL structure. Creating a named transformation will conveniently condense all the transformation parameters into one item in the URL structure, hiding your transformation parameters. |

### Clone this repository to follow along
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=02 :player=cld} | It may be helpful to clone the repository we've created and will be using for this demonstration.|

```CURL
git clone https://github.com/cloudinary-training/cld-named-transformations
```

### Setting up your development environment 
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=06 :player=cld} | If this is your first time setting up your development environment with Cloudinary, we recommend watching our [Upload Programmatically tutorial](upload_images#programmatic_upload_with_the_node_js_sdk_video_tutorial). It will also walk you through how to make your first upload.|

### Ensure script libraries are installed 
{table:class=tutorial-bullets}|  |  
| --- | --- |
|{videotime:id=media :min=1 :sec=15 :player=cld} |Make sure all of our script's libraries [are properly installed](https://docs.npmjs.com/cli/v7/commands/npm-install) with a simple `npm i` command. If you open your **package.json** file, you can see all of the packages have been listed as dependencies.
|

### Create a basic named transformation
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=57 :player=cld} | We're using the Node.js SDK `create_transformation` function to POST to the Admin API's `transformations` endpoint, and we're passing it our own unique name - in this example, `avatar-round`. |

```nodejs
require("dotenv").config();
const cloudinary = require("cloudinary").v2;

//creating a new named transformation called avatar-round
cloudinary.api
  .create_transformation("avatar-round", {
    transformation: [
      {
        width: 300,
        height: 300,
        radius: "max",
        gravity: "face",
        crop: "thumb"
      },
    ],
  })
  .then((result) => {
    console.log(result);
  })
```

### Run script to create named transformation
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=44 :player=cld} | Run `node create-named-transformation.js` to officially create our first named transformation! |

### Apply named transformation to three assets
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=49 :player=cld} | Now we will apply the named transformation we just created (avatar-round) to three images in our Cloudinary Media Library (public IDs: `person1`, `person2`, `person3`). |

```nodejs
require("dotenv").config();
const cloudinary = require("cloudinary").v2;

//applying a named transformation (avatar-round) to three files 
console.log(cloudinary.url("person1", { transformation: ["avatar-round"] }));
console.log(cloudinary.url("person2", { transformation: ["avatar-round"] }));
console.log(cloudinary.url("person3", { transformation: ["avatar-round"] }));
```

### Open a URL and inspect
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=3 :sec=22 :player=cld} | As you can see, although the image has been given the rounded corners we asked for, the square background remains. The image is still in the original JPEG format, which doesn't support transparency. There are modern formats like AVIF that are optimized and support transparency. 
|

### Optimizing the file format using f_auto
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=3 :sec=57 :player=cld} | Let's take a look at this script, which we've called **optimize.js**. Cloudinary makes it possible to deliver the best, modern format for your browser by using the automatic format feature. This transformation is displayed in the URL as `f_auto`. |

### Optimizing the quality using q_auto
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=4 :sec=13 :player=cld} | While we're at it, let's also add compression with quality auto (or `q_auto`) for more optimization. Applying quality auto (`q_auto`) will allow us to get the best compression, while maintaining great quality. You can see in the script that we are creating a chained transformation with an array of transformations. |

```nodejs
require("dotenv").config();
const cloudinary = require("cloudinary").v2;

// logging three URLs where we are applying our named transformation with f_auto, q_auto
console.log(
  cloudinary.url("person1", {
    secure: true,
    transformation: [
      { transformation: ["avatar-round"] },
      { fetch_format: "auto" },
      { quality: "auto" },
    ],
  })
);

console.log(
  cloudinary.url("person2", {
    secure: true,
    transformation: [
      { transformation: ["avatar-round"] },
      { fetch_format: "auto" },
      { quality: "auto" },
    ],
  })
);

console.log(
  cloudinary.url("person3", {
    secure: true,
    transformation: [
      { transformation: ["avatar-round"] },
      { fetch_format: "auto" },
      { quality: "auto" },
    ],
  })
);
```

### Run script to optimize the assets
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=4 :sec=34 :player=cld} | Run `optimize.js` to optimize the assets. The automatic formatting (`f_auto`) provides a file format that supports transparency in this case. The automatic quality (`q_auto`) provides an optimized, compressed quality for the asset.  |

### Inspect optimized assets in Chrome and Safari
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=4 :sec=42 :player=cld} | Let's see the result in Chrome and Safari. In Chrome, we're seeing an AVIF. Safari is displaying the image as a JP2. |

## Keep learning

> **READING**:
>
> * Learn more in the named transformation documentation for [images](image_transformations#named_transformations), or [video](video_manipulation_and_delivery#named_transformations).

> * Dive into Cloudinary's special sauce [(asset optimization](image_optimization)), auto formatting [(f_auto)](image_optimization#automatic_format_selection_f_auto) and auto quality [(q_auto)](image_optimization#automatic_quality_selection_q_auto). 

> * Learn more about [named transformations](image_transformations#named_transformations), including ways to [define them programmatically with our Admin API](admin_api#create_a_named_transformation).

> * See how named transformations support [e-commerce workflows](ecommerce_optimize_customize).

> * Sign up for our [Fundamentals for Developers course](https://training.cloudinary.com/courses/cloudinary-fundamentals-for-developers) for interactive lessons on named transformations.

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

  
  
  
    Upload Programmatically
    Use a Cloudinary SDK to upload media assets 
  

  
  
  
    Transformations
    Learn about creating asset variations with transformations. 
  

  
  
  
    Create Upload Presets (Node.js)
    Streamline media uploads using signed upload presets 
  

 

 Check out the 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.