---
title: "Image.srcset ViewHelper <f:image.srcset>"
manual: "Fluid ViewHelper Reference"
version: "main"
permalink: "https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-image-srcset@main"
source: "Global/Image/Srcset.rst"
rendered: "2026-10-01T13:47:43+00:00"
---

# Image.srcset ViewHelper `<f:image.srcset>` {#typo3-fluid-image-srcset}

<!-- TODO: no Markdown rendering for "versionadded" -->

The new ViewHelper {f:image.srcset} simplifies previous manual
implementations using {f:uri.image} for each image size
manually. It now makes it easy to supply images at different dimensions
based on a single image.

ViewHelper to generate a list of image URLs and their corresponding srcset
descriptors to be used in a srcset attribute of an `<img>` or
`<source>` tag.

The images at different dimensions are generated automatically.

> [!NOTE]
> **See also**
>
> In PHP context you can use
> `\TYPO3\CMS\Core\Html\Srcset\SrcsetAttribute` to generate srcset
> attributes.

Go to the source code of this ViewHelper: [Image\\SrcsetViewHelper.php (GitHub)](https://github.com/TYPO3/typo3/blob/main/typo3/sysext/fluid/Classes/ViewHelpers/Image/SrcsetViewHelper.php).

**Table of contents**

-   [Examples of f:image.srcset usage](https://docs.typo3.org/permalink/t3viewhelper:examples-of-f-image-srcset-usage@main)
-   [About the srcset attribute](https://docs.typo3.org/permalink/t3viewhelper:about-the-srcset-attribute@main)
-   [Arguments of the <f:image.srcset> ViewHelper](https://docs.typo3.org/permalink/t3viewhelper:arguments-of-the-f-image-srcset-viewhelper@main)

## Examples of f:image.srcset usage {#typo3-fluid-image-srcset-quick}

Using width descriptors in a `<source>` tag:

**packages/my_extension/Resources/Private/Templates/Media/Image.fluid.html**

```html
<picture>
    <source
        srcset="{f:image.srcset(
            image: imageObject,
            srcset: '400w, 600w, 800w',
            cropVariant: 'wide'
        )}"
        sizes="100vw"
        media="(min-width: 1200px)"
    />
    <!-- ... -->
</picture>
```

Using density descriptors:

**packages/my_extension/Resources/Private/Templates/Media/Image.fluid.html**

```html
<source
    srcset="{f:image.srcset(
        image: imageObject,
        srcset: '1x, 2x',
        referenceWidth: '500',
        cropVariant: 'desktop'
    )}"
    media="(min-width: 1000px)"
/>
```

## About the `srcset` attribute {#typo3-fluid-image-srcset-html}

The HTML `srcset` attribute allows browsers to choose the most
appropriate image variant depending on viewport size and pixel density.

The `srcset` attribute supports:

-   width descriptors such as `400w`
-   density descriptors such as `2x`

The `{f:image.srcset}` ViewHelper generates valid srcset attribute values
for responsive images automatically.

For details about responsive images and browser selection behavior, see:

-   [MDN: Responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
-   [MDN: HTMLImageElement.srcset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset)
-   [HTML Standard: Images](https://html.spec.whatwg.org/multipage/images.html)

## Arguments of the `<f:image.srcset>` ViewHelper {#typo3-fluid-image-srcset-arguments}

-   **absolute**

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

    Force absolute URL for generated images

-   **crop**

    -   *Type:* string|bool|array

    Overrule cropping of image (setting to FALSE disables the cropping set in FileReference)

-   **cropVariant**

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

    Select a cropping variant, in case multiple croppings have been specified or stored in FileReference

-   **fileExtension**

    -   *Type:* string

    Use the specified target file extension for generated images; files will be converted if necessary

-   **image**

    -   *Type:* TYPO3\\CMS\\Core\\Resource\\FileInterface|TYPO3\\CMS\\Extbase\\Domain\\Model\\File|TYPO3\\CMS\\Extbase\\Domain\\Model\\FileReference

    A FAL object (\\TYPO3\\CMS\\Core\\Resource\\File or \\TYPO3\\CMS\\Core\\Resource\\FileReference); if not specified, ViewHelper children will be used as a fallback.

-   **referenceWidth**

    -   *Type:* int

    Image width that will be used as base (1x) when calculating srcset with pixel density descriptors (e. g. 2x). This is irrelevant for width descriptors.

-   **srcset**

    -   *Type:* string
    -   *Required:* true

    Comma-separated list of width descriptors (e. g. 200w) or pixel density descriptors (e. g. 2x).