> ## Documentation Index > Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt > Use this file to discover all available pages before exploring further. # Step 4: Resize transformations Your Kickstart Progress: Intro Step 1 Step 2 Step 3 Step 4 Step 5 The scale resize option (`c_scale`) you learned about in [Step 2](dev_kickstart_optimize#task_3_resize_your_image) 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_1_apply_different_automatic_resize_and_crop_options) * [Task 2: Try out some face-detection cropping 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): https://res.cloudinary.com//image/upload/c_scale,w_500/q_auto/f_auto/cld-sample-3.jpg 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](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. Check your results Here's what your transformed images should look like: Original (Optimized) Banner auto-crop Phone-sized fill crop Card shape with generative AI extended fill" title=">Card shape with generative AI extended fill" style="margin-right: 10px;display:block;" /> Card shape withgenerative AIextended fill Card shape withfixed-coloredpadding Auto-gradient Sample-3 Auto-gradient Sample Auto-gradient Sample-2 Auto-gradient Sample-4 Auto-gradient Sample-5 --- ### 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: https://res.cloudinary.com//image/upload/c_scale,w_500/q_auto/f_auto/cld-sample-3.jpg 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` Check your results Original (Optimized) Phone-sized face-focus fill cropping Face-focus auto-cropping & circle crop What's happening behind the scenes in all these resize transformations? * The examples in this section use a variety of different resize and focus (aka "gravity") options to decide which areas of the image to keep when the requested aspect ratio is different than the original image. For example: * A fill-crop will first scale down the image to fit the larger of the requested dimensions, and then crop the excess from the remaining dimension. A pad resize will scale the entire image down to entirely fit within both requested dimensions and then pad any excess with the requested color (or automatically select a fitting color based on the contents of the image). An auto-crop allows Cloudinary's AI mechanism to determine the best way to crop the image to fit the requested dimensions. * What gets cropped-out when required, depends on the requested "gravity", which determines which part of the asset to 'pull towards' or focus on. For example, the gravity can be a simple compass direction like north or southwest, or it can focus on faces, or it can be 'auto', which allows Cloudinary's AI mechanism to determine the most important objects in the image to focus on. * For simplicity, the tasks on this page used images, but you can also apply all of the above on videos. > **Learn more**: > > * [Image resize modes](resizing_and_cropping#resize_and_crop_modes) > * [Image resize gravity options](resizing_and_cropping#control_gravity) > * [Video resizing](video_resizing_and_cropping) > * [Face-detection-based transformations](face_detection_based_transformations)   > **Mark your progress:**: > > I saw the impact of various auto-resize transformations > I understand how face-detection gravity can be useful for resizing pics with people   I'm ready for the next step    ⇒