> ## 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. # Transformations (video tutorial) ## 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!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. ### Introduction {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=0 :sec=00 :player=cld} | The following topics are covered in this video:What are transformations?Transformation types:On-the-fly transformationsName transformations (transformation templates)Eager transformationsIncoming transformationsOptimization: `f_auto`, `q_auto`StudioGetting help | ### What are transformations? {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=0 :sec=40 :player=cld} | 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 {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=1 :sec=27 :player=cld} | 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 {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=1 :sec=57 :player=cld} | 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 {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=2 :sec=49 :player=cld} | 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 {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=3 :sec=14 :player=cld} | Open this URL in a browser window: https://res.cloudinary.com/dam-fashion/image/upload/actfefhwqpv3i9gkb084.jpg. Use [Cloudinary's Media Inspector Chrome Extension](media_inspector_browser_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 Web Store](https://chromewebstore.google.com/detail/cloudinary-media-library/fakfhlanoeblenimbdkeinpkfbghdeff).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. ``` https://res.cloudinary.com/dam-fashion/image/upload/f_auto,q_auto/actfefhwqpv3i9gkb084.jpg ``` ### Resize {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=4 :sec=11 :player=cld} | 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. ``` https://res.cloudinary.com/dam-fashion/image/upload/f_auto,q_auto,w_800,c_fill/actfefhwqpv3i9gkb084.jpg ``` ### On-the-fly video optimization {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=4 :sec=49 :player=cld} | 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. ``` https://res.cloudinary.com/dam-fashion/video/upload/f_auto,q_auto,w_800/samples/elephants.mp4 ``` ### Named transformations (transformation templates) {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=6 :sec=01 :player=cld} | 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](https://console.cloudinary.com/console/media_library/search) 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 {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=6 :sec=40 :player=cld} | 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 {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=8 :sec=33 :player=cld} | 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. ``` https://res.cloudinary.com/dam-fashion/image/upload/t_Brad_Test/ikpt4a3yeljihfmrpcfz ``` ### Eager and incoming transformations {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=9 :sec=00 :player=cld} | **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 {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=11 :sec=50 :player=cld} | `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 {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=13 :sec=06 :player=cld} | 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 {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=14 :sec=14 :player=cld} | 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](https://console.cloudinary.com/app/settings/addons) with usage limits. Toggle the **Remove 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 {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=15 :sec=12 :player=cld} | 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 {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=assetsOnboardingTransformation :min=16 :sec=08 :player=cld} | For more training, visit the [Cloudinary Academy](https://training.cloudinary.com). 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](transformation_reference) we offer, as well as a link to [support](https://support.cloudinary.com/hc/en-us/requests/new), and the [Cloudinary Academy](https://training.cloudinary.com). ## Keep learning > **READING**: > > * Learn more about ways you can transform images in [Studio](dam_editing_and_transformations#studio). > * Get more information about [transformation templates](dam_editing_and_transformations#transformation_templates). > * Understand more about [named transformations](dam_admin_asset_management#named_transformations). #### 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.