> ## 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. # Customize and optimize assets on delivery Cloudinary lets you store a master copy of your assets in your product environment and deliver optimized, customized variations on the fly. This page explains how to optimize and customize assets in preparation for delivery, with plenty of examples. To optimize and customize assets for delivery, you can: * **Apply transformations directly to your assets** and use the resulting delivery URLs to serve the enhanced variations. * **Create a named transformation**, which is a reusable set of transformations. You can then apply it to your assets and use the resulting delivery URL. While direct transformations work well for one-off use cases and if the transformation string is short and manageable, in most cases, we recommend using named transformations to manage delivery more effectively. Named transformations offer several advantages: * Shorter URLs, which are better for SEO. * Easier reuse across assets and projects. * Greater clarity when given meaningful names. > **TIP**: For more on delivering assets with named transformations, see the [product](ecommerce_workflows_product#deliver_product_assets_to_your_e_commerce_website) and [non-product](ecommerce_workflows_nonproduct#deliver_assets_to_websites) workflow pages. ## Compare direct transformations to named transformations Let’s say you want to apply a set of transformations to an image for a dynamic banner ad. For example: * Resize the image to a width of 850px and height of 1150px * Generatively fill the background to fit the bounding box * Remove the food and plate from the image * Add three text overlays using different fonts, sizes, and placements * Optimize the image’s format and quality ### Option 1: Direct transformation Here's the transformation string you'd apply: ``` c_scale,w_1500/w_850,h_1000,c_fill/c_pad,b_gen_fill,w_850,h_1150,g_south/e_gen_remove:prompt_plate/e_gen_remove:prompt_food/c_fit,co_white,l_text:Arial_85_bold:NEW%20LOCATION,w_600/g_north_west,x_60,y_60,fl_layer_apply/c_fit,co_white,l_text:Arial_75_line_spacing_-10:Treat%20yourself%20just%20around%20the%20corner,w_300/g_east,y_50,x_80,fl_layer_apply/c_fit,co_white,l_text:Impact_95_bold_line_spacing_-10:The%20Cafe%20Coffee,w_450/g_south_east,x_80,y_50,fl_layer_apply/f_auto/q_auto ``` And here’s an example of how you might deliver this image with a direct transformation URL in HTML: ![Dynamic banner](https://cloudinary-res.cloudinary.com/image/upload/c_scale,w_1500/w_850,h_1000,c_fill/c_pad,b_gen_fill,w_850,h_1150,g_south/e_gen_remove:prompt_plate/e_gen_remove:prompt_food/c_fit,co_white,l_text:Arial_85_bold:NEW%20LOCATION,w_600/g_north_west,x_60,y_60,fl_layer_apply/c_fit,co_white,l_text:Arial_75_line_spacing_-10:Treat%20yourself%20just%20around%20the%20corner,w_300/g_east,y_50,x_80,fl_layer_apply/c_fit,co_white,l_text:Impact_95_bold_line_spacing_-10:The%20Cafe%20Coffee,w_450/g_south_east,x_80,y_50,fl_layer_apply/f_auto/q_auto/restaurant_banner.jpg "thumb: w_300,dpr_2, width:300, popup:true, with_url:true, with_code:true") ### Option 2: Named transformation To shorten and simplify this delivery, save the above set of transformations as a named transformation using the [Transformation Builder](https://console.cloudinary.com/app/image/transformation_builder). Copy the transformation into the **Quick Edit** view and save it under a meaningful name, such as `billboard_ad`. Now, instead of a long URL, you can apply the same transformation like this: ![Dynamic banner - named transformation](https://cloudinary-res.cloudinary.com/image/upload/t_billboard_ad/restaurant_banner.jpg "thumb: w_300,dpr_2, width:300, popup:true, with_url:true, with_code:true") You can also reuse that same named transformation on different images: ![Dynamic banner - named transformation](https://cloudinary-res.cloudinary.com/image/upload/t_billboard_ad/wine_and_candles_dinner.jpg "thumb: w_300,dpr_2, width:300, popup:true, with_url:true, with_code:true") ![Dynamic banner - named transformation](https://cloudinary-res.cloudinary.com/image/upload/t_billboard_ad/v1743893134/elegant_romantic_dinner.jpg "thumb: w_300,dpr_2, width:300, popup:true, with_url:true, with_code:true") > **TIP**: To make the named transformation even more flexible, use [variables](user_defined_variables) instead of hardcoded text overlays. This allows you to dynamically swap out messages for localization, reuse them across campaigns, and tailor them for different audiences. ## Creating named transformations programmatically To create a named transformation programmatically, use the [transformation](admin_api#create_a_named_transformation) Admin API method. The following example defines a named transformation called `small_profile_thumbnail` that uses automatic cropping to resize assets to the required size for a particular application's thumbnail display: ```multi |ruby Cloudinary::Api.create_transformation('small_profile_thumbnail', {width: 100, height: 150, crop: "fill", gravity: "auto"}) |php_2 $api->createTransformation("small_profile_thumbnail", ["width" => 100, "height" => 150, "crop" => "fill", "gravity" =>"auto"]); |python cloudinary.api.create_transformation("small_profile_thumbnail", dict(width = 100, height = 150, crop = "fill", gravity = "auto")) |nodejs cloudinary.v2.api .create_transformation('small_profile_thumbnail', { width: 100, height: 150, crop: 'fill', gravity: 'auto' }) .then(result=>console.log(result)); |java api.createTransformation("small_profile_thumbnail", new Transformation().width(150).height(100).crop("fill").gravity("auto").generate(), ObjectUtils.emptyMap()); |csharp var createTransformParams = new CreateTransformParams(){ Name = "small_profile_thumbnail", Transformation = new Transformation().Width(100).Height(150).Crop("fill").Gravity("auto")}; cloudinary.CreateTransform(createTransformParams); |go resp, err := cld.Admin.CreateTransformation(ctx, admin.CreateTransformationParams{ Name: "small_profile_thumbnail", Transformation: "c_fill,g_auto,h_150,w_100"}) |curl curl \ -d 'transformation=w_100,h_150,c_fill,g_auto' \ -X POST \ https://:@api.cloudinary.com/v1_1//transformations/small_profile_thumbnail |cli cld admin create_transformation "small_profile_thumbnail" '{"width": 150, "height": 100, "crop": "fill", "gravity": "auto"}' ``` ## Creating named transformations using the Transformation Builder You can create all the transformations and optimizations described in this guide [programmatically](#creating_named_transformations_programmatically). However, for convenience, we'll focus on applying those transformations using the [Transformation Builder](https://console.cloudinary.com/app/image/transformation_builder). Here's how to create named transformations for customization and optimization: 1. Open the Cloudinary Console, click the **Image** product, then click **New Transformation** to access the **Transformation Builder**. > **TIP**: > > You can use sample assets or select your own in the **Transformation Builder** to preview how transformations look when applied. 2. Select the transformations you want to apply from the **Select Action** area. You can also click **Quick Edit** to manually add transformation strings. See a complete list in the [Transformation URL API reference](transformation_reference). 3. Click **Apply** to view the assets with the transformations applied. 4. Once finalized, save the named transformation and optionally enable it as a template for use in the Media Library. 1. Save the transformation with a meaningful name. 2. From the left navigation menu, click **Manage Transformations**. 3. Find the named transformation, open the (3-dots) option menu, and enable it for images or videos. ![Template](https://res.cloudinary.com/demo/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1739324122/docs/set_as_template.png "thumb: w_700,dpr_2, width:700, with_code:false, with_url:false, popup:true") ### Video tutorial Watch a short video that shows how to create named transformations in the **Transformation Builder** for optimizing and customizing assets. > **TIP**: In the Transformation Builder, you can override automatic crops by clicking the edit icon on the image and cropping manually. ## Adding optimization To add optimization to named transformations using the Transformation Builder: 1. Apply `f_auto` for automatic format optimization. * Click **Quick Edit**, enter `f_auto`, and click **Apply**. 2. Apply `q_auto` for optimal compression. * Select **Delivery -> Quality** in the **Select Action** section. * Choose a compression level: **Auto**, **Auto Best**, **Auto Good**, **Auto Eco**, **Auto Low**, or a numerical value (higher numbers apply less compression with higher quality; low numbers apply more compression with lower quality). ### Considerations when applying quality `q_auto` applies compression at the optimal level to make your asset as light as possible without compromising on visual quality. However, any level of compression presents some trade-off between quality and asset size. So: * **If keeping your website light is the highest priority**: Select a more aggressive compression level. * **If you need to maintain extremely high quality for a certain image**, such as a hero image that's displayed on high resolution viewports: Use the least aggressive compression algorithm, or even none at all. Here is an example of a photograph encoded using various automatic quality parameter values and the resulting file sizes: Original (569KB) q_auto:best (65.9KB) q_auto:good (56.9KB) q_auto:eco (45.0KB) q_auto:low:sensitive (39.6KB) q_auto:low (35.0KB) ## Adding customization and personalization You can configure transformations for different content types, such as hero images and carousels, as well as specialized areas within the website. Here are some customization and personalization examples you can configure as named transformations. We'll provide the transformation string you can enter in **Quick Edit** to reproduce the ones shown. ### Cropping and resizing assets Apply different crop and size transformations, depending on where you're delivering the asset, for example hero assets vs. carousel assets. > **TIP**: For responsive images, create multiple named transformations for different viewport sizes. Here's an example: Original Hero imageName: heroc_pad,b_gen_fill,ar_16:9,w_2000/f_auto/q_auto Carousel imageName: carouselc_auto,g_auto,ar_1:1,w_2000/f_auto/q_auto > **TIP**: The hero image uses `c_pad,b_gen_fill`. If you don't want to lose any of the image, use `pad` to add space to the shorter side. To maintain a natural look, use `gen_fill`, which expands the image and naturally fills the shorter side with AI-generated content. ### Focus on specific objects Use the [Cloudinary AI Content Analysis](cloudinary_ai_content_analysis_addon) add-on to specify a focus area, such as `box`, `ring`, `refrigerator` or `microwave`, which you can specify depending on the context. Here's an example: Original Focus on the boxName:box_variationw_550,h_450,c_crop,g_auto:box/f_auto/q_auto Focus on the ringName:ring_variationw_500,h_500,c_auto,g_auto:ring/f_auto/q_auto ### Background and drop shadow You can remove backgrounds or replace them with AI-generated content using the `e_backround_removal` and `e_gen_background_replace` transformations. You can also add a drop shadow effect. > **NOTE**: `e_background_removal` yields a high percentage of good results, which is valuable for large-scale operations. However, it's important to catch any that need improvement in the Creative Approval process. For more refined results, consider using the [Pexels](remove_the_background_image_editing_addon#banner) add-on (more costly) or [Final Touch](finaltouch). Here's an example: Original image Remove the BackgroundName: no_backgrounde_background_removal/e_dropshadow/bo_1px_solid_grey/f_auto/q_auto Remove the BackgroundName: new_backgrounde_gen_background_replace/c_scale,w_300/f_auto/q_auto ### Image overlays Apply another image in your product environment as an overlay for branding, personalization, or watermarking. Here's an example: * **Apply a watermark**: The `cloudinary_logo` named transformation applies the cloudinary logo `cloudinary_icon_blue` to images and videos. It scales the logo down to 50% of its original width, and turns it into a watermark by reducing the opacity to 70% and increasing the brightness to 50% using the `brightness` effect. The transformed image is then placed as a layer in the top-right corner of the base image and video (`l_cloudinary_icon_blue/c_scale,w_0.5/o_70/e_brightness:50/fl_layer_apply,g_north_east`): ![Image with transformed overlay](https://res.cloudinary.com/demo/image/upload/t_cloudinary_logo/guitar_end.jpg "thumb: w_500,dpr_2, width: 500, with_code:false, with_url:false, caption:The 'cloudinary_logo' named transformation applied, popup:true") ![Video with transformed overlay](https://res.cloudinary.com/demo/video/upload/t_cloudinary_logo/docs/mountain-aerial-view.mp4 "thumb: w_500,dpr_2, width: 500, with_code:false, with_url:false") ### Text overlays Overlay customized messages on your assets, such as engraved monograms, personalized gift messages, sales labels, or prices. Here's an example: * **Add a text overlay**: The `big_text_overlay` named transformation applies a white text with font Roboto and size 280 px to the bottom left corner of a video: `co_rgb:ffffff,l_text:Roboto_280_bold:Explore%0Athe%20mountains/fl_layer_apply,g_south_west,x_80,y_80`. ![Text overlay](https://res.cloudinary.com/demo/video/upload/t_big_text_overlay/nature_hike.mp4 "thumb: w_500,dpr_2, width:500, with_code:false, with_url:false") ### Trimming videos and removing sound Trim video clips and remove the sound, if needed. Here's an example: * **Standardize videos**: The `standard_video` named transformation trims the video to a length of 15 seconds, removes the sound, and optimizes for format and quality: `eo_15/ac_none/f_auto/q_auto`. ![Trim and remove sound](https://res.cloudinary.com/cloudinary/video/upload/t_standard_video/docs/customizedVariations.mp4 "thumb: w_500,dpr_2, width: 500, with_code:true, with_url:true, popup:true") ### Changing video orientation Deliver videos in different orientations while keeping key content visible using `g_auto`. This allows for scalable video cropping, ensuring your videos remain intact without requiring manual adjustments or specialized tools. > **TIP**: Visit the [automatic cropping demo](https://demo.cloudinary.com/video-compare/) to try it out on a variety of samples or on your own videos. Here's an example: * **The original** `windy_sundress` video: ![Original video](https://cloudinary-res.cloudinary.com/video/upload/windy_sundress.mp4 "thumb: w_500,dpr_2, width: 500, with_code: false, with_url: false") * **Resized for mobile**: The `mobile_video` named transformation applies a crop mode of `fill` to expand the image to fill the bounding box, and `g_auto` to automatically follow the main object in the video throughout. Crop to a width of 720 px and height of 1280 px: `c_fill,g_auto,w_720,h_1280`. ![Resized for mobile](https://cloudinary-res.cloudinary.com/video/upload/t_mobile_video/windy_sundress.mp4 "thumb: w_170,dpr_2, width: 170, with_code: false, with_url: false") * **Resized for tablets**: The `tablet_video` named transformation applies an aspect ratio of 1:1 and a crop mode of `fill` to expand the image to fill the bounding box. It sets the width to 1080 px, and uses `g_auto` to automatically follow the main object in the video throughout: `ar_1:1,c_fill,g_auto,w_1080`. ![Resized for tablets](https://cloudinary-res.cloudinary.com/video/upload/t_tablet_video/windy_sundress.mp4 "thumb: w_250,dpr_2, width: 250, with_code: false, with_url: false") ### Color accessibility Provide an option to view colorblind-friendly images. * Click **Quick Edit** in the Transformation Builder and enter the string `e_assist_colorblind:xray` or `e_assist_colorblind:xray`. * For more information, see [Enhancing color accessibility](ecommerce_best_practices#enhancing_color_accessibility). > **TIP**: > > See how a colorblind individual might view your images by applying **Simulate Colorblind** in the **Select Action** section of the Transformation Builder.