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

# Image Handling

> Learn how to use Cloudflare Image transformations for optimizing and serving images in the IXO client applications

<Tip>
  Cloudflare Image transformations enable on-the-fly image optimization, resizing, and format conversion for ixo.world domain. This service improves performance across all IXO client applications.
</Tip>

## Configuration

* **Domain**: ixo.world
* **Status**: Enabled
* **Allowed Origins**: ipfs.gateway.ixo.world

## Usage

Transform images using the following URL format:

```bash theme={"system"}
https://ixo.world/cdn-cgi/image/[OPTIONS]/[SOURCE-IMAGE-CID]
```

### Example

```bash theme={"system"}
https://ixo.world/cdn-cgi/image/width=300,quality=80/[SOURCE-IMAGE-CID]
```

## Responsive Images

### Using width=auto

Automatically selects the best image size based on device:

```bash theme={"system"}
https://ixo.world/cdn-cgi/image/width=auto/[SOURCE-IMAGE-CID]
```

Available sizes:

* 320px (mobile)
* 640px (tablet)
* 960px (laptop)
* 1920px (desktop)

### Using srcset (Recommended)

```html theme={"system"}
<img
  sizes="(max-width: 767px) 640px,
         (max-width: 1023px) 960px,
         1920px"
  src="https://ixo.world/cdn-cgi/image/width=960/[SOURCE-IMAGE-CID]"
  alt="Responsive image"
/>
```

## Parameters

### Resizing

<AccordionGroup>
  <Accordion title="width" icon="arrows-left-right">
    * **Description:** Image width in pixels
    * **Example:** `width=300`
  </Accordion>

  <Accordion title="height" icon="arrows-up-down">
    * **Description:** Image height in pixels
    * **Example:** `height=200`
  </Accordion>

  <Accordion title="fit" icon="crop">
    * **Description:** Resizing method
    * **Example:** `fit=cover`
  </Accordion>

  <Accordion title="gravity" icon="crosshairs">
    * **Description:** Focus point when cropping
    * **Example:** `gravity=auto`
  </Accordion>
</AccordionGroup>

### Fit Options

* `scale-down`: Resize to fit within dimensions, never enlarge
* `contain`: Resize to fit within dimensions, preserving aspect ratio
* `cover`: Resize and crop to fill dimensions
* `crop`: Crop without scaling
* `pad`: Resize and add padding to match dimensions

### Quality and Format

<AccordionGroup>
  <Accordion title="quality" icon="gauge-high">
    * **Description:** JPEG/WebP quality (1-100)
    * **Example:** `quality=80`
  </Accordion>

  <Accordion title="format" icon="file-image">
    * **Description:** Output image format
    * **Example:** `format=auto`
  </Accordion>

  <Accordion title="sharpen" icon="wand-magic-sparkles">
    * **Description:** Sharpen level (0.0-10.0)
    * **Example:** `sharpen=1.0`
  </Accordion>
</AccordionGroup>

### Format Options

* `auto`: Best format based on browser
* `webp`: WebP format
* `avif`: AVIF format
* `json`: Return image metadata

## Limitations

* Maximum image area: 100 megapixels
* Maximum GIF/WebP animation: 50 megapixels
* Maximum file size: 70 MB
* AVIF format: Limited to 1,600 pixels max
* HEIC/HEIF formats: Not supported

## Security

* Only images from allowed origins can be transformed
* SVG files are automatically sanitized
* Source image URLs must be from allowed origins

## Examples

### Thumbnail

```bash theme={"system"}
https://ixo.world/cdn-cgi/image/width=150,height=150,fit=cover,gravity=auto/[SOURCE-IMAGE-CID]
```

### Responsive Profile Image

```bash theme={"system"}
https://ixo.world/cdn-cgi/image/width=auto,fit=cover,gravity=auto/[SOURCE-IMAGE-CID]
```

### Optimized Banner

```bash theme={"system"}
https://ixo.world/cdn-cgi/image/width=1200,height=400,fit=cover,quality=80,format=auto/[SOURCE-IMAGE-CID]
```

### High-DPI Image

```bash theme={"system"}
https://ixo.world/cdn-cgi/image/width=600,dpr=2,quality=75/[SOURCE-IMAGE-CID]
```

## Troubleshooting

1. Verify source URL is in allowed origins
2. Check image exists at source URL
3. Ensure transformation parameters are correctly formatted
4. Verify image size is within limits

## Developer Resources

<CardGroup>
  <Card title="Security Guide" icon="shield-check" href="/guides/dev/domain-privacy">
    Security best practices
  </Card>

  <Card title="Examples" icon="lightbulb" href="/guides/hands-on">
    Implementation examples
  </Card>
</CardGroup>