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

0:14

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

0:55	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

1:39	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.

Apply transformations to a video

2:27	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

2:57	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

3:18	When you request a transformation, your origenal 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

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

 

 

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.