Resize, Fit, and Align

Resizing images with Filestack just became much easier and much more powerful with the introduction of Filestack's new transformation engine.

Note: The maximum accepted image size is 100,000,000 pixels. An image with this many pixels could have width and height combinations like 10,000 x 10,000 or 5,000 x 20,000, etc. There is also a file size restriction. Filestack will not convert an image that is larger than 256mb. Please contact us if you require the ability to process larger files than our current limits.

The resizing feature comprises two main functions, manipulating the width and height of an image and changing the fit and alignment of the image.

Resize

Resize Task URL Formats:
https://process.filestackapi.com/resize=[options]/Filestack_FileLink_Handle
or
https://process.filestackapi.com/<API_KEY>/resize=[options]/File_URL
resize=width:100
Integer

Can be abbreviated as w:100

The width in pixels to resize the image to. The value must be an integer from 1 to 10000.

resize=height:100
Integer

Can be abbreviated as h:100

The height in pixels to resize the image to. The value must be an integer from 1 to 10000.

resize=fit:clip, crop, scale, or max
String

Can be abbreviated as f:clip

The default value for the fit parameter is fit:clip.

fit:clip Resizes the image to fit within the specified parameters without distorting, cropping, or changing the aspect ratio.
fit:crop Resizes the image to fit the specified parameters exactly by removing any parts of the image that don't fit within the boundaries.
fit:scale Resizes the image to fit the specified parameters exactly by scaling the image to the desired size. The aspect ratio of the image is not respected and the image can be distorted using this method.
fit:max Resizes the image to fit within the parameters, but as opposed to 'fit:clip' will not scale the image if the image is smaller than the output size.
resize=align:center, top, bottom, left, right, or faces
String

Can be abbreviated as a:top

Using align, you can choose the area of the image to focus on. Possible values:

align:center align:top align:bottom
align:left align:right align:faces

By default, it crops from the center.
You can also specify pairs e.g. align:[top,left]. Center cannot be used in pairs.

Resize Examples

Original image


Resizing with only the width parameter:

When only one dimension is provided, the missing dimension will be resized proportionally so that the image is not distorted.

image transformed with the resize task to a width of 750 pixels

Resizing with both the width and height parameters:

When both dimensions are provided, the image will be resized proportionally so that the image is not distorted. In this case, the image dimensions become 500x338.

image transformed with the resize task to a width of 500 and a height of 500 so that the image is not distorted

Resizing with both the width and height parameters using fit:crop:

When both dimensions are provided and the fit:crop parameter is used, the image will be cropped to the specified dimensions. In this case, the image dimensions become 500x500 and the image is cropped to the center by default.

image resized to 500x500 using the crop method

Resizing with both the width and height parameters using fit:clip:

When both dimensions are provided and the fit:clip parameter is used, the image is resized proportionally to the specified dimensions. In this case, the image dimensions become 500x338 and is identical to the above example where only width and height are specified.

image resized to 500x500 with the clip method, the result is the same as when only height and width are specified

Resizing with both the width and height parameters using fit:scale:

When both dimensions are provided and the fit:scale parameter is used, the image is resized to the exact specified dimensions. This can produce distorted images.

image resized to 1500x300 using the scale method, this produces a distorted image

Resizing with both the width and height parameters using fit:max:

When both dimensions are provided and the fit:max parameter is used, the image is resized proportionally to the specified dimensions, but unlike fit:clip the image will never be scaled to a size larger than the original image.

image transformed using the resize task with a width and height of 4000x3000 and the fit max parameter

Resizing with both the width and height parameters using fit:crop and align:left:

When both dimensions are provided and the fit:crop parameter is used with a left alignment (align:left), the image is cropped to the left side and produces an image that matches the dimensions specified.

image resized with the fit crop and alignment parameters to focus on the left side of the image

Resizing with both the width and height parameters using fit:crop and align:[bottom,right]:

When both dimensions are provided and the fit:crop parameter is used with a pairing of alignments: bottom and right (align:[bottom,right]), the image is cropped to the bottom right of the image and produces an image that matches the dimensions specified.

image resized with the fit crop and alignment parameters to focus on the bottom right side of the image

Resizing with both the width and height parameters using fit:crop and align:center:

When both dimensions are provided and the fit:crop parameter is used with align:center, the image is cropped to the center of the image and produces an image that matches the dimensions specified.

image resized with the fit crop and alignment parameters to focus on the center of the image

Original image

original photo to be transformed with the align to faces parameter

Resizing with both the width and height parameters using fit:crop and align:faces:

When both dimensions are provided and the fit:crop parameter is used with align:faces, the image is cropped to focus on the most prominent face in the image.

image transformed to focus on the most prominent face in the picture