Editing and transformations

Cloudinary offers a selection of transformation and editing 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 30, by:

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

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

  • The preset wasn't defined correctly (for example a video preset with a transformation that's only valid for images).
  • The preset contains a transformation that's not supported for preview. If a preset can't be previewed, ask your administrator to make sure the preset 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 the it in the transformation editor or Advanced Editor.

Downloading a single transformed asset

In any Media Library view, i.e., Assets, Folders, Collections, and Moderation, you can download a single asset in several different forms, including its original and with a transformation template applied. From the (3-dot) 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 any Media Library view, i.e., Assets, Folders, Collections, and Moderation, 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 images.

The Media Editor enables you to make various types of edits on your images.

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.

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 Media Editor for images.

From this view, you can easily crop an uploaded image based on one of the available crop preset 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.

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 (Nexus only)

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:

From the asset management drill-down page, select the Edit icon from the URL bar.

OR

Select Edit from the (3-dot) options menu on the asset itself. (This navigation option to the Transformation Editor isn't available for images if you've opted in for early access to Studio.)

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.

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 Edit icon from the URL bar.

OR

Select Advanced Editor from the (3-dot) options menu on the asset itself. (This navigation option to the Advanced Editor isn't available for images if you've opted in for early access to Studio.)

by selecting the Advanced Editing action from either the Edit pull-down button on the asset management drill-down page or the (3-dot) options menu on the asset. You can

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)

An intuitive, user-friendly interface for applying transformations and AI-driven actions to multiple images. Create variations that you can download or deliver. Administrators can additionally save transformations as templates for future use when images are downloaded.

Keep in mind that any transformations you make in Studio, as well as any templates applied later on, will create asset variations without altering the original asset. This means that even users with Can view permissions can use Studio.

To open Studio for multiple images:

Select multiple images and hover over the Open Studio icon in the asset 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-dot) options menu on the image itself and select the action you want to start with from the nested menu:

Applying AI actions and transformations

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.

Studio enables you to perform any of the following transformation actions on your assets:

• Crop: Easily resize your image to a specific width and height. You can also use AI to automatically focus on the most interesting area and scale the image accordingly.
• Flip and rotate: Flip and rotate your images with one click.
• Remove Background: Effortlessly remove the background from your selected image(s), add a drop shadow and choose 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.
• Overlay Image: Add an overlay image of your choice from your product environment. Customize its width, placement in one of the four corners, and opacity.
• Remove Objects (Beta): Enter a prompt to identify and remove up to three objects across all assets in Studio (AI powered).
• 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 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.

Using your creations

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.
• If you're an administrator, you can save the transformations you created as a template from the kebab menu at the top right corner. Templates can be easily applied when downloading single and multiple images, and previewed from the asset management drill-down page.
  Note

  Administrators can alternatively create templates using the full range of Cloudinary transformation options by setting named transformations as transformation presets.