---
title: "ImageTransform"
description: "ImageTransform"
url: "https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/typescript/reference/imagetransform"
product: "Contentstack"
doc_type: "guide"
audience:
  - developers
  - admins
version: "current"
last_updated: "2026-09-13"
---

# ImageTransform

## ImageTransform

Image transformations can be performed on images by specifying the desired parameters. The parameters control the specific transformations that will be applied to the image.

**Example:**

```
const url = 'www.example.com';const transformObj = new ImageTransform().bgColor('cccccc');const transformURL = url.transform(transformObj);
```

## auto

The auto method enables the functionality that automates certain image optimization features.

```
Example:
const url = 'www.example.com';
const transformObj = new ImageTransform().auto();

const transformURL = url.transform(transformObj);
```

## bgColor

The bgColor method sets a background color for the given image.

```
Example:
const url = 'www.example.com';
const transformObj = new ImageTransform().bgColor('cccccc');

const transformURL = url.transform(transformObj);
```

Color of the background

## blur

The blur method allows you to decrease the focus and clarity of a given image.

```
Example:
const url = 'www.example.com';
const transformObj = new ImageTransform().blur(10);

const transformURL = url.transform(transformObj);
```

Set the blur intensity between 1 to 1000

## brightness

The brightness method enables the functionality that automates certain image optimization features.

```
Example:
const url = 'www.example.com';
const transformObj = new ImageTransform().brightness(80.50);
const transformURL = url.transform(transformObj);
```

Set the brightness of the image between -100 to 100

## canvas

The canvas method allows you to increase the size of the canvas that surrounds an image.

```
Example 1:
const url = 'www.example.com';
const transformObj = new ImageTransform().canvas({ width: 100, height: 200 });
const transformURL = url.transform(transformObj);Example 2:
const url = 'www.example.com';
const transformObj = new ImageTransform().canvas({ width: 200, height: 300, canvasBy: CanvasByEnum.OFFSET, xval: 100, yval: 150 });
const transformURL = url.transform(transformObj);
```

Specifies what params to use for creating canvas - DEFAULT, ASPECTRATIO, REGION, OFFSET

Sets height of the canvas

Sets width of the canvas

Defines the X-axis position of the top left corner or horizontal offset

Defines the Y-axis position of the top left corner or vertical offset

## contrast

The contrast method enables the functionality that automates certain image optimization features.

```
Example:
const url = 'www.example.com';
const transformObj = new ImageTransform().contrast(-80.99);
const transformURL = url.transform(transformObj);
```

Set the contrast of the image between -100 to 100

## crop

The crop method allows you to remove pixels from an image by adjusting the height and width in the percentage value or aspect ratio.

```
Example 1:
const url = 'www.example.com';
const transformObj = new ImageTransform().crop({ width: 100, height: 200 });

const transformURL = url.transform(transformObj);Example 2:
const url = 'www.example.com';
const transformObj = new ImageTransform().crop({ width: 2, height: 3, cropBy: CropByEnum.ASPECTRATIO });

const transformURL = url.transform(transformObj);Example 3:
const url = 'www.example.com';
const transformObj = new ImageTransform().crop({ width: 200, height: 300, cropBy: CropByEnum.REGION, xval: 100, yval: 150 });
const transformURL = url.transform(transformObj);Example 4:
const url = 'www.example.com';
const transformObj = new ImageTransform().crop({ width: 200, height: 300, cropBy: CropByEnum.OFFSET, xval: 100, yval: 150 });

const transformURL = url.transform(transformObj);
```

Specify the CropBy type using values DEFAULT, ASPECTRATIO, REGION, or OFFSET.

Specify the width to resize the image to.

The value can be in pixels (for example, 400) or in percentage (for example, 0.60 OR '60p')

Specify the height to resize the image to. The value can be in pixels (for example, 400) or in percentage (for example, 0.60 OR '60p')

For the CropBy Region, specify the X-axis position of the top left corner of the crop. For CropBy Offset, specify the horizontal offset of the crop region.

For CropBy Region, specify the Y-axis position of the top left corner of the crop. For CropBy Offset, specify the vertical offset of the crop region.

Ensures that the output image never returns an error due to the specified crop area being out of bounds. The output image is returned as an intersection of the source image and the defined crop area.

Ensures crop is done using content-aware algorithms. Content-aware image cropping returns a cropped image that automatically fits the defined dimensions while intelligently including the most important components of the image.

## dpr

The dpr method lets you deliver images with appropriate size to devices that come with a defined device pixel ratio.

```
Example:
const url = 'www.example.com';
const transformObj = new ImageTransform().resize({ width: 300, height: 500 }).dpr(10);
const transformURL = url.transform(transformObj);
```

Specify the device pixel ratio. The value should range between 1-10000 or 0.0 to 9999.999

## fit

The fit method enables you to fit the given image properly within the specified height and width.

```
Example:
const url = 'www.example.com';
const transformObj = new ImageTransform().resize({ width: 200, height: 200 }).fit(FitByEnum.BOUNDS);
const transformURL = url.transform(transformObj);
```

Specifies fit type (Bounds or Crop)

## format

The format method lets you convert a given image from one format to another.

```
Example:
const url = 'www.example.com';
const transformObj = new ImageTransform().format(FormatEnum.PJPG);
const transformURL = url.transform(transformObj);
```

Specify the format

## frame

The frame method retrieves the first frame from an animated GIF (Graphics Interchange Format) file that comprises a sequence of moving images.

