---
title: "GraphQL | Image Transformations"
description: "<p>You can use the parameters of Contentstack’s <a href=\"/docs/developers/apis/image-delivery-api\" target=\"_self\">Image Delivery API</a> in GraphQL queries to transform images while fetching them.<br /><br />The following table consists of the different parameters that Contentstack GraphQL supports for image delivery, along with their acceptable values:<br /></p><div class=\"cs-table-wrapper\"><div class=\"cs-table\"><table><tbody><tr><td>Parameter</td><td>Supported Values</td></tr><tr><td>auto</td><td><ul><li>WEBP</li></ul></td></tr><tr><td>width</td><td><ul><li>String</li></ul></td></tr><tr><td>height</td><td><ul><li>String</li></ul></td></tr><tr><td>disable</td><td><ul><li>UPSCALE</li></ul></td></tr><tr><td>format</td><td><ul><li>GIF</li><li>PNG</li><li>JPG<br /></li><li>PJPG</li><li>WEBP</li><li>WEBPLL</li><li>WEBPLY</li></ul></td></tr><tr><td>fit</td><td><ul><li>BOUNDS</li><li>CROP</li></ul></td></tr><tr><td>quality</td><td><ul><li>Integer</li></ul></td></tr><tr><td>crop</td><td><ul><li>String</li></ul></td></tr><tr><td>trim</td><td><ul><li>String</li></ul></td></tr><tr><td>orient</td><td><ul><li>DEFAULT</li><li>HORIZONTALLY</li><li>BOTH</li><li>VERTICALLY</li><li>ROTATE90LEFT</li><li>ROTATE90RIGHT</li></ul></td></tr><tr><td>overlay</td><td><ul><li>String</li></ul></td></tr><tr><td>overlay_align</td><td><ul><li>TOP</li><li>BOTTOM</li><li>LEFT</li><li>RIGHT</li><li>MIDDLE</li><li>CENTER</li></ul></td></tr><tr><td>overlay_repeat</td><td><ul><li>X</li><li>Y</li><li>BOTH</li></ul></td></tr><tr><td>overlay_width</td><td><ul><li>String</li></ul></td></tr><tr><td>overlay_height</td><td><ul><li>String</li></ul></td></tr><tr><td>pad</td><td><ul><li>String</li></ul></td></tr><tr><td>bg_color</td><td><ul><li>String</li></ul></td></tr><tr><td>dpr</td><td><ul><li>String</li></ul></td></tr><tr><td>disposition</td><td><ul><li>ATTACHMENT</li><li>INLINE</li></ul></td></tr></tbody></table></div></div><p>Let us look at a few simple and complex examples to understand how Contentstack’s Image Delivery parameters work with GraphQL queries to transform images.</p>"
url: "https://www.contentstack.com/docs/developers/apis/graphql-content-delivery-api/image-transformations"
product: "Contentstack"
doc_type: "guide"
audience:
  - developers
  - admins
version: "current"
last_updated: "2026-06-02"
---

# GraphQL | Image Transformations

You can use the parameters of Contentstack’s [Image Delivery API](/docs/developers/apis/image-delivery-api) in GraphQL queries to transform images while fetching them.  
  
The following table consists of the different parameters that Contentstack GraphQL supports for image delivery, along with their acceptable values:  

Parameter

Supported Values

auto

*   WEBP

width

*   String

height

*   String

disable

*   UPSCALE

format

*   GIF
*   PNG
*   JPG  
    
*   PJPG
*   WEBP
*   WEBPLL
*   WEBPLY

fit

*   BOUNDS
*   CROP

quality

*   Integer

crop

*   String

trim

*   String

orient

*   DEFAULT
*   HORIZONTALLY
*   BOTH
*   VERTICALLY
*   ROTATE90LEFT
*   ROTATE90RIGHT

overlay

*   String

overlay\_align

*   TOP
*   BOTTOM
*   LEFT
*   RIGHT
*   MIDDLE
*   CENTER

overlay\_repeat

*   X
*   Y
*   BOTH

overlay\_width

*   String

overlay\_height

*   String

pad

*   String

bg\_color

*   String

dpr

*   String

disposition

*   ATTACHMENT
*   INLINE

Let us look at a few simple and complex examples to understand how Contentstack’s Image Delivery parameters work with GraphQL queries to transform images.

## Using a Single Parameter

### Try 'Format' Parameter

Let’s get started by using a single format parameter to understand how these parameters function.

To convert an image placed on your Contenstack website from one format to another, use the format parameter. For example, we have set the format parameter to GIF in the following image transformation query.

```
query {
  all_assets(limit: 25) {
    total
    items {
        title
            url(transform: {format: GIF})
    }
  }
}
```

This query will convert the current image format to a GIF format.

## Using Multiple Parameters

### Try 'Width' and 'Height' Parameters

Let’s look at a few sample GraphQL queries that make use of multiple parameters.

##### Changing the Width and Height

To dynamically resize the width and height of your output image, use the width and height parameters. For example, we have set the values of the width and height parameters to ‘650’ and ‘400’, respectively, in the following image transformation query.

```
query {
  all_assets(limit: 25) {
    total
    items {
        title
      url(transform: {width: "650", height: "400", disable: UPSCALE})
    }
  }
}
```

This query will render an output image with width and height values of 650 and 400 pixels, respectively.

**Note**: We have also set the disable parameter to UPSCALE to disable the upscale image feature for the output image in the above image transformation query.

### Try 'Overlay' and 'Overlay Align' Parameters

##### Using the Overlay and Overlay Align Parameters

To place one image on top of another, use the overlay parameter. In addition, use the overlay\_align parameter to define the position of the overlay image.

For example, we have specified the value of the overlay parameter as the URL of the image to be placed on top. We have also set the value of the overlay\_align parameter as ‘LEFT’ in the following image transformation query.

```
query {
  all_assets(limit: 25) {
    total
    items {
        title
      url(transform: {overlay: "/v3/assets/blteae40eb499811073/bltb21dacdd20d0e24c/59e0c401462a293417405f34/download", overlay_align: LEFT})
    }
  }
}
```

This query will place the image lying at the specified URL on top of the original image. It will also align the overlay image toward the left side of the original image.