Online English Dictionary

A Simple Knowledgebase

• ADS

• CSS

• EXCEL

• IMAGE-SERVER

• SCRIPTS

• SEO

• WEB-PAGE-LANGUAGES

• WEB-SERVER

• WEBSITE-MONITORING-AND-BACKUP

IMAGE-SERVER | CLOUDINARY | IMAGE-TRANSFORMATION

Image transformation on the fly

The default Cloudinary asset delivery URL has the following structure:

https://res.cloudinary.com/<cloud_name>/<asset_type>/<delivery_type>/<transformations>/<version>/<public_id>.<extension>

Where:

cloud_name: The name of your Cloudinary account, a unique public identifier for URL building and API access.
asset_type: The type of asset to deliver. Valid values: image, video, or raw.
delivery_type: The storage or delivery type. Valid values: upload (the default delivery type for uploaded assets. In most cases, this delivery type indicates that the asset is publicly available), fetch (enables transforming and delivering remote images on the fly)
transformations: [optional] One or more comma-separated transformation parameters in a single URL component, or a set of chained transformations (separated by slashes). The derived file is also cached on the CDN and is immediately available to all subsequent users requesting the same asset.
version [Optional] You can include the version in your delivery URL to bypass the cached version on the CDN and force delivery of the latest asset (in the case that an asset has been overwritten with a newer file).
public_id: The unique identifier of the asset, including the folder structure if relevant.
extension [Optional] The file extension of the requested delivery format for the asset.

E.g.:

Convert image to grayscale / black white

Convert images to grayscale or black-&-white by setting the effect parameter to grayscale or blackwhite (e_grayscale / e_blackwhite in URLs).

https://res.cloudinary.com/onlinerechargedeal/image/upload/e_grayscale/v1652542163/2022/test002.jpg
https://res.cloudinary.com/onlinerechargedeal/image/upload/e_blackwhite/v1652542163/2022/test002.jpg https://res.cloudinary.com/onlinerechargedeal/image/upload/e_blackwhite/v1652671927/cloudinary.png

Resize dimensions

Using an integer value for w (width) or h (height) sets the new dimension to that number in pixels. For example, w_400 sets the width to exactly 400 pixels.
Using a decimal value for width or height sets the new dimension relative to the original dimension. For example, w_0.5 = 0.5×100 = 50% of the original width.
Using ih or iw as values sets the dimension to the initial height or initial width of the original image respectively. For example, w_iw sets the width to the same value as the original width of the image.
Aspect ratio: a:b where a signifies the relative width and b the relative height (e.g., ar_4:3 or ar_16:9).
Aspect ratio: a decimal value representing the ratio of the width divied by height (e.g., ar_1.33 or ar_2.5 or ar_1.0 which is perfect square)

E.g.
https://res.cloudinary.com/onlinerechargedeal/image/upload/w_400/v1652542163/2022/test002.jpg (image resized to width 400 pixel & aspect ratio preserved)
https://res.cloudinary.com/onlinerechargedeal/image/upload/h_400/v1652542163/2022/test002.jpg (image resized to height 400 pixel & aspect ratio preserved)
https://res.cloudinary.com/onlinerechargedeal/image/upload/w_0.5/v1652595774/2022/actor.png (image resized to width = 0.5 times of original width & aspect ratio preserved)

Resize & Crop

When changing the dimensions of an uploaded image by setting the image's height/width, you need to decide how to resize or crop the image to fit into the requested size. It is denoted by c_. Following values are supported.

fill: Resizes the image to fill the specified dimensions without distortion i.e. preserving aspect ratio. The image may be cropped as a result.
crop: Extracts a region of the specified dimensions from the original image without resizing it.
scale: Resizes the image to the specified dimensions may not retaining the original aspect ratio, so that image not cropped.
fit: Resizes the image to fit inside the bounding box specified by the dimensions, maintaining the aspect ratio.
pad: Resizes the image to fit inside the bounding box specified by the dimensions, maintaining the aspect ratio, and applies padding if the resized image does not fill the whole area.
thumb: Use the thumb mode with automatic gravity (g_auto) to apply more aggressive cropping than the fill mode. This mode attempts to further zoom in and crop out less interesting image regions when relevant in order to include the most interesting objects in the resulting derived image.

