Editing and transformations

Cloudinary offers a selection of transformation tools to cater to various needs and preferences. You can choose the tool that best aligns with your specific circumstances.

This table describes the various options:

Transformation templates

Applying a transformation template to an asset generates a transformed asset, which is a copy of the original, modified according to the pre-defined transformations set in the transformation template.

Your organization likely has standards for formatting, sizing, watermarking, cropping assets, etc. If you're repeatedly making the same adjustments to your assets, then transformation templates can reduce repetition in your workflow, while ensuring that organizational standards are met.

Several transformation templates are provided by default. Your administrator can replace these with their own, up to a maximum of 60, by:

• Saving transformations created in Studio as templates.
• Setting named transformations as transformation templates.
  Note

  If you can't preview assets when applying a certain transformation template, it may be because:

  • The template wasn't defined correctly (for example a video template with a transformation that's only valid for images).
  • The template contains a transformation that's not supported for preview. If a template can't be previewed, ask your administrator to make sure the template was set up correctly.

    In either case, you can still download the asset or open it in a new tab.

Previewing transformed assets

In the Download Options tab of the asset management drill-down page, several transformation templates are listed, enabling you to see how the selected asset would look with those transformations applied.

You can click the template thumbnail to preview the transformed asset. For any displayed transformation template, you can perform operations such as opening the transformed asset in a new tab, downloading it, copying the URL, or further editing it in the transformation editor or Advanced Editor.

Downloading a single transformed asset

In the Assets, Folders, Collections, and Moderation Media Library pages, you can download a single asset in several different forms, including its original and with a transformation template applied. From the (3-dots) options menu on the asset, open the Download nested menu and click on the transformation template you want to apply on download.

Downloading transformed assets in bulk

In the Assets, Folders, Collections, and Moderation Media Library pages, you can download multiple assets together, with the same transformation template applied. Select the desired assets and hover over the Download icon in the assets toolbar. All the available transformation templates are listed under Templates. Choose one to generate a ZIP file with transformed assets.

Media Editor

From the asset management drill-down page, you can navigate to a Media Editor for editing images and trimming videos.

When you're finished with your edits, you can either:

• Download the edited version without modifying the original.
• Click Save to overwrite the original asset with your edited version while keeping its metadata. If backups are enabled for your product environment, then you'll be able to easily revert to a previous version if needed.
• Save the edited version as a new asset with the same metadata and in the same folder as the original. You can use the public ID (and display name if your product environment uses dynamic folder mode) that was generated for you based on the original asset with a random suffix added, or you can enter your own unique one.

Edit images

When an image is displayed in the asset management drill-down page, you can click the Edit pull-down button and select the Edit Image action to open the Studio interface for a single asset.

From this view, you can easily crop an image based on one of the available crop pre-set aspect ratios, manually set a required crop width and height, or just manually resize the image using the crop handlebars. You can also choose to flip or rotate the image. In addition, you can apply enhancements to the image, such as adjusting colors, contrast and brightness, and highlighting edges and fine details.

The options in the Media Editor enable you to easily make these simple modifications without an external editing tool or the need to request a designer's assistance.

Trim videos

When a video is displayed in the asset management drill-down page, you can click the Edit pull-down button and select the Trim Video action to open the Media Editor for videos.

From this view, you can easily take off part of the beginning or end of a video clip. Move the left or right handles of the slider to trim your video.

Transformation and Asset Details Editor

The Edit page enables you to experiment with the various transformations available for the selected image or video using simple UI elements in the transformation editor and to view and edit asset details.

To open the Edit page:

Navigate to the Download Options tab on the asset management drill-down page. Select Edit Transformation from the (3-dots) option menu next to the original asset or a listed transformation template. If you chose a template, its transformations apply in the editor, allowing you to add more transformations as needed.

Using the transformation editor

The most common transformations are displayed on the page. There are 3 additional links you can click to create more complex transformations:

• More options: Set additional transformations or transformation flags.
• Add overlay & watermark: Specify another asset in your Media Library to add as an overlay (or underlay) on the current asset, and specify transformations to apply to the selected overlay asset. You can also click the More options link within the overlay section to access additional transformations for the overlay.
• Chain another transformation: Chaining enables you to define another set of transformations that will be applied on the result of the first set.

When you change settings on any of the transformation controls, a button is displayed on the preview prompting you to refresh the preview so that you can see the new variation of your asset. In most cases, it makes sense to first set all the transformation settings you want to apply, and only then refresh the preview. When you refresh the preview, the transformation code displayed below the preview is also updated, enabling you to copy the transformation URL or the transformation code for any SDK.

