Image resizing and cropping

Responsive design and art direction generally requires displaying images at a variety of sizes, often much smaller than the original.

If you deliver full size images and rely on browser-side resizing (using CSS or HTML width and height attributes), users are forced to download unnecessarily large files. Therefore, images should always be delivered from the server at their final size.

When you use any of the Cloudinary resizing transformations, the sizing (scaling/cropping) is performed on the server side, and the asset is always delivered to the browser at the requested size.

Here are some examples of different cropping techniques used on the same image. Click each image to see the URL parameters applied in each case:

Original image Focus on the
model in a
portrait crop Detect the
face for a
thumbnail crop

Automatically determine what to keep in a banner crop

Resize dimensions

You can set the target dimensions of your resized image by specifying width, height, and/or the target aspect ratio as qualifiers of your resize transformation.

To set dimensions using exact pixel values:

• Use an integer value for w (width) or h (height). For example, w_150 sets the width to exactly 150 pixels.

To set dimensions relative to the original:

• Use a decimal value for width or height. For example, w_0.5 sets the width to half the original width.
• Use ih or iw as values to set the dimension to the initial height or initial width of the original image respectively. For example, w_iw sets the width to the same value as the original width. This may be useful when applying chained transformations or setting the dimensions of an overlay.

To set dimensions using aspect ratio:

Use the ar (aspect ratio) parameter with one of the following formats:

• a:b where a signifies the relative width and b the relative height (e.g., ar_4:3 or ar_16:9).
• A decimal value representing the ratio of the width divided by the height (e.g., ar_1.33 or ar_2.5). 1.0 is a perfect square.

Automatic dimension calculation:

When specifying the dimensions for a scale crop, you'll generally want to only specify one dimension, and let Cloudinary automatically determine the other dimension to ensure the original aspect ratio is preserved.

Conversely, when using a resize mode that's intended to crop part of the asset and change the aspect ratio compared to the original, it's generally recommended to specify both width and height or width/height along with an aspect ratio to define the exact required dimensions. However, in rare cases, you may choose to specify only one of these three resize qualifiers, and let Cloudinary automatically determine the missing dimension as follows:

• If you provide only width or only height, then the other dimension is automatically calculated to deliver the original aspect ratio. For example, if your original asset is 400*600, then specifying c_crop,w_200 is the same as specifying c_crop,w_200,h_300. Supported for all resize and crop modes.
  

• If you provide only the aspect ratio (for cropping modes only):

  • If ar > 1, the original width is maintained and the height is cropped to deliver the requested ratio.
  • If ar < 1, the original height is maintained, and the width is cropped accordingly.
  • If ar == 1:
    • If the image is wider than taller, the result will use the full height of the image and crop the width as needed.
    • If the image is taller than wider, the result will use the full width of the image and crop the height as needed.
    • Providing only the aspect ratio is not supported for imagga_crop.

Resize and crop modes

When changing the dimensions of an uploaded image by setting the image's height, width, and/or aspect ratio, you need to decide how to resize or crop the image to fit into the requested size. Use the c (crop/resize) parameter for selecting the crop/resize mode. Cloudinary supports the following image resize/crop modes:

Some of the cropping modes keep only a certain part of the original image in the resulting image. By default, the center of the image is kept in the crop, but this is not always ideal. To keep the parts of the image that are important to you, you can use the gravity parameter. For example, you can specify to keep faces, text, or certain objects in the crop, or gravitate towards an automatically determined area of interest. You can also guide the crop towards areas of your image defined by compass points, for example, north to keep the top part of the image, or south_east to keep the bottom-right part. Additionally, if you know the coordinates of the area you want to keep, you can explicitly specify these.

Resize and crop mode examples

The following examples show the same image resized to a width and height of 200 pixels, using different methods of resizing and cropping.

The original image is 640 x 427 pixels:

Resizing the image to 200 x 200 pixels, using crop, scale, fill and pad results in the following images:

c_crop,h_200,w_200 c_scale,h_200,w_200

c_fill,h_200,w_200 b_brown,c_pad,h_200,w_200

You could deliver the c_fill transformation shown above as follows:

Resizing and cropping interactive demo

Try out this interactive demo to see the results of different cropping and resizing methods, given a specific viewport size.

Choose your starting image, cropping mode, gravity and cropping/viewport dimensions, then click the button to generate the new image.

Square	Portrait	Landscape	Small
Original image size: 1920 x 1920

Cropping mode: Fill (c_fill) Limit fill (c_lfill) Fill with padding (c_fill_pad) Crop (c_crop) Thumbnail (c_thumb) Auto (c_auto) Scale (c_scale) Fit (c_fit) Limit fit (c_lfit) Minimum fit (c_mfit) Pad (c_pad) - auto background Limit pad (c_lpad) - auto background Minimum pad (c_mpad) - auto background Pad (c_pad) - AI gen background Limit pad (c_lpad) - AI gen background Minimum pad (c_mpad) - AI gen background

Gravity: None / Center Top left (g_north_west) Auto (g_auto) Auto: handbag (g_auto:handbag) Handbag (g_handbag)

Cropping/viewport dimensions: Small landscape (16:9) (h_169,w_300) Large landscape (16:9) (h_366,w_650) Small portrait (3:4) (h_300,w_225) Large portrait (3:4) (h_650,w_488) Small square (h_300,w_300) Large square (h_650,w_650) Specify no dimensions

Apply settings

https://res.cloudinary.com/demo/image/upload/c_fill,g_auto,h_169,w_300/docs/handbag1.jpg