Programmable Media

Transformation basics (video tutorial)

Last updated: Feb-26-2024

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


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.

Transform assets on the fly

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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.

Chained transformation

Apply transformations to a video

Jump to this spot in the 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

Jump to this spot in the video  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

Jump to this spot in the video  3:18 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

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

Named Transformations
Simplify & standardize complex delivery URLs
Optimization Tips
Tips for delivering optimized images
Zoompan Effect
Apply the Ken Burns effect to zoom and pan on an image

 

Cloudinary Academy

 

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!

Rate this page: