Resize, crop and other transformations

Here is a list of transformation parameters to perform basic image resizing and cropping:

Parameters

w width

Used to specify the width of the output image. Accepts integer value greater than 1. If a value between 0 and 1 is specified, it acts as a percentage width. Therefore, 0.1 means 10% of the original width, 0.4 means 40% of the original width, and so on. https://ik.imagekit.io/demo/tr:w-200/medium_cafe_B1iTdD0C.jpg

h height

Used to specify the height of the output image. Accepts integer value greater than 1. If a value between 0 and 1 is specified, the value acts as a percentage height. Therefore, 0.1 means 10% of the original height, 0.4 means 40% of the original height, and so on. https://ik.imagekit.io/demo/tr:h-200/medium_cafe_B1iTdD0C.jpg

ar aspect ratio

Used to specify the aspect ratio of the output image or the ratio of width to height of the output image. This parameter must be used along with either the height(h) or width(w) parameter. The format for specifying this transformation is ar-<width>-<height> https://ik.imagekit.io/demo/tr:ar-4-3,w-400/medium_cafe_B1iTdD0C.jpg

c crop

This parameter decides the final value of the height and width of the output image, based on the aspect ratio of the input image and the requested transform. Possible values for this parameter include maintain_ratio , force , at_least , and at_max . Default valuemaintain_ratio  You can read more about the crop values here.

cm crop mode

Used to specify how the input image is used for cropping to get the output image. Possible values for this parameter include resize , extract, pad_resize , and pad_extract . You can read more about the crop modes here.

fo focus

This parameter is coupled with the 'extract' type of crop mode, to specify the area of the input image that must be focussed on to get the output image. Possible values include center , top , left , bottom , right , top_left , top_right , bottom_left , bottom_right , and auto . Default value - center  You can read more about the different focus values here.

q quality

Used to specify the quality of the output image for lossy formats like JPEG and WebP.  A large quality number indicates a larger output image size with high quality. A small quality number indicates a smaller output image size with lower quality.  https://ik.imagekit.io/demo/tr:q-40/medium_cafe_B1iTdD0C.jpg Default Value - 80 (from dashboard settings)

f format

Used to specify the format of the output image. If no output image format is specified and the 'USE BEST FORMAT FOR IMAGE DELIVERY' option is selected within your dashboard, the output image's format is decided based on the end user's device capabilities and other factors. If the 'USE BEST FORMAT FOR IMAGE DELIVERY' is not selected, and on output format is specified, then the format of the output image is the same as the input image.  Possible values include auto ,jpg , jpeg , and png . Default Value - auto (from dashboard settings)

bl blur

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, larger the radius of Gaussian Blur.  Possible values include integers between 1 and 100 . https://ik.imagekit.io/demo/tr:bl-20/medium_cafe_B1iTdD0C.jpg

e-grayscale

Used to turn an image to a grayscale version. https://ik.imagekit.io/demo/tr:h-300,e-grayscale/sample_image.jpg

dpr

Used to specify the device pixel ratio that is used to calculate the dimensions of the output image. Extremely helpful when creating image transformations for devices with high device pixel ratio (DPR > 1), like the iPhone or high-end Android devices.  The dprparameter can only be used when either the height or width of the desired output image is specified. If the output image's height or width after considering the specified DPR  is less than 1px or greater than 5000px, the value of DPR is not considered and the height or width used in the URL is used.  Possible Values0.1  to 5 .

n named transformations

Named Transformations are an alias for the entire transformation string.  For example, we can create a named transformation - thumbnail for a transformation string - tr:w-100,h-100,c-at_max,fo-auto and is used like: https://ik.imagekit.io/demo/img/tr:n-media_library_thumbnail/default-image.jpg

di default image

When an image that is requested using Imagekit.io does not exist, a 404 error is displayed. In certain scenarios, you would want a default image to be delivered instead of the 404 error message.  Imagekit.io provides an alternative to achieve this without having to make changes at the application level using this parameter. The image specified in this parameter should be accessible using the default endpoint of your ImageKit.io account. https://ik.imagekit.io/demo/tr:di-medium_cafe_B1iTdD0C.jpg/non_existent_image.jpg

pr progressive images

Used to specify whether the output JPEG image must be rendered progressively. In progressive loading, the output image renders as a low quality pixelated full image which over time keeps on adding more pixels and information to the image.  This helps you maintain a fast perceived load time.  Possible valuesinclude true  and false . https://ik.imagekit.io/demo/tr:h-300,w-400,f-jpg,pr-true/medium_cafe_B1iTdD0C.jpg

lo Lossless WebP and PNG

Used to specify whether the output image (if in JPEG or PNG) must be compressed losslessly. In lossless compression, the output file size is larger than the regular lossy compression. However, the perceived image quality can be higher in certain cases, especially for computer-generated graphics. Using lossless compression for photographs is not recommended. Possible Valuestrue  and false  https://ik.imagekit.io/demo/tr:w-500,h-361,lo-true/medium_cafe_B1iTdD0C.jpg

t trim edges

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.  Possible Values include true  and integer values between 1  and 99 that specify the threshold level for considering a particular pixel as "background".