Image & Video APIs
Menu

Step 3: Your first transformations

Last updated: Apr-23-2025

Optimization is just the tip of the iceberg of what you can do with Cloudinary URL API parameters.

Transformations can adjust, improve or even redesign the look, feel and visual experience, of any original image or video to meet your UI needs — think of transformations as having your own personal programmatic UX designer.

Once you decide what types of transformations you want to apply for a particular use case, you can use that same transformation definition on multiple, even thousands of assets, so it's kind of like having infinite UI designer genies at your beck & call.

Let's start by adding some fun visual transformations onto the image you optimized in Step 2.

~4 minutes

Task 1: Watch what happens when you add a grayscale effect parameter to your image

Make sure you've got the URL (with your cloud name) from Step 2 open in a browser tab:

  1. Add /e_grayscale just before the /c_scale,w_500 component and reload the URL.
Tip
Each transformation component (the transformation parameters between each / /) is applied to the result of the previous component. In this task, you applied the effect transformation action to the original, and then the resizing action followed by the optimization action were applied to the grayscaled image.

Task 2: Now add a border to your black and white image

  1. After /e_grayscale, add /bo_40px_solid_green and reload the URL.

Task 3: Now add a text layer

Now you'll add the text: Good morning! on your image, including definitions for font, size, weight, alignment and color of the text layer.

For layer transformations, you also need a layer_apply component that tells Cloudinary where and how to apply the defined layer and closes the layer definition (it acts like the closing parentheses of your layer transformation).

For this example, you'll place it at (set its gravity to) the bottom right, offset by 60px in each direction.

  1. Just after the border transformation component (/bo_...), but before the resize (/c_scale) component, paste the string below:

    /l_text:Arial_100_bold_alignment_center:Good%0Amorning!,co_orange/fl_layer_apply,g_south_east,x_60,y_60

  2. Let's bring back the color. Delete the e_grayscale transformation component from your delivery URL and reload it.

Task 4: Change the format

Converting any image or video from one format to another is as easy as just changing the file extension!

  1. Remove the /f_auto from your URL, and change the extension of your URL from .jpg to .png and reload the URL.

    If you try to download or inspect, you'll see that you're now delivering a PNG file.

  2. Put the /f_auto back (after /q_auto) and reload.

    Now the format you actually deliver will be the one that Cloudinary's auto-format mechanism deems best for the requesting browser given the image, but taking into consideration the requested .png extension.

    If the image had any transparent or partially transparent pixels, the resulting format would also be one that supports transparency. For example, it would be likely to deliver a WEBP or AVIF file in most browsers, though it may still deliver PNG if that's deemed the best supported format for the requesting browser.

    But since this image doesn't have transparency, the resulting auto-format will be the one that results in the most performant file size. For example, depending on your account setup, the delivered image is likely to be a JPG or AVIF.

Mark your progress:

AltStyle によって変換されたページ (->オリジナル) /

✔️ Feedback sent!

✖️
How helpful was this doc page?

Thanks for submitting your rating. We got it!
We'd love to hear more. Tell us what you liked and how we can make this page even better:

*

Cloudinary is committed to protecting your information security. For details, see our privacy policy.

For additional assistance, open a support request.

Error

Unfortunately there's been an error sending your feedback.

Rate this page: