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

# CDN & Transformations

> Asset delivery through CDN with on-demand image transformations

All assets are served through Metabind's global CDN, providing fast delivery with geographic distribution and automatic caching.

## URL Structure

Assets are served with the following URL pattern:

```
https://cdn.metabind.ai/{organizationId}/{projectId}/assets/{assetId}/{filename}
```

<Info>
  Asset URLs are versioned and include cache control headers for optimal performance.
</Info>

## Dynamic Transformations

Image transformations can be applied via URL parameters on any CDN image URL:

```
https://cdn.metabind.ai/{org}/{project}/assets/{assetId}/image.jpg?w=800&h=600&fit=cover&q=80
```

### How It Works

1. When transformation parameters are detected, the CDN automatically redirects (302) to a transformation endpoint
2. The transformed image is cached at the CDN edge for subsequent requests
3. You can directly access the transformation endpoint by prefixing `/transform/` to the path (bypasses redirect)

## Transformation Parameters

| Parameter | Description | Values | Example |
| - | - | - | - |
| `w` | Width in pixels | 1-4096 | `w=800` |
| `h` | Height in pixels | 1-4096 | `h=600` |
| `fit` | Resize mode | `cover`, `contain`, `inside`, `outside`, `fill` | `fit=cover` |
| `q` | Quality | 1-100 | `q=80` |
| `fm` | Output format | `jpeg`, `jpg`, `png`, `webp`, `avif`, `tiff`, `gif` | `fm=webp` |
| `blur` | Blur intensity | 0-100 | `blur=10` |
| `dpr` | Device pixel ratio (retina) | 0.5-3 | `dpr=2` |
| `crop` | Crop mode | Various crop parameters | `crop=...` |

## Examples

### Resize for Thumbnails

```
https://cdn.metabind.ai/org123/proj456/assets/asset789/photo.jpg?w=200&h=200&fit=cover
```

### Convert to WebP with Quality

```
https://cdn.metabind.ai/org123/proj456/assets/asset789/photo.jpg?fm=webp&q=85
```

### Retina Display Support

```
https://cdn.metabind.ai/org123/proj456/assets/asset789/photo.jpg?w=400&dpr=2
```

This returns an 800px wide image optimized for 2x displays.

### Apply Blur Effect

```
https://cdn.metabind.ai/org123/proj456/assets/asset789/photo.jpg?w=1200&blur=20
```

## Fit Modes

No fit mode upscales the image. When the target is larger than the original, `contain` pads to the target size and the other modes return the original size.

<Tabs>
  <Tab title="cover">
    Scales the image to fill the target dimensions. May crop parts of the image.

    Best for: Hero images, backgrounds, thumbnails where filling space is important.
  </Tab>

  <Tab title="contain">
    Scales the image to fit within the target dimensions. Preserves aspect ratio, may add letterboxing.

    Best for: Product images, logos where showing the complete image matters.
  </Tab>

  <Tab title="inside">
    Scales the image to fit within the target dimensions, preserving aspect ratio, without padding. The output can be smaller than the target in one dimension.

    Best for: Thumbnails where the exact output size doesn't matter.
  </Tab>

  <Tab title="outside">
    Same as cover, but never shrinks the image below the target dimensions.

    Best for: Ensuring minimum dimensions while preserving quality.
  </Tab>

  <Tab title="fill">
    Stretches the image to exactly fill the target dimensions. May distort the image.

    Best for: Specific layout requirements where exact dimensions are critical.
  </Tab>
</Tabs>

## Format Selection Guide

| Format | Best For | Pros | Cons |
| - | - | - | - |
| `webp` | General web use | Small file size, wide support | Not supported in older browsers |
| `avif` | Maximum compression | Smallest files, excellent quality | Limited browser support |
| `jpeg` | Photographs | Universal support, good compression | No transparency |
| `png` | Graphics with transparency | Lossless, transparency support | Larger file sizes |

<Tip>
  Use `fm=webp` for most web applications. It provides excellent compression with broad browser support.
</Tip>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.