diff --git a/Classes/Controller/DummyImageController.php b/Classes/Controller/DummyImageController.php
index 8e00ac7..aa87063 100644
--- a/Classes/Controller/DummyImageController.php
+++ b/Classes/Controller/DummyImageController.php
@@ -10,10 +10,12 @@
 use Imagine\Image\Palette\Color\ColorInterface;
 use Imagine\Image\Point;
 use Neos\Flow\Annotations as Flow;
+use Neos\Flow\Log\Utility\LogEnvironment;
 use Neos\Flow\Mvc\Controller\ActionController;
+use Neos\Flow\Package\Exception\UnknownPackageException;
 use Neos\Flow\Package\PackageManager;
 use Neos\Flow\ResourceManagement\ResourceManager;
-use Neos\Flow\Http\Component\SetHeaderComponent;
+use Psr\Log\LoggerInterface;
 
 class DummyImageController extends ActionController
 {
@@ -35,6 +37,12 @@ class DummyImageController extends ActionController
      */
     protected $packageManager;
 
+    /**
+     * @Flow\Inject
+     * @var LoggerInterface
+     */
+    protected $logger;
+
     /**
      * Get a dummy-image
      *
@@ -46,36 +54,25 @@ class DummyImageController extends ActionController
      * @param string $f
      * @return string
      */
-    public function imageAction (int $w = 600, int $h = 400, string $bg = '#000', string $fg = '#fff', string $t = null, string $f = 'png'): string
+    public function imageAction(int $w = 600, int $h = 400, string $bg = '#000', string $fg = '#fff', string $t = null, string $f = 'png'): string
     {
         // limit input arguments
         if ($w > 9999) {
             $w = 9999;
+        } elseif ($w < 10) {
+            $w = 10;
         }
 
         if ($h > 9999) {
             $h = 9999;
-        }
-
-        // limit input arguments
-        if ($w < 10) {
-            $w = 10;
-        }
-
-        if ($h < 10) {
+        } elseif ($h < 10) {
             $h = 10;
         }
 
-        if ($t === null) {
-            $t = (string)$w . ' x ' . (string)$h;
-        }
-
         $width = $w;
         $height = $h;
-        $text = $t;
 
         try {
-            // create imagine
             $palette = new Palette\RGB();
             $backgroundColor = $palette->color($bg);
             $foregroundColor = $palette->color($fg);
@@ -85,14 +82,9 @@ public function imageAction (int $w = 600, int $h = 400, string $bg = '#000', st
             $image = $this->imagineService->create($imageBox);
             $image->usePalette($palette);
 
-            // render border
             $renderBorder = ($width >= 70 && $height >= 70);
-
-            // render shape
             $renderShape = ($width >= 200 && $height >= 100);
-
             $renderText = ($width >= 50 && $height >= 30);
-
             $renderPattern = ($width >= 20 && $height >= 20);
 
             $this->renderBackground($image, $foregroundColor, $backgroundColor, $width, $height);
@@ -105,7 +97,8 @@ public function imageAction (int $w = 600, int $h = 400, string $bg = '#000', st
                 $this->renderBorder($image, $foregroundColor, $backgroundColor, $width, $height);
             }
 
-            if ($t && $renderText) {
+            if ($renderText) {
+                $text = trim((string)$t) ?: sprintf('%s x %s', $width, $height);
                 $this->renderText($image, $foregroundColor, $width, $height, $text, $renderShape ? false : true);
             }
 
@@ -116,17 +109,23 @@ public function imageAction (int $w = 600, int $h = 400, string $bg = '#000', st
             // render image
             $result = $image->get($f);
             if (!$result) {
-                throw new \Exception('Something went wrong without throwing an exception');
+                throw new \RuntimeException('Something went wrong without throwing an exception');
             }
 
             // build result
-            $this->response->setComponentParameter(SetHeaderComponent::class, 'Cache-Control', 'max-age=883000000');
-            $this->response->setComponentParameter(SetHeaderComponent::class, 'Content-type', 'image/' . $f);
+            if (FLOW_VERSION_BRANCH == '5.3') {
+                $this->response->setHeader('Cache-Control', 'max-age=883000000');
+            } else {
+                $this->response->setComponentParameter(\Neos\Flow\Http\Component\SetHeaderComponent::class, 'Cache-Control', 'max-age=883000000');
+            }
+            $this->response->setContentType('image/' . $f);
             return $result;
-        } catch (\Exception $e) {
+        } catch (\Exception $exception) {
+            $this->logger->error($exception->getMessage(), LogEnvironment::fromMethodName(__METHOD__));
+
             // something went wrong we return the error image png
             $this->response->setStatusCode(500);
-            $this->response->setComponentParameter(SetHeaderComponent::class, 'Content-type', 'image/png');
+            $this->response->setContentType('image/png');
             return file_get_contents('resource://Sitegeist.Kaleidoscope/Public/Images/imageError.png');
         }
     }
@@ -251,6 +250,7 @@ protected function renderBorder(ImageInterface $image, ColorInterface $foregroun
      * @param int $height
      * @param string $text
      * @param bool $center
+     * @throws UnknownPackageException
      */
     protected function renderText(ImageInterface $image, ColorInterface $textColor, int $width, int $height, string $text, bool $center = false): void
     {
diff --git a/Classes/EelHelpers/AbstractImageSourceHelper.php b/Classes/EelHelpers/AbstractImageSourceHelper.php
index 3cbb55c..d22cd70 100644
--- a/Classes/EelHelpers/AbstractImageSourceHelper.php
+++ b/Classes/EelHelpers/AbstractImageSourceHelper.php
@@ -4,7 +4,9 @@
 namespace Sitegeist\Kaleidoscope\EelHelpers;
 
 use Neos\Flow\Annotations as Flow;
+use Neos\Flow\Log\Utility\LogEnvironment;
 use Neos\Utility\Arrays;
+use Psr\Log\LoggerInterface;
 
 /**
  * Class AbstractImageSourceHelper
@@ -28,12 +30,29 @@ abstract class AbstractImageSourceHelper implements ImageSourceHelperInterface
      */
     protected $targetFormat;
 
+    /**
+     * @var array
+     */
+    protected $targetImageVariant = [];
+
+    /**
+     * @Flow\Inject
+     * @var LoggerInterface
+     */
+    protected $logger;
+
     /**
      * @var array
      * @Flow\InjectConfiguration(path="thumbnailPresets", package="Neos.Media")
      */
     protected $thumbnailPresets;
 
+    /**
+     * @var array
+     * @Flow\InjectConfiguration(path="variantPresets", package="Neos.Media")
+     */
+    protected $variantPresets;
+
     /**
      * @param int|null $targetWidth
      * @param bool $preserveAspect
@@ -83,30 +102,62 @@ public function setDimensions(int $targetWidth = null, int $targetHeight = null)
     }
 
     /**
-     * Apply definitions from a preset to this image source
+     * DEPRECATED Apply definitions from a thumbnail preset to this image source
      *
      * @param string $name
+     * @deprecated use applyThumbnailPreset
      * @return ImageSourceHelperInterface
      */
     public function applyPreset(string $name): ImageSourceHelperInterface
+    {
+        return $this->applyThumbnailPreset($name);
+    }
+
+    /**
+     * Apply definitions from a thumbnail preset to this image source
+     *
+     * @param string $name
+     * @return ImageSourceHelperInterface
+     */
+    public function applyThumbnailPreset(string $name): ImageSourceHelperInterface
     {
         $newSource = clone $this;
-        if ($this->thumbnailPresets && isset($this->thumbnailPresets[$name])) {
+        if (isset($this->thumbnailPresets[$name])) {
             $preset = $this->thumbnailPresets[$name];
             if ($width = $preset['width'] ?? null) {
-                $newSource->setWidth($width);
+                $newSource = $newSource->setWidth($width);
             } elseif ($width = $preset['maximumWidth'] ?? null) {
-                $newSource->setWidth($width);
+                $newSource = $newSource->setWidth($width);
             }
             if ($height = $preset['height'] ?? null) {
-                $newSource->setHeight($height);
+                $newSource = $newSource->setHeight($height);
             } elseif ($height = $preset['maximumHeight'] ?? null) {
-                $newSource->setHeight($height);
+                $newSource = $newSource->setHeight($height);
             }
+        } else {
+            $this->logger->warning(sprintf('Thumbnail preset "%s" is not configured', $name), LogEnvironment::fromMethodName(__METHOD__));
         }
         return $newSource;
     }
 
+    /**
+     * Use the variant generated from the given variant preset in this image source
+     *
+     * @param string $presetIdentifier
+     * @param string $presetVariantName
+     * @return ImageSourceHelperInterface
+     */
+    public function useVariantPreset(string $presetIdentifier, string $presetVariantName): ImageSourceHelperInterface
+    {
+        if (!isset($this->variantPresets[$presetIdentifier]['variants'][$presetVariantName])) {
+            $this->logger->warning(sprintf('Variant "%s" of preset "%s" is not configured', $presetVariantName, $presetIdentifier), LogEnvironment::fromMethodName(__METHOD__));
+        }
+
+        $newSource = clone $this;
+        $newSource->targetImageVariant = ['presetIdentifier' => $presetIdentifier, 'presetVariantName' => $presetVariantName];
+        return $newSource;
+    }
+
     /**
      * Render sourceset Attribute for various media descriptors
      *
@@ -150,7 +201,7 @@ public function srcset($mediaDescriptors): string
      */
     public function allowsCallOfMethod($methodName)
     {
-        if (in_array($methodName, ['setWidth', 'setHeight', 'setDimensions', 'setFormat', 'applyPreset', 'src', 'srcset'])) {
+        if (in_array($methodName, ['setWidth', 'setHeight', 'setDimensions', 'setFormat', 'applyPreset', 'applyThumbnailPreset', 'useVariantPreset', 'src', 'srcset'])) {
             return true;
         }
 
diff --git a/Classes/EelHelpers/AbstractScalableImageSourceHelper.php b/Classes/EelHelpers/AbstractScalableImageSourceHelper.php
index 8c6c9d2..6a3bea9 100644
--- a/Classes/EelHelpers/AbstractScalableImageSourceHelper.php
+++ b/Classes/EelHelpers/AbstractScalableImageSourceHelper.php
@@ -3,8 +3,24 @@
 
 namespace Sitegeist\Kaleidoscope\EelHelpers;
 
+use Imagine\Image\Box;
+use Imagine\Image\ImagineInterface;
+use Neos\Flow\Annotations as Flow;
+use Neos\Media\Domain\ValueObject\Configuration\VariantPreset;
+use Neos\Media\Domain\Model\Adjustment\ImageAdjustmentInterface;
+use Neos\Media\Domain\Model\Adjustment\ResizeImageAdjustment;
+use Neos\Media\Domain\Model\Adjustment\CropImageAdjustment;
+use Neos\Media\Domain\ValueObject\Configuration\Adjustment;
+use Neos\Utility\ObjectAccess;
+
 abstract class AbstractScalableImageSourceHelper extends AbstractImageSourceHelper implements ScalableImageSourceHelperInterface
 {
+    /**
+     * @var ImagineInterface
+     * @Flow\Inject
+     */
+    protected $imagineService;
+
     /**
      * @var int
      */
@@ -100,4 +116,74 @@ public function getCurrentHeight(): int
         return $this->baseHeight;
     }
 
+    /**
+     * @param string $presetIdentifier
+     * @param string $presetVariantName
+     * @return Box
+     */
+    protected function estimateDimensionsFromVariantPresetAdjustments(string $presetIdentifier, string $presetVariantName): Box
+    {
+        $imageBox = new Box(
+            $this->baseWidth,
+            $this->baseHeight
+        );
+
+        $assetVariantPreset = VariantPreset::fromConfiguration($this->variantPresets[$presetIdentifier]);
+        foreach ($assetVariantPreset->variants()[$presetVariantName]->adjustments() as $adjustmentConfiguration) {
+            $adjustment = $this->createAdjustment($adjustmentConfiguration);
+
+            switch (true) {
+                case ($adjustment instanceof ResizeImageAdjustment):
+                    $image = $this->imagineService->create($imageBox);
+                    if ($adjustment->canBeApplied($image)) {
+                        $image = $adjustment->applyToImage($image);
+                        return new Box(
+                            (int)round($image->getSize()->getWidth()),
+                            (int)round($image->getSize()->getHeight())
+                        );
+                    }
+                    break;
+                case ($adjustment instanceof CropImageAdjustment):
+                    $desiredAspectRatio = $adjustment->getAspectRatio();
+                    if ($desiredAspectRatio !== null) {
+                        [, , $newWidth, $newHeight] = CropImageAdjustment::calculateDimensionsByAspectRatio($this->baseWidth, $this->baseHeight, $desiredAspectRatio);
+                    } else {
+                        $newWidth = $adjustment->getWidth();
+                        $newHeight = $adjustment->getHeight();
+                    }
+                    return new Box(
+                        (int)round($newWidth),
+                        (int)round($newHeight)
+                    );
+                    break;
+            }
+        }
+
+        return $imageBox;
+    }
+
+    /**
+     * @param Adjustment $adjustmentConfiguration
+     * @return ImageAdjustmentInterface
+     */
+    protected function createAdjustment(Adjustment $adjustmentConfiguration): ImageAdjustmentInterface
+    {
+        $adjustmentClassName = $adjustmentConfiguration->type();
+        if (!class_exists($adjustmentClassName)) {
+            throw new \RuntimeException(sprintf('Unknown image variant adjustment type "%s".', $adjustmentClassName), 1568213194);
+        }
+        $adjustment = new $adjustmentClassName();
+        if (!$adjustment instanceof ImageAdjustmentInterface) {
+            throw new \RuntimeException(sprintf('Image variant adjustment "%s" does not implement "%s".', $adjustmentClassName, ImageAdjustmentInterface::class), 1568213198);
+        }
+        foreach ($adjustmentConfiguration->options() as $key => $value) {
+            ObjectAccess::setProperty($adjustment, $key, $value);
+        }
+
+        if (!$adjustment instanceof ImageAdjustmentInterface) {
+            throw new \RuntimeException(sprintf('Could not apply the %s adjustment to image because it does not implement the ImageAdjustmentInterface.', get_class($adjustment)), 1381400362);
+        }
+
+        return $adjustment;
+    }
 }
diff --git a/Classes/EelHelpers/AssetImageSourceHelper.php b/Classes/EelHelpers/AssetImageSourceHelper.php
index 8e17311..a9a7a58 100644
--- a/Classes/EelHelpers/AssetImageSourceHelper.php
+++ b/Classes/EelHelpers/AssetImageSourceHelper.php
@@ -4,16 +4,19 @@
 namespace Sitegeist\Kaleidoscope\EelHelpers;
 
 use Neos\Flow\Annotations as Flow;
+use Neos\Flow\Log\Utility\LogEnvironment;
 use Neos\Flow\Mvc\ActionRequest;
 use Neos\Media\Domain\Model\AssetInterface;
+use Neos\Media\Domain\Model\AssetVariantInterface;
 use Neos\Media\Domain\Model\ImageInterface;
+use Neos\Media\Domain\Model\ImageVariant;
 use Neos\Media\Domain\Model\ThumbnailConfiguration;
+use Neos\Media\Domain\Model\VariantSupportInterface;
 use Neos\Media\Domain\Service\AssetService;
 use Neos\Media\Domain\Service\ThumbnailService;
 
 class AssetImageSourceHelper extends AbstractScalableImageSourceHelper
 {
-
     /**
      * @Flow\Inject
      * @var ThumbnailService
@@ -69,6 +72,35 @@ public function setRequest(ActionRequest $request): void
         $this->request = $request;
     }
 
+    /**
+     * Use the variant generated from the given variant preset in this image source
+     *
+     * @param string $presetIdentifier
+     * @param string $presetVariantName
+     * @return ImageSourceHelperInterface
+     */
+    public function useVariantPreset(string $presetIdentifier, string $presetVariantName): ImageSourceHelperInterface
+    {
+        $newSource = parent::useVariantPreset($presetIdentifier, $presetVariantName);
+
+        if ($newSource->targetImageVariant !== []) {
+            $asset = ($newSource->asset instanceof ImageVariant) ? $newSource->asset->getOriginalAsset() : $newSource->asset;
+            $assetVariant = self::getAssetVariant($asset, $newSource->targetImageVariant['presetIdentifier'], $newSource->targetImageVariant['presetVariantName']);
+            if ($assetVariant instanceof ImageVariant) {
+                $newSource->asset = $assetVariant;
+                $newSource->baseWidth = $assetVariant->getWidth();
+                $newSource->baseHeight = $assetVariant->getHeight();
+            } else {
+                // if no alternate variant is found we estimate the target dimensions
+                $targetDimensions = $this->estimateDimensionsFromVariantPresetAdjustments($presetIdentifier, $presetVariantName);
+                $newSource->baseWidth = $targetDimensions->getWidth();
+                $newSource->baseHeight = $targetDimensions->getHeight();
+            }
+        }
+
+        return $newSource;
+    }
+
     /**
      * @return string
      * @throws \Neos\Flow\Mvc\Routing\Exception\MissingActionNameException
@@ -81,14 +113,17 @@ public function src(): string
             return '';
         }
 
+        $width = $this->getCurrentWidth();
+        $height = $this->getCurrentHeight();
+
         $async = $this->request ? $this->async : false;
-        $allowCropping = ($this->targetWidth && $this->targetHeight);
+        $allowCropping = true;
         $allowUpScaling = false;
         $thumbnailConfiguration = new ThumbnailConfiguration(
-            $this->targetWidth,
-            $this->targetWidth,
-            $this->targetHeight,
-            $this->targetHeight,
+            $width,
+            $width,
+            $height,
+            $height,
             $allowCropping,
             $allowUpScaling,
             $async,
@@ -109,4 +144,28 @@ public function src(): string
         return $thumbnailData['src'];
     }
 
+    /**
+     * @param VariantSupportInterface $asset
+     * @param string $presetIdentifier
+     * @param string $presetVariantName
+     * @return ImageVariant
+     * @todo Remove when getVariant() is available in VariantSupportInterface
+     */
+    private static function getAssetVariant(VariantSupportInterface $asset, string $presetIdentifier, string $presetVariantName): ?ImageVariant
+    {
+        $variants = $asset->getVariants();
+
+        if ($variants === []) {
+            return null;
+        }
+
+        $variants = array_filter(
+            $variants,
+            static function (AssetVariantInterface $variant) use ($presetIdentifier, $presetVariantName) {
+                return ($variant->getPresetIdentifier() === $presetIdentifier && $variant->getPresetVariantName() === $presetVariantName);
+            }
+        );
+
+        return $variants === [] ? null : current($variants);
+    }
 }
diff --git a/Classes/EelHelpers/DummyImageSourceHelper.php b/Classes/EelHelpers/DummyImageSourceHelper.php
index 0aff20c..d07e7e1 100644
--- a/Classes/EelHelpers/DummyImageSourceHelper.php
+++ b/Classes/EelHelpers/DummyImageSourceHelper.php
@@ -75,6 +75,27 @@ public function setText($text): void
         $this->text = $text;
     }
 
+    /**
+     * Use the variant generated from the given variant preset in this image source
+     *
+     * @param string $presetIdentifier
+     * @param string $presetVariantName
+     * @return ImageSourceHelperInterface
+     */
+    public function useVariantPreset(string $presetIdentifier, string $presetVariantName): ImageSourceHelperInterface
+    {
+        /** @var DummyImageSourceHelper $newSource */
+        $newSource = parent::useVariantPreset($presetIdentifier, $presetVariantName);
+
+        if ($newSource->targetImageVariant !== []) {
+            $targetBox = $this->estimateDimensionsFromVariantPresetAdjustments($presetIdentifier, $presetVariantName);
+            $newSource->baseWidth = $targetBox->getWidth();
+            $newSource->baseHeight = $targetBox->getHeight();
+        }
+
+        return $newSource;
+    }
+
     /**
      * @return string
      */
@@ -101,7 +122,7 @@ public function src(): string
             $arguments['f'] = $this->targetFormat;
         }
 
-        $uri = $this->baseUri . '?' . http_build_query($arguments);
-        return $uri;
+        return $this->baseUri . '?' . http_build_query($arguments);
     }
+
 }
diff --git a/Classes/EelHelpers/ImageSourceHelperInterface.php b/Classes/EelHelpers/ImageSourceHelperInterface.php
index 4083979..2204aad 100644
--- a/Classes/EelHelpers/ImageSourceHelperInterface.php
+++ b/Classes/EelHelpers/ImageSourceHelperInterface.php
@@ -13,10 +13,19 @@ public function setHeight(int $height = null, bool $preserveAspect = false): Ima
 
     public function setDimensions(int $width = null, int $height = null): ImageSourceHelperInterface;
 
-    public function setFormat(string $format = null): ImageSourceHelperInterface;
+    public function setFormat(string $format = null) : ImageSourceHelperInterface;
 
+    /**
+     * @param string $name
+     * @deprecated use applyThumbnailPreset
+     * @return ImageSourceHelperInterface
+     */
     public function applyPreset(string $name): ImageSourceHelperInterface;
 
+    public function applyThumbnailPreset(string $name): ImageSourceHelperInterface;
+
+    public function useVariantPreset(string $presetIdentifier, string $presetVariantName): ImageSourceHelperInterface;
+
     public function src(): string;
 
     public function srcset($mediaDescriptors): string;
diff --git a/Classes/FusionObjects/AbstractImageSourceImplementation.php b/Classes/FusionObjects/AbstractImageSourceImplementation.php
index cd36d6b..e0e1f36 100644
--- a/Classes/FusionObjects/AbstractImageSourceImplementation.php
+++ b/Classes/FusionObjects/AbstractImageSourceImplementation.php
@@ -9,17 +9,17 @@
 abstract class AbstractImageSourceImplementation extends AbstractFusionObject
 {
     /**
-     * @return mixed
+     * @return int|null
      */
-    public function getWidth()
+    public function getWidth(): ?int
     {
         return $this->fusionValue('width');
     }
 
     /**
-     * @return mixed
+     * @return int|null
      */
-    public function getHeight()
+    public function getHeight(): ?int
     {
         return $this->fusionValue('height');
     }
@@ -33,11 +33,19 @@ public function getFormat(): ?string
     }
 
     /**
-     * @return mixed
+     * @return string|null
      */
-    public function getPreset()
+    public function getThumbnailPreset(): ?string
     {
-        return $this->fusionValue('preset');
+        return $this->fusionValue('thumbnailPreset') ?? $this->fusionValue('preset');
+    }
+
+    /**
+     * @return string|null
+     */
+    public function getVariantPreset(): ?string
+    {
+        return $this->fusionValue('variantPreset');
     }
 
     /**
@@ -52,8 +60,13 @@ public function evaluate(): ?ImageSourceHelperInterface
             return $helper;
         }
 
-        if ($preset = $this->getPreset()) {
-            $helper = $helper->applyPreset($preset);
+        if ($thumbnailPreset = $this->getThumbnailPreset()) {
+            $helper = $helper->applyThumbnailPreset($thumbnailPreset);
+        }
+
+        if (($variantPreset = $this->getVariantPreset()) && (strpos($variantPreset, '::') !== false)) {
+            [$presetIdentifier, $presetVariantName] = explode('::', $variantPreset, 2);
+            $helper = $helper->useVariantPreset($presetIdentifier, $presetVariantName);
         }
 
         if ($width = $this->getWidth()) {
diff --git a/Classes/FusionObjects/AssetImageSourceImplementation.php b/Classes/FusionObjects/AssetImageSourceImplementation.php
index 561684b..c3dba8f 100644
--- a/Classes/FusionObjects/AssetImageSourceImplementation.php
+++ b/Classes/FusionObjects/AssetImageSourceImplementation.php
@@ -5,8 +5,9 @@
 
 use Neos\Flow\Annotations as Flow;
 use Neos\Flow\ResourceManagement\ResourceManager;
-use Sitegeist\Kaleidoscope\EelHelpers\ImageSourceHelperInterface;
+use Neos\Media\Domain\Model\ImageInterface;
 use Sitegeist\Kaleidoscope\EelHelpers\AssetImageSourceHelper;
+use Sitegeist\Kaleidoscope\EelHelpers\ImageSourceHelperInterface;
 use Sitegeist\Kaleidoscope\EelHelpers\UriImageSourceHelper;
 
 class AssetImageSourceImplementation extends AbstractImageSourceImplementation
@@ -25,17 +26,17 @@ class AssetImageSourceImplementation extends AbstractImageSourceImplementation
     ];
 
     /**
-     * @return mixed
+     * @return ImageInterface|null
      */
-    public function getAsset()
+    public function getAsset(): ?ImageInterface
     {
         return $this->fusionValue('asset');
     }
 
     /**
-     * @return mixed
+     * @return bool|null
      */
-    public function getAsync()
+    public function getAsync(): ?bool
     {
         return $this->fusionValue('async');
     }
@@ -45,10 +46,10 @@ public function getAsync()
      *
      * @return ImageSourceHelperInterface|null
      */
-    public function createHelper() : ?ImageSourceHelperInterface
+    public function createHelper(): ?ImageSourceHelperInterface
     {
         $asset = $this->getAsset();
-        if (!$asset) {
+        if ($asset === null) {
             return null;
         }
 
diff --git a/Classes/FusionObjects/DummyImageSourceImplementation.php b/Classes/FusionObjects/DummyImageSourceImplementation.php
index 74363ce..19597bb 100644
--- a/Classes/FusionObjects/DummyImageSourceImplementation.php
+++ b/Classes/FusionObjects/DummyImageSourceImplementation.php
@@ -10,41 +10,41 @@
 class DummyImageSourceImplementation extends AbstractImageSourceImplementation
 {
     /**
-     * @return mixed
+     * @return int|null
      */
-    public function getBaseWidth()
+    public function getBaseWidth(): ?int
     {
         return $this->fusionValue('baseWidth');
     }
 
     /**
-     * @return mixed
+     * @return int|null
      */
-    public function getBaseHeight()
+    public function getBaseHeight(): ?int
     {
         return $this->fusionValue('baseHeight');
     }
 
     /**
-     * @return mixed
+     * @return string|null
      */
-    public function getBackgroundColor()
+    public function getBackgroundColor(): ?string
     {
         return $this->fusionValue('backgroundColor');
     }
 
     /**
-     * @return mixed
+     * @return string|null
      */
-    public function getForegroundColor()
+    public function getForegroundColor(): ?string
     {
         return $this->fusionValue('foregroundColor');
     }
 
     /**
-     * @return mixed
+     * @return string|null
      */
-    public function getText()
+    public function getText(): ?string
     {
         return $this->fusionValue('text');
     }
diff --git a/README.md b/README.md
index 877d55a..5e90a5e 100644
--- a/README.md
+++ b/README.md
@@ -117,7 +117,7 @@ Props:
 - `sources`: an array of source definitions that supports the following keys
    - `imageSource`: alternate image-source for art direction purpose
    - `srcset`: media descriptors like '1.5x' or '600w' (string ot array)
-   - `sizes`: sizes attribute (string ot array)
+   - `sizes`: sizes attribute (string or array)
    - `media`: the media attribute for this source
    - `type`: the type attribute for this source
 - `srcset`: media descriptors like '1.5x' or '600w' of the default image (string ot array)
@@ -146,7 +146,7 @@ sources = Neos.Fusion:RawArray {
         sizes = '(max-width: 320px) 280px, (max-width: 480px) 440px, 100vw'
         type = 'image/webp'
     }
-    
+
     print = Neos.Fusion:RawArray {
         imageSource = Sitegeist.Kaleidoscope:DummyImageSource {
             text = "im am here for printing"
@@ -243,12 +243,13 @@ The package contains ImageSource-FusionObjects that encapsulate the intention to
 render an image. ImageSource-Objects return Eel-Helpers that allow to
 enforcing the rendered dimensions later in the rendering process.
 
-Note: The settings for `width`, `height` and `preset can be defined via fusion
-but can also applied on the returned object. This will override the fusion-settings.
+Note: The settings for `width`, `height`, `thumbnailPreset` and `variantPreset` can be defined
+via fusion but can also applied on the returned object. This will override the fusion-settings.
 
 All ImageSources support the following fusion properties:
 
-- `preset`: Set width and/or height via named-preset from Settings `Neos.Media.thumbnailPresets` (default null, settings below override the preset)
+- `thumbnailPreset`: Set width and/or height via named thumbnail preset from Settings `Neos.Media.thumbnailPresets` (default null, settings below override the preset)
+- `variantPreset`: Select image variant via named variant preset, given as `IDENTIFIER::VARIANTNAME` keys from Settings `Neos.Media.variantPresets` (default null, settings below override the preset)
 - `width`: Set the intended width (default null)
 - `height`: Set the intended height (default null)
 - `format`: Set the image output format, like webp (default null)
@@ -259,7 +260,8 @@ Arguments:
 
 - `asset`: An image asset that shall be rendered (defaults to the context value `asset`)
 - `async`: Defer image-rendering until the image is actually requested by the browser (default true)
-- `preset`, `width` and `height` are supported as explained above
+- `thumbnailPreset`: `width` and `height` are supported as explained above
+- `variantPreset`: as explained above
 
 ### `Sitegeist.Kaleidoscope:DummyImageSource`
 
@@ -269,21 +271,24 @@ Arguments:
 - `backgroundColor`: The background color of the dummy image (default = '999')
 - `foregroundColor`: The foreground color of the dummy image (default = 'fff')
 - `text`: The text that is rendered on the image (default = null, show size)
-- `preset`, `width` and `height` are supported as explained above
+- `thumbnailPreset`: `width` and `height` are supported as explained above
+- `variantPreset`: as explained above
 
 
 ### `Sitegeist.Kaleidoscope:UriImageSource`
 
 Arguments:
 - `uri`: The uri that will be rendered
-- !!! `preset`, `width` and `height` have no effect on this ImageSource
+- !!! `thumbnailPreset`: `width` and `height` have no effect on this ImageSource
+- !!! `variantPreset`: has no effect on this ImageSource
 
 ### `Sitegeist.Kaleidoscope:ResourceImageSource`
 
 Arguments:
 - `package`: The package key (e.g. `'My.Package'`) (default = false)
 - `path`: Path to resource, either a path relative to `Public` and `package` or a `resource://` URI (default = null)
-- !!! `preset`, `width` and `height` have no effect on this ImageSource
+- !!! `thumbnailPreset`: `width` and `height` have no effect on this ImageSource
+- !!! `variantPreset`: has no effect on this ImageSource
 
 ## ImageSource EEl-Helpers
 
@@ -293,13 +298,14 @@ dimensions and to render the `src` and `srcset`-attributes.
 
 Methods of ImageSource-Helpers that are accessible via EEL:
 
-- `applyPreset( string )`: Set width and/or height via named-preset from Settings `Neos.Media.thumbnailPresets`
-- `setWidth( integer $width, bool $preserveAspect = false )`: Set the intend width modify height aswell if 
+- `applyThumbnailPreset( string )`: Set width and/or height via named thumbnail preset from Settings `Neos.Media.thumbnailPresets`
+- `useVariantPreset( string, string )`: Select image variant via the named variant preset (parameters are "preset identifier" key and "preset variant name" key from Settings `Neos.Media.variantPresets`)
+- `setWidth( integer $width, bool $preserveAspect = false )`: Set the intend width modify height as well if 
 - `setHeight( integer $height, bool $preserveAspect = false )`: Set the intended height
 - `setDimensions( integer, interger)`: Set the intended width and height
 - `setFormat( string )`: Set the image format to generate like  `webp`, `png` or `jpeg`
-- `src ()` : Render a src attribute for the given ImageSource-object
-- `srcset ( array of descriptors )` : render a srcset attribute for the ImageSource with given media descriptors like `2.x` or `800w`
+- `src ()`: Render a src attribute for the given ImageSource-object
+- `srcset ( array of descriptors )`: render a srcset attribute for the ImageSource with given media descriptors like `2.x` or `800w`
 
 Note: The Eel-helpers cannot be created directly. They have to be created
 by using the `Sitegeist.Kaleidoscope:AssetImageSource` or
diff --git a/Resources/Private/Fusion/Prototypes/AssetImageSource.fusion b/Resources/Private/Fusion/Prototypes/AssetImageSource.fusion
index dfe3633..a27ab3b 100644
--- a/Resources/Private/Fusion/Prototypes/AssetImageSource.fusion
+++ b/Resources/Private/Fusion/Prototypes/AssetImageSource.fusion
@@ -3,7 +3,8 @@ prototype(Sitegeist.Kaleidoscope:AssetImageSource) {
     asset = ${asset}
     async = true
 
-    preset = null
+    thumbnailPreset = null
+    variantPreset = null
     width = null
     height = null
     format = null
diff --git a/Resources/Private/Fusion/Prototypes/DummyImageSource.fusion b/Resources/Private/Fusion/Prototypes/DummyImageSource.fusion
index f8a2e03..d8d8d4a 100644
--- a/Resources/Private/Fusion/Prototypes/DummyImageSource.fusion
+++ b/Resources/Private/Fusion/Prototypes/DummyImageSource.fusion
@@ -7,7 +7,8 @@ prototype(Sitegeist.Kaleidoscope:DummyImageSource) {
     foregroundColor = 'fff'
     text = null
 
-    preset = null
+    thumbnailPreset = null
+    variantPreset = null
     width = null
     height = null
     format = null
diff --git a/Resources/Private/Fusion/Prototypes/Picture.fusion b/Resources/Private/Fusion/Prototypes/Picture.fusion
index 05a497a..d00fe2f 100644
--- a/Resources/Private/Fusion/Prototypes/Picture.fusion
+++ b/Resources/Private/Fusion/Prototypes/Picture.fusion
@@ -36,9 +36,11 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) {
     alt = null
     title = null
     class = null
+    content = ''
 
     renderer = afx`
         <picture @if.has={props.imageSource} class={props.class}>
+            {props.content}
             <Neos.Fusion:Collection collection={props.sources} itemName="source" @children="itemRenderer" @if.has={props.sources}>
                 <Sitegeist.Kaleidoscope:Source
                     imageSource={source.imageSource ? source.imageSource : props.imageSource}
diff --git a/composer.json b/composer.json
index 6ab2286..a039aca 100644
--- a/composer.json
+++ b/composer.json
@@ -4,7 +4,7 @@
     "name": "sitegeist/kaleidoscope",
     "license": "GPL-3.0-or-later",
     "require": {
-        "neos/neos": "^5.0 || dev-master",
+        "neos/neos": "^4.3 || ^5.0 || dev-master",
         "neos/fusion-afx": "^1.2 || dev-master",
         "neos/media": "*",
         "neos/imagine": "*"