---
title: "lim:image"
manual: "LIA Imageserver"
version: "main"
permalink: "https://docs.typo3.org/permalink/lia/lia_imageserver:usage-image@main"
source: "Usage/Image.rst"
rendered: "2026-10-01T15:01:11+00:00"
---

# lim:image {#usage-image}

Based on the core ViewHelper `<f:image>`. Adds `sourceSets`, WebP
support and the argument `imageServerOptions`, which is taken into account
during processing.

For the inherited arguments see the core documentation of [f:image](https://docs.typo3.org/other/typo3/view-helper-reference/14.3/en-us/Global/Image.html#typo3-fluid-image). The
complete argument reference of this ViewHelper is generated from the source
code, see [Image ViewHelper \<lim:image>](https://docs.typo3.org/permalink/lia/lia_imageserver:lia-liaimageserver-image@main).

## Additional arguments {#usage-image-arguments}

| Argument | Description | Type |
| --- | --- | --- |
| `imageServerOptions` | Options passed to the image server. Any valid image server option is allowed. These options overrule all other attributes. | array |
| `enableWebPSupport` | Add WebP sources. Default: `false`. | bool |
| `cropVariant` | Name of the crop variant configured in the backend. Default: `default`. | string |
| `objectFit` | Object fit mode for the polyfill. | string |
| `objectPosition` | Object position for the polyfill. | string |
| `sizes` | `sizes` entries for the `<img>` element, one per source set index. | array |
| `sourceSets` | Source set configuration. Always provide a default source set. | array |
| `respectImageWidth` | If set, source set definitions are processed so that they do not exceed the given image width. Default: `0`. | int |
| `respectImageWidthClasses` | Classes applied to the `<img>` element when `respectImageWidth` is set. Default: `staticimage`, `u-respect-image-width`. | array |
| `passThrough` | Skip the external image server. The URL points to the file processed by TYPO3. | bool |
| `loading` | Loading attribute: `none`, `eager` or `lazy`. Default: `lazy`. | string |
| `additionalAttributes` | Additional tag attributes, added directly to the resulting HTML tag. | array |
| `fetchPriority` | Priority hint: `high`, `low` or `auto`. | string |
| `liaContext` | Opaque context for [ModifyProcessingInstructionsEvent](https://docs.typo3.org/permalink/lia/lia_imageserver:developer-events@main) listeners, for example `{aiBadge: '0'}`. Never forwarded to the image server. `_maxRenderWidth` (the largest requested width of the call) is injected automatically. | array |

> [!NOTE]
> A `sourceSets` entry without `h` inherits the ratio of the numeric
> `width` and `height` arguments. How the image is fitted into that size
> is decided by the image server backend (lia_middleware_imgix crops it,
> unless the source set or `imageServerOptions` set `fit`). Locally
> processed files fit within the box.

> [!NOTE]
> `height="auto"` derives the height from the ratio of the crop variant at
> the numeric `width`, or from the whole image when no crop is stored;
> `width="auto"` derives the width at the numeric `height` the same way, e.g.
> for rows of images with a fixed height. Use
> it for crop variants that allow a free ratio, or whose stored crops have
> different ratios: a fixed height would cut those images to the
> template's shape once the backend crops to width and height. The rendered
> `width`/`height` attributes keep the crop's ratio, and `sourceSets`
> entries carry only `w`. Supported for FAL images only: an external `src`
> with `auto`, `auto` on both sides or an image without dimensions throws in
> development and is logged otherwise.

## Example {#usage-image-example}

**EXT:my_sitepackage/Resources/Private/Partials/Image.html**

```html
<picture>
    <lim:image
        treatIdAsReference="true"
        src="{image.id}"
        alt="{image.alternative}"
        enableWebPSupport="true"
        width="600"
        height="400"
        loading="lazy"
        cropVariant="tablet"
        additionalAttributes="{itemprop: 'test'}"
        imageServerOptions="{fm: 'pjpg', q: 'lossless'}"
        sizes="{
          0: '100vw',
          1: '(min-width: 850px) 350px',
          2: '(min-width: 1024px) calc((100vw - 130px) / 2)'
        }"
        sourceSets="{
          0: {w:320},
          1: {w:350},
          2: {w:490},
          3: {w:1050}
        }"
        passThrough="true"
        fetchPriority="auto"
    />
</picture>
```

Inline notation with variables:

**EXT:my_sitepackage/Resources/Private/Partials/Image.html**

```html
<picture>
    <f:variable name="sizes" value="{
      0: '100vw',
      1: '(min-width: 850px) 350px',
      2: '(min-width: 1024px) calc((100vw - 130px) / 2)'
    }" />
    <f:variable name="srcSet" value="{0: {w:320}, 1: {w:350}, 2: {w:490}, 3: {w:1050}}" />

    {lim:image(treatIdAsReference: true, src: image.id, alt: image.alternative, width: '600c', height: '400c', cropVariant: 'tablet', imageServerOptions: '{fm: "pjpg", q: "lossless"}', sizes: sizes, sourceSets: srcSet, passThrough: true, loading: 'lazy', fetchPriority: 'auto')}
</picture>
```