Transformation basics (video tutorial)
Last updated: Sep-02-2024
On this page:
Overview
Watch this tutorial to learn the basics of transforming media on the fly. See how to change the dimensions of images and videos, and apply effects simply by changing the URL.
Video tutorial
Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
Transform assets on the fly
When you upload your images and videos to Cloudinary, you can access them using a URL. You can apply a transformation to your assets on the fly by adding a set of transformation parameters into the URL. A transformation can change many things about the asset, including its color, brightness, angle and border, plus, amongst others, duration speed and volume for videos. Transformations are also used for optimization, reducing size, changing formats and applying compression. |
Apply transformations to an image
To resize an image on the fly you can use the ar_ parameter to change the aspect ratio (ar_2:3 ) and the w_ parameter to change the width (w_500 ). To avoid squashing the image, use the c_fill parameter. Use automatic gravity (g_auto ) to let Cloudinary AI decide what to focus on, rather than the center of the image. Here's the whole transformation: ar_2:3,c_fill,g_auto,w_500 . |
Chaining transformations
You can chain transformations together in separate components, separated by a forward slash. For example, use the generative remove effect to remove the dog's tail by adding the e_gen_remove parameter (e_gen_remove:prompt_tail\ar_2:3,c_fill,g_auto,w_500 ). Each chained component applies its action to the result of the previous one. |
![Chained transformation Chained transformation](https://res.cloudinary.com/demo/image/upload/e_gen_remove:prompt_tail/ar_2:3,c_fill,g_auto,w_500/e_grayscale/bo_15px_solid_brown,r_30/b_black/co_brown,l_text:great%20vibes_52:Wish%20you%20were%20here.../fl_layer_apply,g_north,y_60/a_-5/c_scale,w_200/docs/family-beach.png)
Apply transformations to a video
You can apply transformations to videos in the same way. Here's an example of a text overlay. Use the l_ parameter for the overlay (l_text:times_80_bold:Beach%20Life ), and the fl_layer_apply parameter to specify its position (fl_layer_apply,g_north,y_25 ): |
Apply optimization transformations
You can apply transformations to optimize the delivery of assets. Let Cloudinary decide the best format using f_auto , and the best amount of compression to reduce the file size without impacting visual quality using q_auto . |
Delivery lifestyle
When you request a transformation, your original asset remains intact, and a new derived version of the asset is created. Each new transformation that you request counts towards your quota, but because derived assets are cached on a CDN, you won’t be charged again for requesting the same URL. Any slight change to the URL, though, is counted as a new transformation, even if the result is the same. | |
Keep learning
Related topics
- See all transformation parameters in the Transformation URL API reference.
- Take a look at the image and video transformation guides.
- Discover how transformations are counted.
If you like this, you might also like...
Named Transformations
Simplify & standardize complex delivery URLsOptimization Tips
Tips for delivering optimized imagesZoompan Effect
Apply the Ken Burns effect to zoom and pan on an image
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.
✖️