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 and named transformations are used for in Cloudinary's APIs and Programmable Media products. 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.
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.
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 or video.
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.
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.
If this is your first time setting up your development environment with Cloudinary, we recommend watching our Upload Programmatically tutorial. It will also walk you through how to make your first upload.
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.
Copy to clipboard
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);
})
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).
Copy to clipboard
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"] }));
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 in Chrome and JP2 in Safari that are optimized and support transparency.
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.
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.
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.
Apply complex crops, optimizations and artistic details with one click
Create Upload Presets
Streamline media uploads using signed upload presets
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.
0:06
