Angular image manipulation


After you or your users have uploaded image assets to Cloudinary, you can deliver them via dynamic URLs. You can include instructions in your dynamic URLs that tell Cloudinary to manipulate your assets using a set of transformation attributes. All manipulations are performed automatically in the cloud and your transformed assets are automatically optimized before they are routed through a fast CDN to the end user for optimal user experience.

For example, you can resize and crop, add overlay images, blur or pixelate faces, apply a large variety of special effects and filters, and apply settings to optimize your images and to deliver them responsively.

Cloudinary's Angular libraries simplify the generation of transformation URLs, and include special components and directives for easy embedding of assets in your Angular application.

Note: In general, the transformation syntax for the Angular SDK (for Angular 2 and later) and AngularJS SDK (for Angular 1) are very similar. Differences are noted in this documentation where relevant).

This following sections describe:

See also: Angular video manipulation

Deliver and transform images

You can deliver your images using the cl-image component or via cl-src or cl-href attribute directives.

The cl-image component

The most common way to deliver images is using the cl-image component, which automatically generates an <img> HTML tag with the requested image:

   <cl-image public-id="mypic" class="thumbnail inline" format="jpg">

is compiled by Angular to:

   <cl-image _ngcontent-ywn-2="" public-id="mypic" class="thumbnail inline" format="jpg" ng-reflect-public-id="mypic">
        <img src="{cloud_name}/image/upload/mypic.jpg">

Chaining transformations

You can add transformations directly to your <cl-image> component. In that case, all transformations will be in a single, flat component of the resulting URL source. You can also add optional <cl-transformation> components that will be used as chained transformations (each transformation is applied to the result of the previous transformation).

If you include transformations in both the <cl-image> and <cl-transformation> components, the transformations from the <cl-image> component are added as the last chain in the resulting URL source.

For example, the following code crops the image to 150x150, rounds the corners, applies a sepia effect, adds text to the top center of the resized image, and then rotates the entire result by 20 degrees.

 <cl-image public-id="mypic" class="thumbnail inline" angle="20" format="jpg">
        <cl-transformation height="150" width="150" crop="crop" effect="sepia" radius="20">
        <cl-transformation overlay="text:arial_60:This is my picture" gravity="north" y="20">

is compiled by Angular to:

<cl-image public-id="mypic" class="thumbnail inline" format="jpg" angle="20" 
        <img src="{cloud_name}/image/upload/c_crop,e_sepia,h_150,r_20,w_150/g_north,l_text:arial_60:This is my picture,y_20/a_20/mypic.jpg">

For more information on image transformations, see Applying common image transformations using Angular.

Image attribute directives

Instead of using the <cl-image> component to generate a complete tag, you can use the clSrc and clHref (or cl-src and cl-href for AngularJS) attribute directives to directly transform the given public ID or remote URI to a cloudinary image src or link href attribute.

For example:

<img clSrc="" type="fetch" fetch-format="auto" quality="auto">

Will be compiled by Angular to:

<img clSrc="" fetch-format="auto" quality="auto" type="fetch" 


<link rel="shortcut icon" cl-href="{URL_of_public_image}" type="fetch" effect="sepia" width="16" height="16" crop="fit"/>

Will be compiled by Angular to:

<link rel="shortcut icon" cl-href="{URL_of_public_image}" type="fetch" effect="sepia" 
 width="16" height="16" crop="fit"
 href ="{your cloud name}/image/fetch/c_fit,e_sepia,h_16,w_16/{URL_of_public_image}">

Apply common image transformations using Angular

This section provides an overview and examples of the following commonly used image transformation features, along with links to more detailed documentation on these features:

Keep in mind that this section is only intended to introduce you to the basics of using image transformations with Angular.

For comprehensive explanations of how to implement a wide variety of transformations, see Image transformations.
For a full list of all supported image transformations and their usage, see the Image transformation reference.


  • The transformation reference shows all transformation options using snake_case, but the Angular SDK transformation attributes support kebab-case. You can apply the kebab-case style to all transformation attributes.

  • If you find that any of the Cloudinary transformation attributes conflict with attribute directives from another package, you can prefix the transformation attributes with cld. For example, instead of responsive you can use cld-responsive.

Resizing and cropping

There are a variety of different ways to resize and/or crop your images, and to control the area of the image that is preserved during a crop.

The following example uses the fill cropping method to generate and deliver an image that completely fills the requested 250x250 size while retaining the original aspect ratio. It uses face detection gravity to ensure that all the faces in the image are retained and centered when the image is cropped:

<cl-image public-id="family_bench.jpg" >
  <cl-transformation width="250" height="250" gravity="faces" crop="fill">

Original image before face recognition cropping Original image Fill cropping with 'faces' gravity Fill cropping with 'faces' gravity

For details on all resizing and cropping options, see resizing and cropping images

Converting to another image format

