--- title: "lim:widget.responsiveImage" manual: "LIA Imageserver" version: "2.3" permalink: "https://docs.typo3.org/permalink/lia/lia_imageserver:usage-responsive-image@2.3" source: "Usage/ResponsiveImage.rst" modified: "2026-09-16T09:22:57+00:00" --- # lim:widget.responsiveImage Renders a responsive `` element from a source set configuration. Supports WebP sources, media queries and art direction through crop variants. > [!NOTE] > When a legacy external image server is used, this ViewHelper only supports > files that are hosted on that external storage. The complete argument reference is generated from the source code, see [Widget.responsiveImage ViewHelper \](https://docs.typo3.org/permalink/lia/lia_imageserver:lia-liaimageserver-widget-responsiveimage@2.3). ## Tag usage **EXT:my_sitepackage/Resources/Private/Partials/Image.html** ```html ``` ## Inline usage with a variable Store the nested `sourceSets` array in a variable and pass it on. This keeps the inline notation readable. **EXT:my_sitepackage/Resources/Private/Partials/Image.html** ```html {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, fetchPriority: 'auto')} ``` ## Arguments | Argument | Description | Type | | --- | --- | --- | | `src` | A path to a file, a combined FAL identifier or a uid. If `treatIdAsReference` is set, the integer is the uid of a `sys_file_reference` record. If you already have a FAL object, use `image` instead. | string | | `image` | A FAL object (`File` or `FileReference`). | object | | `treatIdAsReference` | Set to `true` when `src` holds the uid of a `sys_file_reference` record. | bool | | `sourceSets` | Source set configuration keyed by media query. Each entry may carry `srcset`, `sizes`, `default`, `options` and `cropVariant`. Always provide a default source set. | array | | `defaultOptions` | Options applied to all source sets. Which options exist depends on the image server in use; for imgix see [https://docs.imgix.com/apis/url](https://docs.imgix.com/apis/url). | array | | `enableWebPSupport` | Add WebP sources. Default: `true`. | bool | | `class` | CSS class(es) for the `` element. | string | | `objectPositionLeft` | Object position left for the polyfill. Default: `center`. | string | | `objectPositionTop` | Object position top for the polyfill. Default: `center`. | string | | `objectFit` | Object fit mode for the polyfill. | string | | `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 `` element when `respectImageWidth` is set. Default: `staticimage`, `u-respect-image-width`. | array | | `loading` | Native lazy loading: `lazy`, `eager` or `auto`. | string | | `dimensions` | Set `height` and `width` attributes dynamically. Default: `false`. | bool | | `fetchPriority` | Priority hint: `high`, `low` or `auto`. | string | | `liaContext` | Opaque context for [ModifyProcessingInstructionsEvent](https://docs.typo3.org/permalink/lia/lia_imageserver:developer-events@2.3) listeners, for example `{aiBadge: '0'}`. Never forwarded to the image server. `_maxRenderWidth` (the largest requested width of the call) is injected automatically. | array | | `customWidgetId` | Extends the widget identifier with a custom id. | string | | `storeSession` | Store the widget session in a cookie. Default: `true`. | bool |