Image.srcset ViewHelper <f:image.srcset> 

New in version 14.2

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.

Go to the source code of this ViewHelper: Image\SrcsetViewHelper.php (GitHub).

Table of contents

Examples of f:image.srcset usage 

Using width descriptors in a <source> tag:

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

Using density descriptors:

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

About the srcset attribute 

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:

Arguments of the <f:image.srcset> ViewHelper 

absolute

absolute
Type
bool
Default
false
Force absolute URL for generated images

crop

crop
Type
string|bool|array
Overrule cropping of image (setting to FALSE disables the cropping set in FileReference)

cropVariant

cropVariant
Type
string
Default
'default'
Select a cropping variant, in case multiple croppings have been specified or stored in FileReference

fileExtension

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

image

image
Type
TYPO3\CMS\Core\Resource\FileInterface
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

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

srcset
Type
string
Required
1
Comma-separated list of width descriptors (e. g. 200w) or pixel density descriptors (e. g. 2x).