Assets

Transformations (video tutorial)

Last updated: Oct-30-2024

On this page:

Overview
Video tutorial
Tutorial contents
Keep learning

Overview

Watch this video tutorial to learn how to leverage transformations to create and manage your asset variations.

Note

If you're using the free plan, some of the functionality may differ from what's described in the video.

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.

Introduction


0:00	The following topics are covered in this video: What are transformations? Transformation types: On-the-fly transformations Name transformations (transformation templates) Eager transformatins Incoming transformations Optimization: `f_auto`, `q_auto` Studio Getting help

What are transformations?


0:40	Transformations in Cloudinary enable you to modify original assets at scale, including resizing, cropping, overlaying, underlaying, enhancing visually, creating high definition or standard definition videos from a raw video, and more. While the single original asset remains stored in Cloudinary, multiple transformed versions are generated as copies.

Transformation example


1:27	This example displays the original image alongside three variations: one with the background removed, another cropped into a square with a blue background, and the third with text overlaid. These variations are generated on the fly by adding parameters to the image's delivery URL.

Transformation types


1:57	There are three types of transformations: On-the-fly transformations: These are achieved by adding parameters to the URL, which transform the asset. Named transformations: Collections of transformations saved under a single name. They can be configured as templates to simplify the application of multiple transformations simultaneously within the Media Library. Assigning them meaningful names, such as `facebook_profile_photo`, enhances ease of use across the platform. Eager and incoming transformations: These transformations are generated by Cloudinary during the upload process, saving time and effort.

1:57

There are three types of transformations:

On-the-fly transformations: These are achieved by adding parameters to the URL, which transform the asset.
Named transformations: Collections of transformations saved under a single name. They can be configured as templates to simplify the application of multiple transformations simultaneously within the Media Library. Assigning them meaningful names, such as facebook_profile_photo, enhances ease of use across the platform.
Eager and incoming transformations: These transformations are generated by Cloudinary during the upload process, saving time and effort.

Optimization


2:49	Optimization involves delivering the smallest, most efficient image while maintaining visual fidelity. This includes resizing images and utilizing Cloudinary's `f_auto` and `q_auto` features.

On-the-fly optimization with f_auto and q_auto


3:14	Open this URL in a browser window: https://res.cloudinary.com/dam-fashion/image/upload/actfefhwqpv3i9gkb084.jpg. Use Cloudinary's Media Inspector Chrome Extension to view the image's format (JPEG) and size (3.42 MB). If you don't have the extension, you can add it from the Chrome extension marketplace. Add the `f_auto,q_auto/` parameters directly after `upload/` in the URL, then refresh the browser. Open the Media Inspector again to see that the format is now AVIF and the size has been reduced to 1.06 MB.

3:14

Open this URL in a browser window: https://res.cloudinary.com/dam-fashion/image/upload/actfefhwqpv3i9gkb084.jpg. Use Cloudinary's Media Inspector Chrome Extension to view the image's format (JPEG) and size (3.42 MB). If you don't have the extension, you can add it from the Chrome extension marketplace.

Add the f_auto,q_auto/ parameters directly after upload/ in the URL, then refresh the browser. Open the Media Inspector again to see that the format is now AVIF and the size has been reduced to 1.06 MB.

Resize


4:11	Resize the image by adding `,w_800,c_fill` to the delivery URL. Open the Media Inspector again to see that the size of the image has been further reduced to just 25.28 KB.

On-the-fly video optimization


4:49	Open this URL in a browser window: https://res.cloudinary.com/dam-fashion/video/upload/samples/elephants.mp4. Open the Media Inspector. The format and size of this video are MP4 and 37.06 MB. Add `f_auto,q_auto` and see that now the format and size of the video are WebM and 5.57 MB. If we resize by adding `w_800`, the size is reduced further to 2.57 MB.

Named transformations (transformation templates)


6:01	You can use named transformations, configured as transformation templates, within the Media Library. To see this, navigate to the Assets page of the Media Library and double-click an asset to open it in the Download Options tab of the asset management drill-down page. On the panel on the right side of the asset, you'll find a list of transformations, including social media sizes and customized named transformations that have been set as transformation templates. You can download the asset with one of those transformations applied.

