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 transform
Example translation
Remarks
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
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]
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.

Cloudinary transform	Example translation	Remarks
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`	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]
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`

Last modified 6h ago