```
Example:
const url = 'www.example.com';
const transformObj = new ImageTransform().frame();
const transformURL = url.transform(transformObj);
```

## orient

The orient method allows you to rotate or flip an image in any direction.

```
Example:
const url = 'www.example.com';
const transformObj = new ImageTransform().orient(Orientation.FLIP_HORIZONTAL);

const transformURL = url.transform(transformObj);
```

Type of Orientation. Values are DEFAULT, FLIP\_HORIZONTAL, FLIP\_HORIZONTAL\_VERTICAL, FLIP\_VERTICAL, FLIP\_HORIZONTAL\_LEFT, RIGHT, FLIP\_HORIZONTAL\_RIGHT, LEFT.

## overlay

The overlay method lets you place one image over another by specifying the relative URL of the image.

```
Example 1:
const url = 'www.example.com';
const transformObj = new ImageTransform().overlay({ relativeURL: overlayImgURL });
const transformURL = url.transform(transformObj);Example 2:
const url = 'www.example.com';
const transformObj = new ImageTransform().overlay({ relativeURL: overlayImgURL, align: OverlayAlignEnum.BOTTOM });
const transformURL = url.transform(transformObj);Example 3:
const url = 'www.example.com';
const transformObj = new ImageTransform().overlay({
                       relativeURL: overlayImgURL,
                       align: OverlayAlignEnum.BOTTOM,
                       repeat: OverlayRepeatEnum.Y,
                       width: '50p',
                     });
const transformURL = url.transform(transformObj);
```

URL of the image to overlay on base image

Lets you define the position of the overlay image. Accepted values are TOP, BOTTOM, LEFT, RIGHT, MIDDLE, CENTER

Lets you define how the overlay image will be repeated on the given image. Accepted values are X, Y, BOTH

Lets you define the width of the overlay image. For pixels, use any whole number between 1 and 8192. For percentages, use any decimal number between 0.0 and 0.99

Lets you define the height of the overlay image. For pixels, use any whole number between 1 and 8192. For percentages, use any decimal number between 0.0 and 0.99

Lets you add extra pixels to the edges of an image. This is useful if you want to add whitespace or border to an image

## padding

The padding method lets you add extra pixels to the edges of an image's border or add whitespace.

```
Example 1:
const url = 'www.example.com';
const transformObj = new ImageTransform().padding([25, 50, 75, 90]);
const transformURL = url.transform(transformObj);Example 2:
const url = 'www.example.com';
const transformObj = new ImageTransform().padding(50);
const transformURL = url.transform(transformObj);
```

padding value in pixels or percentages

## quality

The quality method lets you control the compression level of images that have lossy file format.

```
Example:
const url = 'www.example.com';
const transformObj = new ImageTransform().quality(50);
const transformURL = url.transform(transformObj);
```

Quality range: 1 - 100

## resize

The resize method lets you resize the image in terms of width, height, upscaling the image.

```
Example:
const url = 'www.example.com';
const transformObj = new ImageTransform().resize({ width: 200, height: 200, disable: 'upscale' });
const transformURL = url.transform(transformObj);
```

Specifies the width to resize the image to. The value can be in pixels (for example, 400) or in percentage (for example, 0.60 OR '60p')

Specifies the height to resize the image to.The value can be in pixels (for example, 400) or in percentage (for example, 0.60 OR '60p')

The disable parameter disables the functionality that is enabled by default. As of now, there is only one value, i.e., upscale, that you can use with the disable parameter.

## resizeFilter

The resizeFilter method allows you to increase or decrease the number of pixels in a given image.

```
Example:
const url = 'www.example.com';
const transformObj = new ImageTransform().resize({ width: 500, height: 550 }).resizeFilter(ResizeFilterEnum.NEAREST);
const transformURL = url.transform(transformObj);
```

Types of Filter to apply. Values are NEAREST, BILINEAR, BICUBIC, LANCZOS2, LANCZOS3.

## saturation

The saturation method allows you to increase or decrease the intensity of the colors in a given image.

```
Example:
const url = 'www.example.com';
const transformObj = new ImageTransform().saturation(-80.99);
const transformURL = url.transform(transformObj);
```

To set the saturation of image between -100 to 100

## sharpen

The sharpen method allows you to increase the definition of the edges of objects in an image.

```
Example:
const url = 'www.example.com';
const transformObj = new ImageTransform().sharpen(5, 1000, 2);
const transformURL = url.transform(transformObj);
```

Specifies the amount of contrast to be set for the image edges between the range \[0-10\]

Specifies the radius of the image edges between the range \[1-1000\]

Specifies the range of image edges that need to be ignored while sharpening between the range \[0-255\]

## trim

The trim method lets you trim an image from the edges.

```
Example 1:
const url = 'www.example.com';
const transformObj = new ImageTransform().trim([25, 50, 75, 90]);
const transformURL = url.transform(transformObj);Example 2:
const url = 'www.example.com';
const transformObj = new ImageTransform().trim([25, 50, 25]);
const transformURL = url.transform(transformObj);Example 3:
const url = 'www.example.com';
const transformObj = new ImageTransform().trim(50);
const transformURL = url.transform(transformObj);
```

Specifies values for top, right, bottom, and left edges of an image.

## ImageTransform | TypeScript Delivery SDK | Contentstack

The ImageTransform class in the TypeScript Delivery SDK applies transformations to images by specifying parameters that control how each image is rendered.