Contrast stretch - (e-contrast)
It is used to automatically enhance the contrast of the image by using the full intensity values that a particular image format allows. This means that the lighter sections of an image become even lighter and the darker sections become even brighter, thereby enhancing the contrast.
Sharpen - (e-sharpen)
It is used to sharpen the input image. It is useful when highlighting the edges and finer details within an image.
Example usage - e-sharpen-<number>
If just the e-sharpen parameter is used, then a default sharpening is performed on the input image. The default behavior can be controlled by specifying a number that restricts the extent of sharpening performed.
Unsharp mask - (e-usm)
Unsharp Masking (USM) is an image sharpening technique. This transform allows you to apply and control unsharp masks on your images.
Example usage - e-usm-<radius>-<sigma>-<amount>-<threshold>
The amount of sharpening can be varied using 4 parameters - radius , sigma , amount , and threshold. This results in perceptually better images compared to using e-sharpen. Only positive floating points are allowed for these 4 parameters.
Shadow - (e-shadow)
This feature adds a shadow under solid objects in an input image with a transparent background.
The shadow is applied under the areas constituted by the non-transparent pixels in the input image. You can adjust the shadow's saturation, blur level, and positional offsets with the following parameters.
| Parameter | Description | Range | Default value |
|---|---|---|---|
Blur (bl) | Adjusts the blur level of the shadow. e.g. e-shadow-bl-15 | 0 to 15 | 10 |
Saturation (st) | Specifies the saturation level of the shadow. e.g. e-shadow-st-40 | 0 to 100 | 30 |
X Offset (x) | Sets the horizontal offset of the shadow by x% of the image width. e.g. e-shadow-x-10. Supports negative values by prefixing N: e.g. e-shadow-x-N10 | 0 to 100 or N100 | 2 |
Y Offset (y) | Sets the vertical offset of the shadow by y% of the image height. e.g. e-shadow-y-10. Supports negative values by prefixing N:e.g., e-shadow-y-N10 | 0 to 100 or N100 | 2 |
Multiple parameters can be configured by appending them with an underscore (_). They will be applied independently of the order in which they are specified.
Example usage - e-shadow-<blur>_<saturation>_<x-offset>_<y-offset>, which would look like, e-shadow-bl-15_st-40_x-10_y-N5.
Limits
Shadows can only be applied to images with a resolution of maximum 2MP. Images with resolutions outside this limit will return a "400 - Bad Request" error.
To add shadows on images larger than 2MP, you can resize the image in either the same chain or a chained transformation and then add the shadow.
e.g. For a 3MP image, e-shadow would not work. But w-500,e-shadow or w-500:e-shadow would work.
We have an input image with dimensions 2216x1500 (3MP). Applying only the shadow transformation will return an error with status code 400: https://ik.imagekit.io/demo/tr:e-shadow/lipstick_2M.png.
Resize the image as follows to apply a shadow successfully:
Gradient - (e-gradient)
This is used to add a gradient overlay over an input image.
The gradient formed is a linear gradient containing two colors, and it can be customized with the following parameters:
| Parameter | Description | Value Type | Range | Default Value |
|---|---|---|---|---|
Linear Direction | Optional |
| Number - String - |
|
From Color | Optional |
| An SVG recognized color keyword name eg. or a RGB Hex Code, e.g. or a RGBA Hex Code, e.g. |
|
To Color | Optional |
| An SVG recognized color keyword name eg. or a RGB Hex Code, e.g. or a RGBA Hex Code, e.g. |
|
Stop Point | Optional When the number is less than or equal to 1, i.e., a floating point, it would be treated as a percentage value. For example, 0.25 means 25%, 0.1 means 10% and so on. When the number is greater than 1, it would be treated as an absolute value (in pixels). For example, 100 would mean 100px, and so on. |
| Number - A floating point number between 0.01 and 0.99 or an integer greater than or equal to 1. String - An arithmetic expression like ih_div_2. Read more about arithmetic expressions here. |
|
Multiple parameters can be configured by appending them with an underscore (_). They will be applied independently of the order in which they are specified.
Example usage - e-gradient-<linear-direction>_<from-color>_<to-color>_<stop-point>, which would look like, e-gradient-ld-top_right_from-FF000040_to-00FF0040_sp-0.9.
Gradient as a background
For input images containing a solid object over a transparent background, gradient can also be applied as an underlay.
Usage syntax
https://ik.imagekit.io/<imagekitId>/your-image.png?tr=e-gradient-from-red_to-white:l-image,i-your-image.png,t-false,l-end
Examples
If you experience a positional displacement between the original image and the overlay image, use t-false to disable default trimming of the overlay layer like l-image,i-your-image.png,t-false,l-end.
Transformation of gradient block overlay
Following transformation parameters are supported on the gradient block overlay inside a layer.
| Parameter | Description |
|---|---|
| w | Width of the gradient block. It can also accept arithmetic expressions such as bw_div_2, or bw_mul_0.8. Learn more about arithmetic expressions here. |
| h | Height of the gradient block. It can also accept arithmetic expressions such as bh_div_2, or bh_mul_0.8. Learn more about arithmetic expressions here. |
| r | It is used to control the radius of the corner and accepts an integer value as the input. |
If you're looking to add a solid color block overlay instead, read more about it here.
Examples
Grayscale - (e-grayscale)
Used to turn an image into a grayscale version.
Blur - (bl)
Used to specify the Gaussian blur that must be applied to an image. The value of bl specifies the radius of the Gaussian Blur that is to be applied. Higher the value, the larger the radius of the Gaussian Blur. Possible values include integers between 1 and 100.
Trim edges - (t)
Useful with images that have a solid or nearly solid background with the object in the center. This parameter trims the background from the image, leaving only the central object in the output image.
Usage - t-true|Number.
Possible values include true and integer values between 1 and 99 that specify the threshold level for considering a particular pixel as "background".
URL - https://ik.imagekit.io/demo/img/tr:t-5/trim_example_BkgQVu7oX.png
Here some trimming does take place (you can notice that the grey circle in the background is getting cut off), but it is not as much as what happened when the value of trim was set to true.
URL - https://ik.imagekit.io/demo/img/tr:t-15/trim_example_BkgQVu7oX.png
Here the amount of trimming is higher than what happened with trim set to true. This is because with a higher value specified for trim, more and more pixels are considered as similar and redundant and hence get removed.
Border - (b)
This adds a border to the image. It accepts two parameters - the width of the border and the color of the border.
Usage - b-<border-width>-<hex code>
The width is specified as a number which is equivalent to the border width in pixels. The color code is specified as a 6-character hex code RRGGBB.
You can also provide an arithmetic expression such as ih_div_20_red, or cw_mul_0.05_FF00FF as a value for this parameter. Doing so will first calculate the value of the width and then apply transformations using that value. Learn more about arithmetic expressions here.
Rotate - (rt)
It is used to specify the degree by which the output image must be rotated or specifies the use of EXIF Orientation Tag for the rotation of image using the auto parameter.
Possible values - Any number for a clockwise rotation, or any number preceded with N for counter-clockwise rotation, and auto.
Use auto if you want ImageKit.io to automatically rotate image based on EXIF orientation tag in image metadata.
Radius - (r)
It is used to specify the radius that must be used to obtain a rounded output image. To obtain a perfectly rounded image, set the value to max . This parameter is applied after resizing the original image, if defined.
Possible values - Positive Integer and max.
For simpler cases, you can use radius in the same transformation as the height and width parameters. However, if you are using advanced cropping parameters, like crop (c) and crop mode (cm), then you should chain the radius transformation in a step after the resizing transformation.
URL - https://ik.imagekit.io/ikmedia/tr:r-max/docs_images/examples/example_food_3.jpg
This is good for creating profile pictures.
Background - (bg)
It is used to specify the background that can be used along with some cropping strategies while resizing an image. You can choose either a solid color or a blurred version of the same image as the background.
Default value - black (00000)
Solid color background
- RGB Hex code: A 6-digit hex code (eg. AAFF00, 0f0fac)
- RGBA Hex code: An 8-digit hex code. Last two characters must be a number between
00and99, specifying the opacity level (eg. AAFF0040, 0f0fac75) - Color name: A standard color name in lowercase (eg. lightgreen, beige)
Blurred background
Syntax: blurred[_<BlurIntensity>][_<Brightness>]
| Parameter | Value | Description | Default |
|---|---|---|---|
| Blur intensity | auto or an integer from 0 to 100 | Set the intensity of blur | auto |
| Brightness | Integer from N255 to 255 | Negative value to make background darker and positive value to make the background lighter | 0 |
Limitation: Blurred background can only be used with cm-pad_resize.
Blur intensity auto - The intensity of blur is automatically adjusted based on the provided height (h) & width (w) in the transformation.
Customize blur-intensity to 25 & brightness to N30 (Make background darker).
Automatic blur-intensity & customize brightness to 30 (Make background lighter).
Specifying a background for a PNG image
URL - https://ik.imagekit.io/demo/img/logo-white_SJwqB4Nfe.png?tr=bg-F00000
Opacity - (o)
It is used to specify the opacity level of the output image. A non-transparent image can be made semi-transparent by specifying an opacity level that is less than 100. An already transparent image is made more transparent based on the specified value. It accepts numerical values ranging from 0 to 100, where 0 would produce a completely transparent image, and 100 would have no effect.
If a background (bg) color is specified along with opacity, then that color is blended with the resultant image, leading to a non-transparent (opaque) image, but with the bg color mixed in. Alpha component, if present in the bg value, will be ignored.
Possible values - Integer values from 0 to 100 (inclusive).