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

# Image layers

> Overlay logos, watermarks, and other images onto a base image using l_image.

Overlay one image on top of another with the `l_image:` parameter. This is how you add watermarks, brand logos, and multi-image compositions in a single URL.

<Info>
  Every layer must end with `fl_layer_apply`, which composites the overlay onto the base image. Autorender preserves PNG and WebP transparency in overlays, so logos keep clean edges.
</Info>

## How does it work?

You add a `l_image:` block to the transform segment, pointing at the overlay asset's path, and close it with `fl_layer_apply`.

**Format:** `l_image:{image_path}`

<Tabs>
  <Tab title="Basic overlay">
    ```text theme={null}
    https://assets.autorender.io/LOKVTtKVGb/l_image:logo.svg,fl_layer_apply/doc1/porsche.jpg
    ```

    <div className="flex object-contain justify-center mt-4">
      <img src="https://assets.autorender.io/LOKVTtKVGb/l_image:logo.svg,fl_layer_apply/doc1/porsche.jpg" alt="Basic image overlay" className="border border-gray-200 dark:border-gray-800" />
    </div>
  </Tab>

  <Tab title="Resized logo (lw_300)">
    ```text theme={null}
    https://assets.autorender.io/LOKVTtKVGb/l_image:logo.svg,lw_300,fl_layer_apply/doc1/porsche.jpg
    ```

    <div className="flex object-contain justify-center mt-4">
      <img src="https://assets.autorender.io/LOKVTtKVGb/l_image:logo.svg,lw_300,fl_layer_apply/doc1/porsche.jpg" alt="Resized logo" className="border border-gray-200 dark:border-gray-800" />
    </div>
  </Tab>

  <Tab title="Watermark (tp_south-east)">
    ```text theme={null}
    https://assets.autorender.io/LOKVTtKVGb/l_image:logo.svg,lw_300,tp_south-east,fl_layer_apply/doc1/porsche.jpg
    ```

    <div className="flex object-contain justify-center mt-4">
      <img src="https://assets.autorender.io/LOKVTtKVGb/l_image:logo.svg,lw_300,tp_south-east,fl_layer_apply/doc1/porsche.jpg" alt="Watermark placement" className="border border-gray-200 dark:border-gray-800" />
    </div>
  </Tab>

  <Tab title="Absolute position (x, y)">
    ```text theme={null}
    https://assets.autorender.io/LOKVTtKVGb/l_image:logo.svg,lw_200,x_150,y_150,fl_layer_apply/doc1/porsche.jpg
    ```

    <div className="flex object-contain justify-center mt-4">
      <img src="https://assets.autorender.io/LOKVTtKVGb/l_image:logo.svg,lw_200,x_150,y_150,fl_layer_apply/doc1/porsche.jpg" alt="Absolute positioning" className="border border-gray-200 dark:border-gray-800" />
    </div>
  </Tab>
</Tabs>

## How to size the overlay?

Set the overlay dimensions independently of the base image with `lw_` and `lh_`. Pass one and Autorender scales the other to preserve the overlay's aspect ratio.

| Parameter | Description              |
| --------- | ------------------------ |
| `lw_`     | Overlay width in pixels  |
| `lh_`     | Overlay height in pixels |

For example, `lw_300` sizes the overlay to **300 px** (`lw_300`) wide and scales its height to match.

## How to position the overlay?

Anchor the overlay to a region of the base image with `tp_`.

| Code | Placement    | Code | Placement     |
| ---- | ------------ | ---- | ------------- |
| `nw` | Top-left     | `n`  | Top-center    |
| `ne` | Top-right    | `c`  | Center        |
| `sw` | Bottom-left  | `s`  | Bottom-center |
| `se` | Bottom-right |      |               |

For pixel-precise placement, use `x_` and `y_` to set the overlay's coordinates directly.

| Parameter | Description                                |
| --------- | ------------------------------------------ |
| `x_`      | X coordinate from the left edge, in pixels |
| `y_`      | Y coordinate from the top edge, in pixels  |

<Tip>
  Use an SVG for logo overlays (e.g. `l_image:logo.svg`) so the mark stays sharp at any output size, since SVGs scale without pixelation.
</Tip>

## How to stack multiple layers?

Stack overlays by writing one `l_image:` block per asset, each closed with `fl_layer_apply`.

<Warning>
  A layer without a trailing `fl_layer_apply` is not composited onto the base image. Close every `l_image:` block with `fl_layer_apply`.
</Warning>

## Next steps

<CardGroup cols={2}>
  <Card title="Text layers" icon="font" iconType="solid" href="/docs/transformations/text-layers">
    Add text overlays with `l_text:` for captions and banners.
  </Card>

  <Card title="Recipes" icon="bookmark" iconType="solid" href="/docs/transformations/recipes">
    Save watermark and logo layouts as reusable `t_` tokens.
  </Card>

  <Card title="Border radius" icon="circle" iconType="solid" href="/docs/transformations/border-radius">
    Round a composited image for card layouts.
  </Card>

  <Card title="Crop" icon="crop-simple" iconType="solid" href="/docs/transformations/crop">
    Size the base image before compositing overlays onto it.
  </Card>
</CardGroup>