Cloudinary

ImageKit can translate transformations written in Cloudinary's syntax to ImageKit's syntax. Learn how to use a URL-rewriter on this page.

Beta feature This feature is currently in beta. Some transformations may not work as expected.

Supported Transformations

The following Cloudinary transformations are supported for translation:

Cloudinary transformExample translationRemarks

width

  • w_100 => w-100

height

  • h_100 => h-100

aspect ratio

  • ar_2.5 => ar-2.5-1

  • ar_3 => ar-3-1

  • ar_4:3 => ar-4-3

gravity

  • g_north => fo-top

  • g_center => fo-center

  • g_auto => fo-auto

  • g_face => fo-face

Supported values:

  • north

  • south

  • east

  • west

  • north_west

  • north_east

  • south_east

  • south_west

  • auto

  • custom

  • face

x

  • x_100 => x-100

y

  • y_100 => y-100

format

  • f_jpg => f-jpg

Supported values:

  • auto

  • jpg

  • jpeg

  • png

  • webp

  • gif

  • avif

quality

  • q_60 => q-60

  • q_auto => q-70

  • q_auto:low => q-50

Auto quality mapping (images):

  • low: 50

  • eco: 60

  • good: 70

  • best: 86

Auto quality mapping (videos):

  • low: 40

  • eco: 45

  • good: 50

  • best: 60

angle

  • a_90 => rt-90

  • a_-67 => rt-N67

radius

  • r_20 => r-20

  • r_20:30:40:50 => r-20

  • r_max => r-max

effects

  • e_blur => bl-1

  • e_blur:500 => bl-5

  • e_grayscale => e-grayscale

  • e_contrast:100 => e-contrast

  • e_sharpen:500 => e-sharpen-5

  • e_unsharp_mask:500 => e-usm-0-5-1-0.05

  • e_unsharp_mask:250 => e-usm-0-2.5-1-0.05

  • e_trim => t-true

  • e_trim:20 => t-20

  • e_trim:20:red => t-20

Supported values:

  • blur

  • grayscale

  • contrast

  • sharpen

  • unsharp_mask

  • trim

Final output from ImageKit may vary from output from Cloudinary

border

  • bo_5px_solid_red => b-5-red

  • bo_5px_solid_BLUE => b-5-blue

  • bo_5px_solid_rgb:AAAA54 => b-5-AAAA54

  • bo_5px_solid_rgb:AAAA54A9 => b-5-AAAA5466

  • bo_5px_solid_rgb:B4F => b-5-BB44FF

  • bo_5px_solid_rgb:B4F9 => b-5-BB44FF60

  1. Color values are case insensitive

  2. Alpha values in RGB codes are accepted in the range [00-FF] and translated to a value in the range [00-99]

background

  • b_red => bg-red

  • b_BLUE => bg-blue

  • b_rgb:AAAA54 => bg-AAAA54

  • b_rgb:AAAA54A9 => bg-AAAA5466

  • b_rgb:B4F => bg-BB44FF

  • b_rgb:B4F9 => bg-BB44FF60

  • b_blurred => bg-blurred

  • b_blurred:100 => bg-blurred_5

  • b_blurred:100:10 => bg-blurred_5_25

  1. Color values are case insensitive

  2. Alpha values in RGB codes are accepted in the range [00-FF] and translated to a value in the range [00-99]

  3. b_blurred for blurred background with automatic blur-intensity

  4. b_blurred[:BlurIntensity][:Brightness] for customized blur-intensity & brightness, blur-intensity is accepted in the range 0 to 2000, and brightness is accepted in the range -300 to 100 (negative value for darker background & positive value for lighter background)

colorize

  • co_red => otc-red

  • co_BLUE => otc-blue

  • co_rgb:AAAA54 => otc-AAAA54

  • co_rgb:AAAA54A9 => otc-AAAA5466

  • co_rgb:B4F => otc-BB44FF

  • co_rgb:B4F9 => otc-BB44FF60

  1. Only supported in the context of text overlays

  2. Color values are case insensitive

  3. Alpha values in RGB codes are accepted in the range [00-FF] and translated to a value in the range [00-99]

DPR

  • dpr_3.0 => dpr-3.0

crop

  • c_crop => cm-extract

  • c_fill => c-maintain_ratio

  • c_fit => c-at_max

  • c_pad => cm-pad_resize

  • c_scale => c-force

Supported values:

  • crop

  • fill

  • fit

  • pad

  • scale

text overlays

  • l_text:Roboto_50:<value> => ot-<value>,otf-Roboto,ots-50

  • l_text:Roboto_50_bold_left:<value> => ot-<value>,otf-Roboto,ots-50,ott-b,otia-left

  • l_text:<fontPath>_50_bold_left:<value> => ot-<value>,otf-<fontPath>,ots-50,ott-b,otia-left

Supported text style qualifiers:

  • bold

  • italic

  • left

  • right

  • center

  • start

  • end

Custom fonts can be used by specifying full path to a font file in your Media Library

image overlays

  • l_<imagePath> => oi-<imagePath>

Full path to the overlaid image in the Media Library must be specified

named transform

  • t_<transform_name> => n-<transform_name>

ImageKit does not translate the actual underlying transformations associated with your named transforms. They must be manually translated and added in your ImageKit dashboard while retaining the same name.

fl_progressive

  • fl_progressive => pr-true

  • fl_progressive:steep => pr-true

  • fl_progressive:semi => pr-true

  • fl_progressive:none => pr-false

fl_layer_apply

Marks the end of a group of transformations being applied in the context of an overlay. ImageKit detects the presence of an fl_layer_apply and applies the relevantly positioned transforms to the overlaid asset instead of the main asset.

start offset

  • so_10.5599 => so-10.56

end offset

  • eo_10.5522 => eo-10.55

duration

  • du_10.5500 => du-10.55

zoom

  • z_2.0 => z-2.0

  • z_0.5 => z-0.5

Note: The rewriter will silently ignore any transformation that has a valid key, but with an invalid value. For example, h_100,w_<invalid>/a_90 will be translated to h-100:rt-90. Refer to the table to see what constitutes a valid value for different transforms.

Last updated