> ## 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=crop&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

<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">
    Same as contain, but never enlarges the image beyond its original size.

    Best for: Preventing upscaling of small images.
  </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>