ViewHelper: Image and Image.srcset
TYPO3
Show in appBeschreibung
The f:image ViewHelper resizes, crops, or converts an image if required and renders the resulting HTML <img> tag. It supports two primary input methods: the src argument for extension assets using EXT: syntax, and the image argument for FAL (File Abstraction Layer) objects such as File or FileReference. External URLs are not processed. Image conversion format defaults can be configured globally via $GLOBALS['TYPO3_CONF_VARS']['GFX']['imageFileConversionFormats'].
The f:image.srcset ViewHelper, introduced in TYPO3 14.2, generates a list of image URLs with their corresponding srcset descriptors for use in the srcset attribute of an <img> or <source> tag. It replaces previous manual approaches using multiple f:uri.image calls and generates the required image variants automatically.
Ziele
- I know the important arguments of `<f:image>` ViewHelper (image, src, crop, cropVariant, loading) and how to use the ViewHelper.
- I know that images can be output as a base64 string, e.g. for email templates.
- I know how to use the fileExtension argument to force a specific output format such as webp.
- I know how to configure default and specific file types when images are rendered or converted in the frontend.
- I know the purpose of <f:image.srcset> and how it differs from using multiple f:uri.image calls.
- I know how to use f:image.srcset with width descriptors (e.g. 400w, 800w) and density descriptors (e.g. 1x, 2x).
- I know how to use f:image.srcset inside a <picture> element together with cropVariant for responsive images.
Maintainer