E.g.
https://res.cloudinary.com/onlinerechargedeal/image/upload/c_fill,w_400/v1652596410/2022/flower.jpg (image resized & aspect ratio always preserved as c_fill. Also image not cropped as height not mentioned)
https://res.cloudinary.com/onlinerechargedeal/image/upload/c_scale,w_400/v1652596410/2022/flower.jpg (image resized with same aspect ratio as height not mentioned, c_scale)
https://res.cloudinary.com/onlinerechargedeal/image/upload/w_400,h_350,c_fill/v1652542163/2022/test002.jpg (image cropped, but resized)
https://res.cloudinary.com/onlinerechargedeal/image/upload/w_400,h_350,c_crop/v1652542163/2022/test002.jpg (image cropped without resize)
https://res.cloudinary.com/onlinerechargedeal/image/upload/w_400,h_350,c_scale/v1652542163/2022/test002.jpg (image never cropped, but aspect ratio changed)
https://res.cloudinary.com/onlinerechargedeal/image/upload/w_300,c_fit/v1652542163/2022/test002.jpg (image perfectly resized to fit within given dimension)
https://res.cloudinary.com/onlinerechargedeal/image/upload/w_300,h_300,c_pad/v1652542163/2022/test002.jpg (image perfectly resized to fit given dimension & remaining area is filled with white background)
https://res.cloudinary.com/onlinerechargedeal/image/upload/ar_2.5,w_500,c_fill/v1652595873/2022/nature1.jpg (image resized & cropped to be placed within width 500 pixel & height = 500/2.5 = 250 pixel; aspect ratio preserved as c_fill;)
https://res.cloudinary.com/onlinerechargedeal/image/upload/ar_2.0,w_500,c_fill,g_south/v1652595873/2022/nature1.jpg (same as above, but focused to southern portion of main image as g_south)

Gravity positions for crops

When used with cropping modes that crop out part of an image, the gravity qualifier (g_) specifies which part of the original image to keep when one or both of the requested dimensions is smaller than the original. Values are:

The basic gravity value is specified by giving a compass direction to include: north_east, north, north_west, west, south_west, south, south_east, east, or center (the default value). E.g., north_east represents the top right corner.
g_face to automatically detect the largest face in an image and make it the focus of the crop.
g_faces to automatically detect all faces in an image and make it the focus of the crop.
g_auto: automatically focusing on the most interesting region of the original image that fits within the required dimensions.

flag (fl)

Alters the regular behavior of another transformation or the overall delivery behavior. You can set multiple flags by separating the individual flags with a dot (.).

fl_layer_apply: A qualifier that enables you to apply chained transformations to an overlaid image. The fl_layer_apply component not only acts as the closing bracket for the layer, but is also used to include any options that will control how the layer is placed on the base image, and any details regarding the relationship between the overlay element and the base image.
```
fl_layer_apply,<optional placement qualifiers>
```

Placement Qualifiers:

To determine the position of the new layer, you can add the gravity parameter to define the location to place the layer within the base image ('center' by default). The gravity parameter is added in the same component as the layer_apply flag.
```
fl_layer_apply,g_<compass direction>
```
To fine tune the exact location of the layer, you can offset the overlay from the focus of gravity by also adding the x and y coordinate offset parameters. These parameters accept either integer values representing the number of pixels to adjust the overlay position in the horizontal or vertical directions, or decimal values representing a percentage-based offset relative to the containing image (e.g., 0.2 for an offset of 20%).
```
fl_layer_apply,g_<compass direction>,x_<value>,y_<value>
```

Add Image on Image (Image overlays)

We can add image (called, overlay image) on another image (called, base image), similar as before. Default overlay type is an image. Else we've to mention the type, e.g., l_text