If you use the asset variation outside the Media Library (open in a browser tab, download, etc.), a derived asset is generated from the original asset based on applied transformations. It doesn't change the original asset, nor is it treated as a new asset in your Media Library. You can view all derived assets that were generated from a particular asset by clicking the View derived image/video button at the top of the Edit page.

For details on all available transformations and how they are used within delivery URLs, see the Image transformations and Video transformations guides.

Editing asset details

From the Edit page, users with a role that includes edit permissions for the asset can adjust data that is stored with your asset, including:

• Add or edit face or custom coordinates. These coordinates are used to determine the area of focus for cropping, overlays, and other transformation features when the gravity parameter is set to face/faces or custom in a delivery URL.
• Set an override quality level for a specific asset. The absolute quality level set here will be used for that asset instead of Cloudinary's auto-quality algorithm when quality is set to auto in a delivery URL.
• List, preview and restore backed up versions. With backup enabled, uploaded assets are copied to a backup location and version history is maintained if an asset is overwritten or deleted. You can preview previous versions, even for deleted assets, helping you to choose which version to restore.
• View derived images: View and mange variations of the original asset, created by applying transformations and opening the resulting assets outside the Media Library. You can delete, download and view derived assets. Also, re-use base transformations by adding them to transformation templates (previously known as presets).

Users with an Admin role or with Can Manage permissions for the relevant folder can also Delete the asset.

Advanced Editor (Transformation Builder) early access

If the Transformation Builder (Beta) is enabled for early access by your administrator, you can utilize the Advanced Editor (Transformation Builder) to create variations of the selected image or video. Create variations of your asset by applying transformations using the user-friendly UI elements.

To open the Advanced Editor:

From the asset management drill-down page, select the Advanced Editing action from the Edit pull-down button on the asset management drill-down.

OR

Navigate to the Download Options tab on the asset management drill-down page. Select Edit Transformation from the (3-dots) option menu next to the original asset or a listed transformation template. If you chose a template, its transformations apply in the editor, allowing you to add more transformations as needed.

The new Transformation Builder offers the same capabilities as the Transformation editor with an improved, simple and easy to use interface, and has support for most common transformation actions. If the transformation action you are trying to apply is not listed, you can add an Additional Transformation action to specify your transformation.

The additional functionality offered by the new Transformation Builder can streamline your workflow. Previously, when applying transformations to an asset using the Transformation Editor, you were only able to preview it, download it, or open it in a new tab. Now, with the new Transformation Builder, you can also easily save the asset variation to change/overwrite the original asset in the Media Library. In addition, you can save an image variation as a new asset.

The following sections help you get started with the Transformation Builder, and show how to work with several transformations. Follow the steps shown in the animations, or follow the written instructions below each animation. The written steps walk you through the process shown in each animation, with some additional clarifications.

How to apply transformations:

0:00	To open the Transformation Builder, from the Manage page, select Advanced Editing (Transformation Builder) from the Edit Image drop-down (or, you can select Advanced Editing from the (3-dots) options menu of the asset you want to edit).
0:06	Click Start Creating.
0:08	If it's the first transformation you're adding, select a transformation from the Select Action pane.
0:13	Depending on the action you select, there may be additional options that you can set. (You can click Discard changes to revert any transformations that you haven't yet applied.)
0:24	If you've already added a transformation, you can add another transformation by clicking + Add Action from the Transformation pane to display the Select Action pane.
0:34	Click Apply to add the new transformation to the URL and preview the asset with transformations applied. (Click Apply and Close to also close the Select Action pane.)

How to delete a transformation:

From the Transformation pane, open the (3-dots) options menu next to the transformation you want to delete and click Delete.

How to apply an image overlay:

0:00	From the Transformation pane, click + Add Action.
0:07	From the Select Action pane, select Image Layer.
0:11	Enter the Public ID of the image you want to overlay, and set the other available options (Type, what to Focus on, Placement, X/Y Offset, and Blend Mode), and apply those settings.
0:35	To further format the overlay if it's, for example, too big, select +Add Layer Action.
0:38	From the Select Action pane, select the transformation you want to apply to the image overlay, set any additional options for that transformation, and click Apply to add the new transformation to the overlay and preview the applied transformations. You can repeat the last two steps to add more transformations to your overlay until it looks how you want it to.

How to apply an unlisted transformation:

0:00	From the Transformation pane, click + Add Action.
0:08	From the Select Action pane, click Additional Transformations.
0:12	Add the string that specifies the transformation you want to add. Follow the examples to enter a valid transformation, or look up the available transformation options with examples and syntax details in the Transformation reference.

How to copy the URL, download, or save your transformation:

Once you're satisfied with the variation you've generated by applying your desired transformations, save the changes you made to overwrite the original asset keeping the original metadata, download your derived asset, or copy the URL to the derived asset and open in a new tab. If you're working with an image, you can save the variation as a new original in the same folder and with the same metadata.

Studio (images only)

A user-friendly interface for applying transformations and AI-driven actions to multiple images simultaneously. Generate variations for download, or for delivery using the transformed images' URLs.

You can create variations by either starting from scratch with your own transformations or using pre-defined transformation templates set up by your administrator. Using templates may be preferred, as they may enforce specific standards established within them. You can also start by applying a template and then adding further transformations in Studio.

Administrators can additionally create and save templates, and modify templates that aren't marked as View only. Templates can be applied outside of Studio when downloading an image from the asset's (3-dots) options menu or the Download Options tab of the asset management drill-down page.

Keep in mind that transformations or templates applied in Studio generate variations without altering the original asset. This means that Studio access is available even to users with view-only permissions.

Getting started with Studio

You can start with an empty Studio instance, or you can choose single or multiple images to open in Studio for immediate transformation. The transformations and AI-driven actions you select will be applied to all images open in the Studio interface.

Moreover, you can seamlessly Add more images to the Studio interface at any time, and any past or future actions you apply in Studio during that session will be carried over to these additional images, as well.

To open an empty instance of Studio:

Choose Studio in the Product Navigation menu and select the action you want to perform. Inside Studio, you'll receive a prompt to add images and begin transforming.

To open Studio for multiple images:

Select multiple images and hover over the Open Studio icon in the assets toolbar. From the drop-down menu, choose the tool you want to apply:

To open Studio for a single image:

Hover over Edit from the (3-dots) options menu on the image itself and select the action you want to start with from the nested menu:

Applying AI actions and transformations

Studio enables you to perform any of the following transformation actions on the images that are open in Studio:

• Resize & Crop: Choose a standard or custom aspect ratio, then adjust the width and height. Pick from three cropping modes:
  • Fit: Resize the image to fit within the bounding box while preserving the original aspect ratio. This option adds padding between the image and the bounding box, which you can customize using Generative Fill to automatically extend the image in that area using generative AI. You can also navigate to Studio's Background action to color the padded area or use your own image in the background.
  • Fill: Resize the image to fill the specified dimensions without distortion, which may result in cropping.
  • Crop: Extract a region of the specified dimensions from the original image without initial resizing.
  • For both Crop and Fill, you can activate the Smart Crop option to automatically focus on the most interesting area, preventing the loss of essential parts of the image during cropping.
• Flip and rotate: Flip and rotate your images with one click.
• Background: First, effortlessly remove the background from your chosen image(s). Then, optionally apply a drop shadow and select a background color or image.
  Important

  Background removal, powered by an add-on with specific limits, counts against your monthly quota when applied within Studio. If you've reached your monthly cap and need to remove more backgrounds, contact your administrator to upgrade your subscription.
• Image Overlay: Add an overlay image of your choice from your product environment. Customize its width, placement in one of the four corners, and opacity.
• Generative AI (Beta): Restore and mend imperfections, and recolor, remove, or replace elements in your images as specified by entering a prompt.
• Enhance: Instantly improve your image by adjusting colors, contrast, brightness, and sharpness. Highlight edges and fine details for a visually enhanced result.

You can combine most transformation actions, except for background removal and object removal, which can't be applied together.

Here's an example of a transformation that consists of several actions: cropping to a width and height of 40 px and adding an overlay image:

You can toggle between two views. One shows the images in a grid layout and the other pins one of the images in the center with the others showing as thumbnails. Click any thumbnail to pin it in the center.

You can also compare the asset variation created in Studio with the original assets. Press and hold the button to view the original asset, and release it to see the asset with your applied transformations.

Working with transformation templates

A transformation template is a set of pre-defined transformations that can be applied to assets across various contexts, including within Studio.

• To apply templates to images open in Studio, click on Templates and then select one from the available options. If you don't have any templates yet, ask your adminstrator to create one for you.

• To deselect the template, click the reset button next to the Templates title.

• While working on a template, you can switch to a different one. However, this action will discard the transformations applied by the original template.

• You may use transformation templates as a base and then add further transformations, as described in the previous section.

  • When applying a template and adding your own transformations, ensure you follow that sequence. Selecting a template will overwrite any previous edits you made.

Once satisfied with your asset variations, download or deliver the generated image variations from Studio, as outlined below.

Using your asset variations

When you're satisfied with your transformations, you can:

• Download the asset variations you created as a ZIP file.
• Download the delivery URLs of your variations as a CSV file.
• Copy the URL of an individual variation from its kebab menu.