---
title: "Introduction"
manual: "Imaginator"
version: "1.0"
permalink: "https://docs.typo3.org/permalink/schliesser/imaginator:introduction@1.0"
source: "Introduction/Index.rst"
rendered: "2026-10-13T11:21:40+00:00"
---

# Introduction {#introduction}

Imaginator renders responsive images without any per-image configuration. At
page-render time it emits a real `<picture>` / `<img>` carrying a
quantized **width-ladder** `srcset` plus `sizes="auto"`, so the
browser's preload scanner picks the correctly-sized candidate in one
round-trip. The `width` and `height` attributes are always emitted
from the largest ladder rung, so there is zero layout shift (CLS).

-   [What does it do?](https://docs.typo3.org/permalink/schliesser/imaginator:what-does-it-do@1.0)
-   [Need support?](https://docs.typo3.org/permalink/schliesser/imaginator:need-support@1.0)
-   [Contribution](https://docs.typo3.org/permalink/schliesser/imaginator:contribution@1.0)

## Requirements {#requirements}

-   PHP **8.3+** (tested on 8.3 / 8.4 / 8.5)
-   TYPO3 **13.4 LTS** or **14.3 LTS**
-   A working image processor (GraphicsMagick or ImageMagick, configured through
    TYPO3's standard **GFX** settings) for local processing; alternatively
    an external processor (e.g. imgproxy)
-   A non-empty `encryptionKey` (standard on every TYPO3 install)