> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreep.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# Image Transformations

> Dynamically resize, crop, and convert images on the fly via query parameters.

Dreep uses a high-performance image processing engine (powered by Sharp) to transform images seamlessly at the CDN edge.

You can combine any of the following query parameters onto your public or signed image URLs. The transformed image will be generated on the first request and aggressively cached globally.

***

## 1. Dimensions & Sizing

Resize your images by specifying the `width` and/or `height`.

| Parameter | Description                                                                  | Try It        |
| :-------- | :--------------------------------------------------------------------------- | :------------ |
| `width`   | Target width in pixels. If height is omitted, the aspect ratio is preserved. | `?width=500`  |
| `height`  | Target height in pixels. If width is omitted, the aspect ratio is preserved. | `?height=300` |

### Crop & Fit (`fit`)

When specifying both `width` and `height`, you can control how the image fits within those dimensions using the `fit` parameter.

| Value               | Description                                                                                      |
| :------------------ | :----------------------------------------------------------------------------------------------- |
| `cover` *(default)* | Crops the image to fill the exact dimensions while preserving aspect ratio.                      |
| `contain`           | Resizes the image to fit *inside* the dimensions without cropping. May leave letterboxing.       |
| `fill`              | Stretches the image to exactly match the dimensions, ignoring aspect ratio.                      |
| `inside`            | Resizes to be as large as possible while staying within the dimensions, preserving aspect ratio. |
| `outside`           | Resizes to be as small as possible while still covering the dimensions.                          |

**Example:**

```text theme={null}
https://cdn.dreep.cloud/api/v1/fetch/2f928a3f.jpg?width=400&height=400&fit=contain
```

### Explicit Crop (`crop`)

If you need exact pixel-perfect control over the crop, you can specify coordinates directly instead of using `fit`.

| Parameter | Format                  | Description                                                  | Try It                |
| :-------- | :---------------------- | :----------------------------------------------------------- | :-------------------- |
| `crop`    | `left,top,width,height` | Extracts a region from the image based on pixel coordinates. | `?crop=10,20,100,100` |

**Example:**
Extract a 200x200 square starting 50px from the left and 100px from the top:

```text theme={null}
https://cdn.dreep.cloud/api/v1/fetch/2f928a3f.jpg?crop=50,100,200,200
```

***

## 2. Formatting & Quality

Convert image types and compress them for optimal web delivery. Supported source image formats include **JPEG**, **PNG**, **WebP**, **GIF**, **TIFF**, **BMP**, **HEIC/HEIF**, and **SVG**.

| Parameter | Description                                                                                  | Try It         |
| :-------- | :------------------------------------------------------------------------------------------- | :------------- |
| `format`  | The target image output format. Valid options: `jpeg`, `png`, `webp`, `avif`, `tiff`, `gif`. | `?format=webp` |
| `quality` | Compression quality (1-100). Default is 80. Lower values reduce file size.                   | `?quality=60`  |

<Note>
  **Conversion Boundaries**: Image conversions must remain within the image family (`jpeg`, `png`, `webp`, `avif`, `tiff`, `gif`). Requesting video output formats (such as `mp4` or `webm`) on image assets is strictly blocked and returns an error.
</Note>

**Example:**
Serve a high-efficiency WebP image at 75% quality:

```text theme={null}
https://cdn.dreep.cloud/api/v1/fetch/2f928a3f.png?format=webp&quality=75
```

***

## 3. Position & Focal Point

When using `fit=cover` or cropping, you can specify which part of the image should be kept in view using the `gravity` parameter.

| Parameter | Value Options                                                                                                          | Description                                                                                |
| :-------- | :--------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------- |
| `gravity` | `north`, `northeast`, `east`, `southeast`, `south`, `southwest`, `west`, `northwest`, `center`, `attention`, `entropy` | Determines the focal point during a crop. `attention` uses AI-based focal point detection. |

**Example:**
Crop a square thumbnail but prioritize the most "interesting" part of the image (often faces/high contrast areas):

```text theme={null}
https://cdn.dreep.cloud/api/v1/fetch/2f928a3f.jpg?width=256&height=256&fit=cover&gravity=attention
```

***

## 4. Effects & Adjustments

Apply visual effects to the image.

| Parameter | Type                     | Description                                                                                                                                      | Try It             |
| :-------- | :----------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------- | :----------------- |
| `blur`    | number (0.3 - 100)       | Applies a Gaussian blur. Great for placeholder images.                                                                                           | `?blur=10`         |
| `rotate`  | `90`, `180`, `270`       | Rotates the image by the specified angle.                                                                                                        | `?rotate=90`       |
| `dpr`     | number (1-3)             | Device Pixel Ratio. Multiplies the requested dimensions by this number.                                                                          | `?width=100&dpr=2` |
| `radius`  | `max` or number (1-2000) | Rounds the corners of the image. Use `max` for a perfect circle/oval.                                                                            | `?radius=max`      |
| `bg`      | hex string (without #)   | Background color. Used for `contain` padding, or filling behind transparent corners when applying `radius` to formats without alpha (like JPEG). | `?bg=ff0000`       |

**Example:**
Create a heavily blurred low-quality placeholder:

```text theme={null}
https://cdn.dreep.cloud/api/v1/fetch/2f928a3f.jpg?width=50&quality=10&blur=20
```

***

## Combining Parameters

You can chain as many parameters as you need. Order does not matter.

```text theme={null}
https://cdn.dreep.cloud/api/v1/fetch/2f928a3f.jpg?width=1200&height=630&fit=cover&format=avif&quality=85&gravity=attention
```