cloudinary.md

Cloudinary URL-rewriter

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

{% hint style="info" %} Beta feature

This feature is currently in beta. Some transformations may not work as expected. {% endhint %}

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	Color values are case insensitive 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	Color values are case insensitive Alpha values in RGB codes are accepted in the range [00-FF] and translated to a value in the range [00-99] b_blurred for blurred background with automatic blur-intensity 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	Only supported in the context of text overlays Color values are case insensitive 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.