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.

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:

And here’s an example of how you might deliver this image with a direct transformation URL in HTML:

Option 2: Named transformation

To shorten and simplify this delivery, save the above set of transformations as a named transformation using the 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:

You can also reuse that same named transformation on different images:

Creating named transformations programmatically

To create a named transformation programmatically, use the 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:

Creating named transformations using the Transformation Builder

You can create all the transformations and optimizations described in this guide programmatically. However, for convenience, we'll focus on applying those transformations using the Transformation Builder.

Here's how to create named transformations for customization and optimization:

1. Open the Cloudinary Console.
2. From the Programmable Media product, click Transformation Center, then New Transformation.
   Note

   You can use sample assets or select your own in the Transformation Builder to preview how transformations look when applied.
3. 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.
4. Click Apply to view the assets with the transformations applied.
5. 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 Programmable Media navigation menu, click Manage Transformations.
   3. Find the named transformation, open the (3-dots) option menu, and enable it for images or videos.

Video tutorial

Watch a short video that shows how to create named transformations in the Transformation Builder for optimizing and customizing assets.

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.

Here's an example:

Original Hero image
Name: hero
c_pad,b_gen_fill,ar_16:9,w_2000
/f_auto/q_auto Carousel image
Name: carousel
c_auto,g_auto,ar_1:1,w_2000
/f_auto/q_auto

Focus on specific objects

Use the Cloudinary AI Content Analysis 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 box
Name:box_variation
w_550,h_450,c_crop,g_auto:box
/f_auto/q_auto Focus on the ring
Name:ring_variation
w_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.

Here's an example:

Original image Remove the BackgroundName: no_background
e_background_removal
/e_dropshadow
/bo_1px_solid_grey
/f_auto/q_auto Remove the BackgroundName: new_background
e_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):

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.

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.

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.

Here's an example:

• The original windy_sundress video:

• 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 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.

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 Improve visibility for colorblind users.