l_<public id of overlay>/fl_layer_apply

l_<public_id of layer>/<optional layer transformations>/fl_layer_apply,<optional placement qualifiers (of layers)>

https://res.cloudinary.com/onlinerechargedeal/image/upload/v1652671927/cloudinary.png (public_id = cloudinary)
https://res.cloudinary.com/onlinerechargedeal/image/upload/v1652672819/2022/cloudinary.jpg (if overlay image stays within folder, then we replace slash(/) with colon(:), e.g. public_id = 2022:cloudinary)

Adding Text on Images (Text overlays)

We can add text on the image using l_text: option. Required paramaters are font_family, font_size, font_weight, font_style, font_decoration, stroke, letter_spacing, line_spacing. All these styling options are added with underscore (_)

font_family: (required) the name of any universally available font (E.g., Arial, Times, Impact, Verdana, Neucha etc) or any custom font. To use custom font, we've to upload it to Cloudinary Media Library (root directory) as an authenticated asset. (See our previous page that how to upload a file as an authenticated asset).
font_size: (required) the size of the text in pixels.
font_weight: the font weight. Possible values: normal (default), bold, thin, light.
font_style: the font style. Possible values: normal (default), italic.
font_decoration: the font decoration type. Possible values: normal (default), underline, strikethrough.
stroke: Whether to include an outline stroke. Set the color and weight of the stroke with the bo_ (border) & co_ (color) parameter. Possible values: none (default), stroke.
letter_spacing_<value>: the spacing between the letters, in pixels.
line_spacing_<value>: the spacing between multiple lines, in pixels.

l_text:<text styling options>:<text_to_write>/<optional transformations>/fl_layer_apply,<optional placement qualifiers>

Multiple Overlays (image & text)

Base Image: https://res.cloudinary.com/onlinerechargedeal/image/upload/v1652596410/2022/flower.jpg

Overlay image: https://res.cloudinary.com/onlinerechargedeal/image/upload/v1652676480/2022/couple.jpg
cropped to a 150x150 circle that includes only the detected faces.
```
l_2022:couple/c_crop,g_faces,h_150,w_150/r_max/fl_layer_apply,g_north_east
```
Overlay image: https://res.cloudinary.com/onlinerechargedeal/image/upload/v1652671927/cloudinary.png
with a relative width of 80% of the base image (fl_relative) and an opacity of 50% and a brightness of 100. fl_relative specifies percentage-based width & height parameters of overlays (e.g., w_0.5 = 0.5×100 = 50%) are relative to the size of the base image instead of to the original size of the overlaying image itself.
```
l_cloudinary/c_scale,fl_relative,w_0.8/o_50/e_brightness:100/fl_layer_apply
```
Overlay text: A text string "Sample" in bold 'Impact' font with a size of 40 pixels, placed at a distance of 20 pixels from the bottom of the base image. Color (co_) white
```
l_text:impact_40_bold:Sample,co_white/fl_layer_apply,g_south,y_20
```

https://res.cloudinary.com/onlinerechargedeal/image/upload/l_2022:couple/c_crop,g_faces,h_150,w_150/r_max/fl_layer_apply,g_north_east/l_cloudinary/c_scale,fl_relative,w_0.8/o_50/e_brightness:100/fl_layer_apply/l_text:impact_40_bold:Sample,co_white/fl_layer_apply,g_south,y_20/v1652596410/2022/flower.jpg

Nested Overlays

Layers can be nested within layers. Each layer must have its own layer (start with l_<overlay type> & ends with fl_layer_apply components), and the inner layer must be closed before the outer one, like with any nested programming statement.
https://res.cloudinary.com/onlinerechargedeal/image/upload/l_cloudinary/c_scale,w_150,e_blackwhite/l_cloudinary/c_scale,w_50/fl_layer_apply/fl_layer_apply,g_north_east/v1526244803/sample.jpg

Prepaid Recharge Plans | Recharge & Bill Payment Offer