In our previous article, we talked about resizing using the height and width parameters in the URL. We will now combine these resizing parameters with different crop strategies to obtain different results for our images.
Remember that cropping happens only when you specify both height and width for resizing in the URL. If only, one of the dimensions is specified, then no cropping takes place.
The crop strategy can be defined by using the transformation parameter 'c' in the URL.
1. Maintain Ratio strategy
The default crop strategy is 'maintain_ratio'. If nothing is specified in the URL, this strategy gets applied automatically. In this strategy, if both height and width have been specified, then the output image is exactly the same size as requested. But the focus is on preserving the aspect ratio from the original image to the output image which results in parts from the original image getting cropped.
Here is an example -
This is an original image downscaled to width 500px
We now resize it to 300x200
In the above image, the top and the bottom of the image got cropped out. But the aspect ratio has been preserved from the original to the output image i.e. the hand and the plant are not skewed or forcefully resized to fit the output dimensions.
2. Forced crop strategy
The forced crop strategy also ensures that the output image is exactly the same size as required. But, completely opposite to the maintain ratio strategy, instead of cropping out the image, it forcefully squeezes the original image to get it to fit completely within the output dimensions. So, actually, there is no cropping in this strategy. This strategy can be enabled by providing the value 'force' for the crop transformation parameter.
Here is the same example as above with the force crop strategy
The entire original image is preserved in the output image as well, but the hand and the plant have been squeezed to fit into the output image.
3. Max-Size Cropping Strategy
This mode can be enabled by providing the value 'at_max' to the crop parameter in the URL. In this strategy, there is no cropping and the output ratio is preserved as well. The output image is less than or equal to the dimensions specified in the URL i.e. at least one dimension will exactly match the output dimension requested and the other dimension will be equal to or smaller than the corresponding output dimension requested.
Here is an example
The entire image content has been preserved and the aspect ratio is preserved. The output image dimensions are 148x200. So the height is exactly what is requested, but the width is smaller than what was requested.
This mode is particularly useful if you have a container and you want to ensure that the image will never be larger than that container.
4. Min-Size Cropping Strategy
This strategy is similar to the max-size cropping strategy with the only difference being that unlike max-size strategy, the image is equal to or larger than the requested dimensions. One of the dimensions will be exactly the same as what is requested, while the other dimension will be equal to or larger than what is requested. This cropping strategy can be applied using the 'at_least' value for crop transformation parameter in the URL.
Here is an example
The entire image is preserved and so is the aspect ratio. The output image dimensions are 300x405. So the width is exactly the same as what was requested, but the height is larger than what was requested.
This is useful for cases where you want to have an image that is always at least as large as the container.
In all the above cropping strategies, we were basically changing one or both the dimensions of the original image while trying to preserve the maximum amount of content or maintain the aspect ratio. We will now look at different values of another parameter called the crop mode (represented by the parameter 'cm') that changes this basic behaviour.
1. Resize crop mode
This is the default crop mode which is specified using the value 'resize' for the crop mode parameter. Since, it is a default, you do not need to specify it in the URL. All the examples above use this crop mode.
2. Extract crop mode
Instead of trying to resize the image, the other way is to extract out a part of the image. For example, if we have a 1000x1000px image, and I want a 200x200px output image, instead of resizing the image, we extract out a region that is 200x200px in dimensions from the original image.
Here is an example to make things clear
This is the original image, scaled down to 500px width
We now extract out a 200x200px portion from this image using the extract crop mode.
As you can see, the size of the hand and the plant has not changed at all from the original image, which means that no resizing has taken place. Instead, we have been able to extract out a 200x200 area from the original image.
3. Pad Resize Crop Mode
While discussing different crop strategies, we faced quite a few challenges. Either the image was getting cropped out (maintain ratio crop strategy), or we were not able to get the exact same size in the output image (max-size and min-size crop strategy).
The pad resize crop mode changes the behaviour of the max-size crop strategy so that the output image is exactly the same size as requested and the aspect ratio is preserved and no cropping takes place. This is accomplished by adding a padding around the output image to get it to match the exact size requested.
The output image is exactly 300x200. However, to maintain the aspect ratio and prevent cropping a solid colored padding is added around the resized image.
Note: For sake of clarity, we have made the padding background slightly grey in color (#F3F3F3) using the background parameter (bg) in the URL. More about that here.
4. Pad Extract Crop Mode
The pad extract crop mode is an extension to the extract crop mode. In the extract crop mode we were extracting out a smaller area from a larger image. Now, there can be a scenario where the original image is small and we want to extract out a larger area (which is practically not possible without padding). So the pad extract mode adds a solid colored padding around the image to make it match the exact size requested.
This transformation is specified using the value 'pad_extract' for the crop mode transformation parameter in the URL.
Let's take an original image that is 300px wide. We will then extract (or try to) a 500x500 area from it with the pad extract crop mode.
As you can see, the entire image is present. Since it was smaller than the 500x500px output requested, the output image has a grey colored padding around the entire image to get it to match the requested image size.
Focus (Relative and coordinates methods)
Apart from crop strategy and crop mode, there is another important transformation that works with some crop modes called the focus transformation.
In the above examples for extract crop mode we saw that the 200x200px output image was extracted right from the center of the original image. However, there might be a case where where we may not want it from the center of the image. So, there are three ways of changing this behavior - relative, coordinate and custom focus method.
There is another method, the auto focus or smart crop, which we will discuss in a separate article.
Focus using relative position
In the relative method, you can use the 'fo' parameter to specify that the extract should be done from, let's say, the bottom-right of the original image.
Here is an example
This is the original image (scaled to width 500px)
This is the regular center extract
This is the extract done with focus on bottom right of the original image.
Valid values for the focus (fo) parameter are - center, centre, top, left, bottom, right, top_left, top_right, bottom_left and bottom_right.
Focus using X, Y coordinates
In the coordinate method of focus, we use the parameters 'x' and 'y' to determine the position of the top-left corner from where the extract would begin.
Here is an example for the same image
The extract is made starting from (100,300) point on the original image
The extract is made from (200,400) point on the original image
This coordinate based focus method is really useful if you have custom crop areas set for each image, let's say, from your CMS and want to get images with those crop areas in real-time.
Focus using custom coordinates
Instead of specifying the x and y coordinates to focus on a particular area, you can also specify the focus area in an image while uploading the image or from the media library in the ImageKit dashboard (Documentation here). Then, instead of specifying the x,y coordinates in the URL, you can use
fo-custom transformation in the image URL. ImageKit will then utilize the custom crop area specified with the image for all crop operations. This custom focus mode works for both
extract and the default
maintain-ratio crop mode.
Examples with custom crop coordinates
The original image below is of dimensions 2250 x 1500px. It has a custom focus area specified as (1150,900) as the x-y coordinates of the top-left corner and 100x100 as the width x height of the crop area.
A 500x100px thumbnail with the default and extract crop mode are respectively as follows
With custom focus mode and normal crop mode
the image obtained is
With custom focus mode and extract crop mode
the image obtained is
Both the images are able to focus better on an important area in the image because of the custom coordinates specified with the image.
Focus with Pad Resize Crop Mode
Another application of the relative focus parameter (fo) is with the pad resize crop mode. In the examples above, we saw that when the image is padded in the pad_resize mode, the padding is equal on both sides of the image. However, there might be cases where we want all the padding to be added on only one side of the image.
Here is how it works
The below image has equal padding on both the left and right sides.
Now, we will move all the padding to the right side of the image, which means that the image should be focussed on the left. Remember, that in focus with pad resize crop mode, the value of focus determines where will the image be in the final output image.
We added the 'fo-left' transformation to our image. Now, all the padding is on the right of the image, while the image itself is on the left (determined by the value of focus parameter).
Similarly, if the pad resize crop mode results in padding being added at the top and bottom of the image, you can use the focus parameter with either the top or bottom value to move all the padding to one side in the output image.
Here, the image is at the top and all the padding is at the bottom
As mentioned above, there is another focus mode, which is the smart crop or auto crop mode which will be discussed in a separate article.
If you have any questions regarding the crop strategies, crop modes or focus parameters, then reach out to us on firstname.lastname@example.org