---
title: "Widget.responsiveImage ViewHelper <lim:widget.responsiveImage>"
manual: "LIA Imageserver"
version: "2.3"
permalink: "https://docs.typo3.org/permalink/lia/lia_imageserver:lia-liaimageserver-widget-responsiveimage@2.3"
source: "ViewHelpers/LiaImageserver/Widget/ResponsiveImage.rst"
modified: "2026-09-16T09:22:57+00:00"
---

# Widget.responsiveImage ViewHelper `<lim:widget.responsiveImage>`

This ViewHelper render a responsive image with given configuration. It also support webp, media queries and art queries.

## Examples

```html
<picture>
    <lim:widget.responsiveImage
        image="{image}"
        enableWebPSupport="true"
        defaultOptions="{'fm': 'jpg'}"
        sourceSets="{
            '(max-width: 767px)':
            {
                srcset: {0: {w:320},1: {w:480},2: {w:560},3: {w:640}},
                sizes: 'calc(100vw - 30px)',
                default: 1,
                options: {fm: 'png'},
                cropVariant: 'tablet'
            },
            '(min-width: 768px)':
            {
                srcset: {0: {w:640},1: {w:768},2: {w:900},3: {w:1024}},
                sizes: '100vw',
                cropVariant: 'smartphone'
            }
        }"
    />
</picture>
```

Here an example if you have to use the src attribute.

```html
<picture>
    <lim:widget.responsiveImage
        src="{image.uid}"
        enableWebPSupport="true"
        treatIdAsReference="1"
        class="css-class-on-image"
        objectFit="cover"
        objectPositionLeft="center"
        objectPositionTop="top"
        defaultOptions="{'fm': 'jpg', fit: 'crop'}"
        sourceSets="{
            '(max-width: 767px)':
            {
                srcset: {0: {w:320,h:350,fm:'jpeg'},1: {w:480,h:525},2: {w:560,h:613},3: {w:640,h:700}},
                sizes: 'calc(100vw - 30px)',
                default: 1,
                options: {fm: 'pjpg', crop: 'left,top'}
            },
            '(min-width: 768px) and (max-width: 1024px) and (min-height: 767px)':
            {
                srcset: {0: {w:640,h:475},1: {w:768,h:570},2: {w:900,h:668},3: {w:1024,h:760}},
                sizes: '100vw',
                options: {fm: 'pjpg', crop: 'right,bottom'}
            }
        }"
    />
</picture>
```

> [!WARNING]
> **Attention**
>
> -   **Inline notation is also possible. But (!) the syntax can get messy if you have to deal with nested arrays in the inline notation markup.**
>
>     This ViewHelper makes heavy use of nested array for the `sourceSets` attribute. Consider it as best practice to store your needed sourceSets in fluid variable via `f:variable`.
>
> ```
> <picture>
>     <f:variablen
>         name="responsiveImageSourceSets"
>         value="{
>             '(max-width: 767px)':
>             {
>                 srcset: {0: {w:320,h:350,fm:'jpeg'},1: {w:480,h:525},2: {w:560,h:613},3: {w:640,h:700}},
>                 sizes: 'calc(100vw - 30px)',
>                 default: 1,
>                 options: {fm: 'pjpg', crop: 'left,top'}
>             },
>             '(min-width: 768px) and (max-width: 1024px) and (min-height: 767px)':
>             {
>                 srcset: {0: {w:640,h:475},1: {w:768,h:570},2: {w:900,h:668},3: {w:1024,h:760}},
>                 sizes: '100vw',
>                 options: {fm: 'pjpg', crop: 'right,bottom'}
>             }
>         }"
>     />
>     {lim:widget.responsiveImage(src: image.uid, enableWebPSupport: 'true', treatIdAsReference: 'true', class: 'css-class-on-image' objectFit: 'cover', objectPositionLeft: 'center', objectPositionTop: 'top', defaultOptions: '{fm: 'jpg', fit: 'crop'}' sourceSets: responsiveImageSourceSets)}
> </picture>
> ```

**Arguments**

The following arguments are available for the widget.responsiveImage ViewHelper:

-   **class**

    -   *Type:* string

    Class of \<img />

-   **customWidgetId**

    -   *Type:* string

    extend the widget identifier with a custom widget id

-   **defaultOptions**

    -   *Type:* array
    -   *Default:* array (
    )

    Options applied to all source sets

-   **dimensions**

    -   *Type:* bool
    -   *Default:* false

    Set height and width dynamically

-   **enableWebPSupport**

    -   *Type:* bool
    -   *Default:* true

    Enable webP support

-   **fetchPriority**

    -   *Type:* string

    A string representing the priority hint. Possible values are:. "high", "low" or "auto"

-   **image**

    -   *Type:* object

    a FAL object (\\TYPO3\\CMS\\Core\\Resource\\File or \\TYPO3\\CMS\\Core\\Resource\\FileReference)

-   **liaContext**

    -   *Type:* array
    -   *Default:* array (
    )

    Opaque context for ModifyProcessingInstructionsEvent listeners, e.g. {aiBadge: '0'}. Never forwarded to the image server.

-   **loading**

    -   *Type:* string

    Native lazy-loading for images property. Can be "lazy", "eager" or "auto"

-   **objectFit**

    -   *Type:* string
    -   *Default:* ''

    Polyfill object fit mode

-   **objectPositionLeft**

    -   *Type:* string
    -   *Default:* 'center'

    Polyfill object position left

-   **objectPositionTop**

    -   *Type:* string
    -   *Default:* 'center'

    Polyfill object position top

-   **respectImageWidth**

    -   *Type:* int
    -   *Default:* 0

    If set source-set definitions will be processed to ensure not to exceed the given image width

-   **respectImageWidthClasses**

    -   *Type:* array
    -   *Default:* array (
      0 => 'staticimage',
      1 => 'u-respect-image-width',
    )

    If respectImageWidh is set, this classes will be applied to the IMG tag

-   **sourceSets**

    -   *Type:* array

    Source set configuration

-   **src**

    -   *Type:* string

    a path to a file, a combined FAL identifier or an uid (int). If $treatIdAsReference is set, the integer is considered the uid of the sys_file_reference record. If you already got a FAL object, consider using the $image parameter instead

-   **storeSession**

    -   *Type:* bool
    -   *Default:* true

    Store the widgets session (utilizing a cookie).

-   **treatIdAsReference**

    -   *Type:* bool

    If you use an UID in the \`src\` attribute you have to set this argument to \`true\` to get an result.