---
title: "lim:image"
manual: "LIA Imageserver"
version: "1.2"
permalink: "https://docs.typo3.org/permalink/lia/lia_imageserver:usage-image@1.2"
source: "Usage/Image.rst"
modified: "2026-09-16T09:22:52+00:00"
---

# lim: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@1.2).

## Additional 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` | Native lazy loading attribute: `lazy`, `eager` or `auto`. | string |
| `additionalAttributes` | Additional tag attributes, added directly to the resulting HTML tag. | array |
| `fetchPriority` | Priority hint: `high`, `low` or `auto`. | string |

## 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>
```