Updated on 2024-02-29 GMT+08:00

Resizing Images

You can use the GUI, code, or APIs to resize images. Images can be resized based on a specific rule or based on a fixed width, height, or percentage.

  • A long side refers to the side with a larger ratio of its original size to its target size, and a short side refers to the side with a smaller ratio. Assume that the original size of an image is 400 × 200 pixels and it is resized to 100 × 100 pixels. The ratio of 400 pixels to 100 pixels is 4, that of 200 pixels to 100 pixels is 2, and 4 is larger than 2, so the long side is 400 pixels and the short side is 200 pixels.
  • For a target image after resizing, its long side cannot exceed 9,999 pixels, and the product of its width and height cannot exceed 24,999,999 pixels.
  • If you only specify the height or width for resizing, the target image keeps the same aspect ratio as the original image and is returned in the original image's format.
  • By default, the resize operation is not allowed to scale up an image. If you want an image to become larger after resizing, you need to set limit to 0 to obtain the enlarged image, or the original image will be returned. To do this, use the following format:

    https://obs.region.example.com/image-demo/example.jpg?x-image-process=image/resize,w_500,limit_0

Table 1 describes the parameters in the resize operation.

Table 1 Resize settings

Parameter

Value Description

Code Example

m

Type of resizing. The value can be lfit (the default value), mfit, fill, pad, or fixed.

  • lfit: Specify a rectangle with a given width (indicated by w) and height (indicated by h), lock the aspect ratio, and obtain the largest image in the rectangle.
  • mfit: Specify a rectangle with a given width (indicated by w) and height (indicated by h), lock the aspect ratio, and obtain the smallest image in the rectangle's extended area.
  • fill: Specify a rectangle with a given width (indicated by w) and height (indicated by h) and lock the aspect ratio. Obtain the smallest image in the rectangle's extended area, and center and crop the image. fill-based resizing actually centers and crops a target image resized with mfit.
  • pad: Specify a rectangle with a given width (indicated by w) and height (indicated by h) and lock the aspect ratio. Obtain the largest image in the rectangle and fill the blank area with color. pad-based resizing actually fills the blank area of a target image resized with lfit.
  • fixed: Resize an image based on a fixed width and height.
  • ratio: Specify an aspect ratio (a ratio of w to h), in the range of 1 to 1000, and obtain the largest image that meets the specified ratio.

image/resize,m_lfit,h_100,w_100

p

Percentage of the aspect ratio, in the range of 1 to 1000. If the value is:

  • < 100: The image is scaled down.
  • = 100: The image is kept unchanged in size.
  • > 100: The image is scaled up.

image/resize,p_50

h

Height of the target image, in the range of 1 to 9999. The product of the target image's width and height cannot exceed 24,999,999.

image/resize,m_lfit,h_100

w

Width of the target image, in the range of 1 to 9999. The product of the target image's width and height cannot exceed 24,999,999.

image/resize,m_fixed,h_100,w_100

l

The long side of the target image, in the range of 1 to 4096. The product of the target image's width and height cannot exceed 24,999,999.

The long side has a specified value, and the short side is scaled based on the ratio.

image/resize,l_100

s

The short side of the target image, in the range of 1 to 4096. The product of the target image's width and height cannot exceed 24,999,999.

The short side has a specified value, and the long side is scaled based on the ratio.

image/resize,s_100

color

Color for filling the blank area after resizing. color can be used when you set m to pad.

The value is a hexadecimal code, from 000000 to FFFFFF (which represents white and is the default value).

image/resize,m_pad,h_100,w_100,color_FF0000

limit

Whether to limit the size of the target image when the target image is larger than the original one. The value can be 0 or 1 (default value).

  • 0: The size is not limited.
  • 1: The size is limited.

image/resize,p_150,limit_0

If a resized image is aliased, you can add /marker,u_plus to the end of the image processing URL for optimization.

For example, by adding /marker,u_plus, the processing URL https://obs.region.example.com/image-demo/example.jpg?x-image-process=image/resize,m_fixed,w_2668,h_1999,limit_0 becomes https://obs.region.example.com/image-demo/example.jpg?x-image-process=image/resize,m_fixed,w_2668,h_1999,limit_0/marker,u_plus. The latter displays an image with better quality.

Example

  • Set h to 100 and m to lfit (the default value) to process the width proportionally.

    https://obs.region.example.com/image-demo/example.jpg?x-image-process=image/resize,m_lfit,h_100

  • Lock the aspect ratio and specify the short side to resize the image into 100 x 100 pixels.

    https://obs.region.example.com/image-demo/example.jpg?x-image-process=image/resize,m_lfit,h_100,w_100

  • Set the long side size to 100 and scale the short side based on the ratio.

    https://obs.region.example.com/image-demo/example.jpg?x-image-process=image/resize,l_100

  • Fix the width and height, center and crop the image, resize the image into 100 x 100 pixels.

    https://obs.region.example.com/image-demo/example.jpg?x-image-process=image/resize,m_fill,h_100,w_100

  • Fix both the width and height to 100.

    https://obs.region.example.com/image-demo/example.jpg?x-image-process=image/resize,m_fixed,h_100,w_100

  • Fix the width and height. Resize the image into 100 x 100 pixels by specifying the short side and fill the blank area with white.

    https://obs.region.example.com/image-demo/example.jpg?x-image-process=image/resize,m_pad,h_100,w_100

  • Fix the width and height. Resize the image into 100 x 100 pixels by specifying the short side and fill the blank area with red.

    https://obs.region.example.com/image-demo/example.jpg?x-image-process=image/resize,m_pad,h_100,w_100,color_FF0000

  • Scale up the image to 150% of its original size and set limit to 0 to obtain the enlarged image.

    https://obs.region.example.com/image-demo/example.jpg?x-image-process=image/resize,p_150,limit_0

  • Set p to 30 to scale down the image to 30% of its original size.

    https://obs.region.example.com/image-demo/example.jpg?x-image-process=image/resize,p_30

  • Set the image's aspect ratio to 3:2.

    https://obs.region.example.com/image-demo/example.jpg?x-image-process=image/resize,p_30