ImageKit allows you to resize your images directly from the URL in real-time. In this article, we will cover just the basic height and width parameters for resizing. In the next article, we will combine it with different cropping modes to obtain different crop variations and sizes of the same image.
The width transform is specified using the transformation parameter 'w'. It can take any integer value greater than 1 which indicates the pixel width of the output image.
Also, if a value between 0 and 1 is specified, then it acts as a percentage width. For eg, 0.1 means 10% of the original width, 0.2 means 20% of the original width.
If you use only the width transformation in the URL, then the height is calculated automatically to preserve the entire image while maintaining the original aspect ratio as well.
Here are some examples of using the width transformation
Image with width 300px
Image with 20% width of the original image (the original image is 1000px wide)
Resulting image is 200px wide which is 20% of the original width, 1000px.
The height transform is represented by the transformation parameter 'h'. It works exactly the same way as width transformation parameter and modifies the height of the output image in real-time.
Here are some examples
Image with height as 25% of the original height
Image with height 400px
Combining height and width transform
If you use only the width or only the height transformation in the URL, then the other parameter is calculated automatically to preserve the entire image while maintaining the original aspect ratio as well.
However, if you specify both height and width together in the URL, then cropping may or may not take place, depending on the original and the output image aspect ratios. ImageKit's default behaviour is to maintain the aspect ratio which results in image being cropped to match the height and width exactly.
We will cover other cropping modes in the following article.
Here are some examples highlighting the default cropping behaviour when both height and width are specified.
This is an original image, 1000x1000px, downscaled to width 300px. The entire image and the aspect ratio is preserved here.
Now, we request an image with both the height and width specified
Here we have requested a 300x100 image. Since the output aspect ratio requested (3:1), does not match the original aspect ratio (1:1), cropping will happen while maintaining the aspect ratio. The output image looks like this
As you can see, the top and bottom of the image have been cropped out, but the aspect ratio is still maintained. The output image is exactly 300x100px in dimensions.
Here is another example, this time with the output 100x300.
Here, the left and right of the image have been cropped out, but the aspect ratio is still maintained. The output image is exactly 100x300px in dimensions.
You can do the same thing with percentage heights and widths as well. Here is an example of an output image with 20% output height and 40% output width.
Since the original image was 1000x1000px, the output image has width 400px (40%) and height 200px (20%).
Combine resizing with aspect ratio
You may have a requirement at times that only one of the dimensions is known and you want to have the other dimension be picked up automatically to satisfy a given aspect ratio (the ratio between width and height of an image).
For example, if you have a full width banner image, you would want different image widths to cater to different display sizes. But at the same time, you would always want the banner to be 16:9 after cropping.
To help in this, ImageKit offers the aspect ratio transform using the 'ar' transformation parameter. The aspect ratio transform requires two numeric values corresponding to the ratio. It is specified as 'ar-3-2' for a 3:2 ratio, 'ar-16-9' for a 16:9 ratio and so on.
You can combine this with any one dimension, height or width, to automatically calculate the other dimension. This is makes the task simpler instead of having to calculate the other dimension and putting it in the URL.
Here are some examples with the aspect ratio transform
Aspect ratio 3:2 with height specified as 400px.
Output image has width of 600px which satisfies the aspect ratio requirement of 3:2 (600:400).
Aspect ratio of 3:2 with width 300px
The output image has a height of 200px which satisfies the 3:2 aspect ratio requirement (300:200)
If you specify both height and width in the URL along with the aspect ratio transform, then the aspect ratio is ignored.
In the next article, we explore different crop modes to modify the default cropping behavior discussed above.
If you have any questions about the resizing parameters, you can reach out to us on email@example.com.