Resize and Crop

This quick guide provides an overview of how to achieve different kinds of resizes and crops for your images using ImageKit. For a detailed explanation and documentation, please check ImageKit Documentation.

ImageKit now supports automatic responsive images and a data-saver mode using Client Hints. Read more about it in this blog – Lighter and automatic responsive images with Client Hints
A typical image on an e-commerce website.


1. Resizing with only one dimension specified

Preserves aspect ratio, no cropping

Useful when you are placing the image inside a container where only one dimension is fixed and you want the aspect ratio to be preserved.

Image with width 300px and height is adjusted automatically to preserve aspect ratio

Resize with height 200px and width is automatically adjusted


2. Resize with both height and width specified

Preserves aspect ratio but may crop the image

Useful when you want an exactly sized image and want to maintain aspect ratio. However the new size that you specify, if does not have the same aspect ratio as the original image, then some cropping would occur.

Image with height = 300px and width = 300px. Notice that the top and the bottom are cropped in this image.,w-300/d_12.jpg

3. Image to be equal or smaller than the specified dimensions

Maintains aspect ratio, no cropping, image is smaller or equal to the dimension specified.

Useful when you have to preserve the aspect ratio and get the image to fit an image container with some specific dimensions.

In this case, the height is 300px but to preserve aspect ratio width is kept < 300px,w-300,c-at_max/d_12.jpg

4. Image to be at least as big as the specified dimensions

No change in aspect ratio, no cropping, the image is equal or larger than specified dimensions.

Useful when you have an image container and you want to be 100% sure that the image is equal or larger than that container dimensions.

Image with dimensions at least 300px by 300px. Here the width is 300px and height is larger than 300px


5. Image with padding on the sides

No change is aspect ratio, solid background with the image

Useful when you want to unify the final image sizes for images with different aspect ratios without cropping any part of the image

Image with final dimensions of 500px by 300px. To get this size, without cropping or enlargement, the image is padded with white background on the sides

6. Extract a portion of the image

No resize, cropping is done to get a small portion of the image

Useful when you don’t want to resize down the image but want to extract a portion from the image.

Example of extract cropping mode to extract the center of the image without resizing. The default focus on center can be changed using the “fo” URL-parameter.

These are just some of the most common examples of how our customers use image resizing for their websites. You can refer to the detailed documentation here to get more options for resize (h & w), crop (c) and crop mode (cm) and focus (fo).