Step 4: Resize transformations

The scale resize option (c_scale) you learned about in Step 2 is great for pure optimization purposes, but more often than not, your app design will probably require delivering your visual assets at a predefined size and aspect ratio that won't always match your originals. That means you may need to crop or otherwise adjust your image and video sizes to fit your art design.

But resizing programmatically means you need to resize multiple assets without looking at the results of each asset and maybe not even knowing what they contain, yet you don't want to trust any random crop - you might cut off someone's head or the product you're supposed to be showing off!

Cloudinary offers several AI-based options for smart resizing and cropping.

• Task 1: Apply different automatic resize and crop options
• Task 2: Try out some face-detection cropping options

~4 minutes

Task 1: Apply different automatic resize and crop options

Let's try some alternative resize transformations. Make sure you have this transformation URL open in your browser (with your cloud name):

1. Try replacing c_scale,w_500 in the URL from above with each of the following to see how you can use the same original asset to generate a variety of different outputs for different needs:

   • c_auto,w_1200,ar_2.5,g_auto
     (Auto-crops to a banner shape keeping the main subjects in the crop.)
   • c_fill,w_500,ar_0.5,g_auto
     (Auto-crops to a portrait photo useful for a mobile phone display.)
   • c_pad,b_orange,w_500,ar_1
     (Scales to fit inside a 500px square 'card' and pads the excess with an orange color.)
   • c_pad,b_gen_fill,w_500,ar_1
     (Scales to fit inside a 500px square 'card' then uses generative AI to auto-extend the image to fill the entire space. Because this one does generative AI-processing on the fly, it may take a few seconds to generate this one the first time.)
     Tip

     b_gen_fill is just one of several generative AI transformations that Cloudinary offers.
     See AI in Action to learn more about our generative AI transformations and other AI-powered APIs.
   • c_pad,b_auto:predominant_gradient,w_400,ar_1
     (Scales to fit inside a 500px square 'card' and pads the excess with a gradient padding based on the predominant color in the image.)

2. Let's stick with that last transformation and check the results of the same transformation on different assets.

   Change the public ID from cld-sample-3 to cld-sample, cld-sample-2, cld-sample-4, and cld-sample-5, and check out the results for each.

Task 2: Try out some face-detection cropping options

1. Let's go back to the simple scale-cropping URL you started with at the beginning of Task 1 to experiment with some face-detection-based cropping:

2. Try each of the following resize transformations (replacing the previous resize transformations each time):

   • /c_fill,w_500,ar_0.5,g_faces
   • /c_auto,h_250,ar_1,g_faces/r_max