6:01

You can use named transformations, configured as transformation templates, within the Media Library. To see this, navigate to the Assets page of the Media Library and double-click an asset to open it in the Download Options tab of the asset management drill-down page. On the panel on the right side of the asset, you'll find a list of transformations, including social media sizes and customized named transformations that have been set as transformation templates. You can download the asset with one of those transformations applied.

Creating named transformations and transformation templates


6:40	Creating named transformations: In the Product Navigation menu, click Transformations and then Manage Transformations to see a list of all the named transformations that have already been created. Click New Transformation. The Transformation Builder opens with a sample image, displaying a list of available transformations. From the top, select whether you want to create an image or video transformation. You can also select to use natural language to create the transformation. Try the first natural language example to make the image square and web-optimized. Apply the transformation to see how it will look on the sample image. Click Save As to save the named transformation. Choose a name, such as `Brad_Test`. Close the Transformation Builder to return to the Manage Transformations page. Setting the named transformation as a transformation template in the Media Library: Click the (3-dots) options menu for the named transformation you created. Toggle Use for images to enable this named transformation to be used as a transformation template within the Media Library. In the Media Library, navigate to the Download Options tab of the asset management drill-down page of an asset. Notice that the named transformation has been added to the list of transformation templates.

6:40

Creating named transformations:

In the Product Navigation menu, click Transformations and then Manage Transformations to see a list of all the named transformations that have already been created.
Click New Transformation. The Transformation Builder opens with a sample image, displaying a list of available transformations.
From the top, select whether you want to create an image or video transformation. You can also select to use natural language to create the transformation.
Try the first natural language example to make the image square and web-optimized. Apply the transformation to see how it will look on the sample image.
Click Save As to save the named transformation. Choose a name, such as Brad_Test.
Close the Transformation Builder to return to the Manage Transformations page.

Setting the named transformation as a transformation template in the Media Library:

Click the (3-dots) options menu for the named transformation you created.
Toggle Use for images to enable this named transformation to be used as a transformation template within the Media Library.
In the Media Library, navigate to the Download Options tab of the asset management drill-down page of an asset.
Notice that the named transformation has been added to the list of transformation templates.

Using named transformations on the fly


8:33	Open this URL in a browser window: https://res.cloudinary.com/dam-fashion/image/upload/ikpt4a3yeljihfmrpcfz. In the URL, add the name you gave your named transformation preceded by `t_`. For example, if your named transformation is named `Brad_Test`, add `t_Brad_Test` to the URL. Refresh the browser to see the transformations included in the named transformations applied to the asset.

Eager and incoming transformations


9:00	Eager transformations: It can take time for a transformed image to be generated for the first time. Eager transformations generate the transformation and save it in the cache when the asset is uploaded, eliminating the generation time when the asset is actually requested. Incoming transformations: These transformations are applied to assets when they're uploaded, altering the original asset stored in your product environment.

9:00

Eager transformations: It can take time for a transformed image to be generated for the first time. Eager transformations generate the transformation and save it in the cache when the asset is uploaded, eliminating the generation time when the asset is actually requested.

Incoming transformations: These transformations are applied to assets when they're uploaded, altering the original asset stored in your product environment.

f_auto and q_auto

11:50 f_auto serves the best format based on the requesting browser. Open this URL in a browser window: https://res.cloudinary.com/dam-fashion/image/upload/bnvxgy4b3zclfez8rza2.jpg Use the Media Inspector to see that this image is a 7.91 MB JPEG. Add f_auto to the URL. Then, open the Media Inspector to see that the image is now served as a WebP based on the requesting browser (Chrome). This reduces the size of the image to 5.23 MB. We recommend that you always optimize your assets using f_auto and q_auto.


11:50	`f_auto` serves the best format based on the requesting browser. Open this URL in a browser window: `https://res.cloudinary.com/dam-fashion/image/upload/bnvxgy4b3zclfez8rza2.jpg` Use the Media Inspector to see that this image is a 7.91 MB JPEG. Add `f_auto` to the URL. Then, open the Media Inspector to see that the image is now served as a WebP based on the requesting browser (Chrome). This reduces the size of the image to 5.23 MB. We recommend that you always optimize your assets using `f_auto` and `q_auto`.

Resize and crop images with Studio


13:06	In the (3-dots) options menu on an asset card, select Edit (Early Access) -> Resize & Crop. Apply a width of 100. You have the options to download the asset or copy its URL. If you're an administrator, you can also save the transformations you just applied as a template. Give it a name, for example 'Blueberry'. Open any image in your Media Library in the Download Options tab of the asset management drill-down page and see that 'Blueberry' is now listed as a transformation template.

13:06

In the (3-dots) options menu on an asset card, select Edit (Early Access) -> Resize & Crop. Apply a width of 100. You have the options to download the asset or copy its URL.

If you're an administrator, you can also save the transformations you just applied as a template. Give it a name, for example 'Blueberry'. Open any image in your Media Library in the Download Options tab of the asset management drill-down page and see that 'Blueberry' is now listed as a transformation template.

Edit the background and add image overlays with Studio


14:14	In the (3-dots) options menu on an asset card, select Edit (Early Access) -> Background. Keep in mind that `background removal` is an add-on with usage limits. Toggle the Remove Background background button, view your remaining quota, and confirm the action. Optionally select a background color. Next, click Image Overlay from the actions on the left side-bar. Select the lower-left positioning for the overlay. Click Add Image and select the desired image from the picker. The logo will appear at the lower-left corner of the image. You have the options to download the asset or copy its URL. If you're an administrator, you can save the transformations you just applied as a template for use in the asset management drill-down page for all assets.

14:14

In the (3-dots) options menu on an asset card, select Edit (Early Access) -> Background. Keep in mind that background removal is an add-on with usage limits. Toggle the Remove Background background button, view your remaining quota, and confirm the action. Optionally select a background color.

Next, click Image Overlay from the actions on the left side-bar. Select the lower-left positioning for the overlay. Click Add Image and select the desired image from the picker. The logo will appear at the lower-left corner of the image.

You have the options to download the asset or copy its URL. If you're an administrator, you can save the transformations you just applied as a template for use in the asset management drill-down page for all assets.

Transform images in bulk with Studio


15:12	From the Assets page, select Landscape within the Orientations filter. Select some of those images. Click on the Edit icon on the assets toolbar and select Resize & Crop. Studio will open with all the selected images. Change the width to 800. Once the transformation is applied, you can download a ZIP file containing all the transformed images, or you can download a CSV file containing all the transformed URLs. Admins can also create templates from the transformations.

15:12

From the Assets page, select Landscape within the Orientations filter. Select some of those images. Click on the Edit icon on the assets toolbar and select Resize & Crop. Studio will open with all the selected images. Change the width to 800.

Once the transformation is applied, you can download a ZIP file containing all the transformed images, or you can download a CSV file containing all the transformed URLs. Admins can also create templates from the transformations.

Accessing help and additional training


16:08	For more training, visit the Cloudinary Academy. We offer paths for Assets, API and other training topics. Additionally, we conduct live regional training, webinars and certification programs. To access further assistance and resources, click on the question icon on the lower left sidebar of the Media Library. Here you'll find a useful link to our documentation, where you can locate the transformations we offer, as well as a link to support, and the Cloudinary Academy.

16:08

For more training, visit the Cloudinary Academy. We offer paths for Assets, API and other training topics. Additionally, we conduct live regional training, webinars and certification programs.

To access further assistance and resources, click on the question icon on the lower left sidebar of the Media Library. Here you'll find a useful link to our documentation, where you can locate the transformations we offer, as well as a link to support, and the Cloudinary Academy.

Keep learning

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

Sharing assets -
Chapter 1

Share individual assets internally and externally.

Sharing assets -
Chapter 2

Share assets via folders and collections.

Searching for Assets

Learn about the different methods for performing asset searches.

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.

✔️ Feedback sent!