---
title: "Introduction"
version: "2.0"
source: "Introduction/Index.rst"
rendered: "2026-09-27T13:10:28+00:00"
---

# Introduction {#introduction}

## What does it do? {#what-it-does}

This extension brings a set of Fluid ViewHelpers that are useful for adaptive image rendering.

> [!NOTE]
> To use this extension, you should already have a good understanding of Fluid and adaptive images (i.e. know what
> picture, srcset and sizes are and how to use them).

### "Higher level" viewhelpers {#higher-level-viewhelpers}

The viewhelpers [ai:image](../ViewHelpers/Index.html#ai-image-viewhelper) and [ai:picture](../ViewHelpers/Index.html#ai-picture-viewhelper) can be used as a
replacement for the f:image viewhelper.

|  |  |
| --- | --- |
| [ai:image](../ViewHelpers/Index.html#ai-image-viewhelper) | render an adaptive image |
| [ai:picture](../ViewHelpers/Index.html#ai-picture-viewhelper) | render an adaptive picture |

### "Lower level" viewhelpers {#lower-level-viewhelpers}

Besides those "higher level" viewhelpers there are also viewhelpers, that allow for more experimantation and maximum
flexibility. those may be used in combination with Fluids f:image and f:media viewhelpers.

|  |  |
| --- | --- |
| [ai:getCropVariants](../ViewHelpers/Index.html#ai-get-crop-variants-viewhelper) | Returns a CropVariantCollection as array for a FileReference |
| [ai:getSrcSet](../ViewHelpers/Index.html#ai-get-srcset-viewhelper) | Get a srcset string for a given cropVariant and widths and generate images for srcset candidates |
| [ai:ratioBox](../ViewHelpers/Index.html#ai-ratiobox-viewhelper) | Wraps an image or picture tag in a ratio box |
| [ai:placeholder.image](../ViewHelpers/Index.html#ai-placeholder-image-viewhelper) | Returns a placeholder image |
| [ai:placeholder.svg](../ViewHelpers/Index.html#ai-placeholder-svg-viewhelper) | Returns a placeholder SVG image |

## Demo Page {#demo-page}

There are many pitfalls while using adaptive images and also a lot of options for implementing them. To experiment and
test different possibilities there is a demo page using this extension which might give you an idea of different
implementations and their problems.

Demo Page for adaptive images: [https://ai-demo.comuno.net/](https://ai-demo.comuno.net/)