ImageKit.io Docs
PricingService statusDashboardWe are hiring 🤓
Search
⌃K
Links
Comment on page

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. 1.
    Color values are case insensitive
  2. 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. 1.
    Color values are case insensitive
  2. 2.
    Alpha values in RGB codes are accepted in the range [00-FF] and translated to a value in the range [00-99]
  3. 3.
    b_blurred for blurred background with automatic blur-intensity
  4. 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. 1.
    Only supported in the context of text overlays
  2. 2.
    Color values are case insensitive
  3. 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.
✨Features - Previous
URL-rewriters
Next
Imgix
Last modified 2mo ago