You can deliver any image uploaded to Cloudinary in essentially any image format. There are 3 main ways to convert and deliver in another format:

  • Specify the image's public ID with the desired extension.
  • Explicitly set the desired format using the fetch_format parameter.
  • Use the auto fetch_format to instruct Cloudinary to deliver the image in the most optimized format for each browser that request it.

For example, deliver a .jpg file in .gif format:

<cl-image public-id="sample.gif" >


Let Cloudinary select the optimal format for each browser. For example, in Chrome, this image delivers in .webp format.

<cl-image public-id="cloud_castle.jpg" >
  <cl-transformation width="350" fetch_format="auto" crop="scale">

For more details see image format conversion

Applying image effects and filters

You can select from a large selection of image effects, enhancements, and filters to apply to your images. The available effects include a variety of color balance and level effects, tinting, blurring, pixelating, sharpening, automatic improvement effects, artistic filters, image and text overlays, distortion and shape changing effects, outlines, backgrounds, shadows, and more.

For example, the code below applies a cartoonify effect, rounding corners effect, and background color effect, and then scales the image down to a height of 300 pixels.

<cl-image public-id="actor.jpg" >
  <cl-transformation effect="cartoonify">
  <cl-transformation radius="max">
  <cl-transformation effect="outline:100" color="lightblue">
  <cl-transformation background="lightblue">
  <cl-transformation height="300" crop="scale">
An image with several transformation effects

For more details on the available image effects and filters, see Applying image effects and filters

Adding text and image overlays

You can add images and text as overlays on your main image. You can apply the same types of transformations on your overlay images as you can with any image and you can use gravity settings or x and y coordinates to control the location of the overlays. You can also apply a variety of transformations on text, such color, font, size, rotation, and more.

For example, the code below overlays a couple's photo on a mug image. The overlay photo is cropped using face detection with adjusted color saturation and a vignette effect applied. The word love is added in a pink, fancy font and rotated to fit the design. A balloon graphic is also added. Additionally, the final image is cropped and the corners are rounded.

<cl-image public-id="coffee_cup.jpg" >
  <cl-transformation width="400" height="250" gravity="south" crop="fill">
  <cl-transformation overlay="nice_couple" width="1.3" height="1.3" gravity="faces" flags="region_relative" crop="crop">
  <cl-transformation effect="saturation:50">
  <cl-transformation effect="vignette">
  <cl-transformation flags="layer_apply" width="100" radius="max" gravity="center" y="20" x="-20" crop="scale">
  <cl-transformation overlay="balloon" height="55">
  <cl-transformation effect="hue:-20" angle="5">
  <cl-transformation flags="layer_apply" x="30" y="5">
  <cl-transformation overlay="text:Cookie_40_bold:Love" effect="colorize" color="#f08">
  <cl-transformation angle="20" flags="layer_apply" x="-45" y="44">
  <cl-transformation width="300" height="250" x="30" crop="crop">
  <cl-transformation radius="60">
An image with many transformations and overlays applied

Image optimizations

By default, Cloudinary automatically performs certain optimizations on all transformed images. There are also a number of additional features that enable you to further optimize the images you use in your Angular application. These include optimizations to image quality, format, and size, among others.

For example, you can use the auto value for the fetch-format and quality attributes to automatically deliver the image in the format and quality that minimize file size while meeting the required quality level. Below, these two parameters are applied, resulting in a 50% file size reduction (1.4MB vs. 784KB) with no visible change in quality.

<cl-image public-id="pond_reflect.jpg" >
  <cl-transformation quality="auto" fetch_format="auto">
50% file size optimization using auto format and auto quality features

For an in-depth review of the many ways you can optimize your images, see Image optimization

Responsive image settings

Responsive web design is a method of designing websites to provide an optimal viewing experience to users, irrespective of the device, window size, orientation, or resolution used to view it. Ensuring that optimal experience means you should avoid sending high resolution images that get resized client-side, with significant bandwidth waste for users of small displays. Instead, you should always deliver the right size image for each device and screen size.

For example, you can ensure that your each user receives images at the size and device pixel ratio (dpr) that fit their device using the auto value for the dpr and width attributes. The auto value is replaced with actual values on the client side based on the actual browser settings and window width:

    <cl-transformation effect="art:hokusai"></cl-transformation>
    <cl-transformation border="3px_solid_rgb:00390b" radius="20"></cl-transformation>

Cloudinary offers several options for simplifying the complexity of delivering responsive images. For a detailed guide on how to implement these options, see Responsive images.

Update assets dynamically

You can update image and video assets dynamically by setting a transformation attribute for an event. This causes the underlying native elements to reload with the new transformations.

For example, the following code sets the opacity transformation attribute of the Cloudinary image to 50% when hovering on top of an element:

    (mouseenter)="photo.isMouseOver = true"
    (mouseleave)="photo.isMouseOver = false"
    [attr.opacity]="photo.isMouseOver ? '50' : null" >