diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..e722f3d
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,22 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# Composer uses 4 spaces itself
+[composer.json]
+indent_size = 4
+
+# PHP should follow the PSR-2 standard
+[*.php]
+indent_size = 4
+
+# fusion uses 4 spaces itself
+[*.fusion]
+indent_size = 4
diff --git a/Resources/Private/Fusion/Prototypes/Image.fusion b/Resources/Private/Fusion/Prototypes/Image.fusion
index 76f5a48..eafe5cc 100644
--- a/Resources/Private/Fusion/Prototypes/Image.fusion
+++ b/Resources/Private/Fusion/Prototypes/Image.fusion
@@ -127,41 +127,33 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) {
     attributes = Neos.Fusion:DataStructure
     renderDimensionAttributes = true
 
-    renderer = Neos.Fusion:Component {
-        @if.hasImageSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}
+    @private {
+        # detect scalable sources
         isScalableSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ScalableImageSourceInterface')}
 
         # apply format, width and height to the imageSource
         imageSource = ${props.imageSource}
+        imageSource.@if.hasImageSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}
         imageSource.@process.applyWidth = ${props.width ? value.withWidth(props.width) : value}
         imageSource.@process.applyHeight = ${props.height ? value.withHeight(props.height) : value}
         imageSource.@process.applyFormat = ${props.format ? value.withFormat(props.format) : value}
-
-        srcset = ${props.srcset}
-        sizes = ${props.sizes}
-        loading = ${props.loading}
-        alt =  ${props.alt}
-        title = ${props.title}
-        class = ${props.class}
-        attributes = ${props.attributes}
-        renderDimensionAttributes = ${props.renderDimensionAttributes}
-
-        renderer = afx`
-            <img
-                src={props.imageSource.src()}
-                srcset={props.imageSource.srcset(props.srcset)}
-                srcset.@if.isScalable={props.isScalableSource && props.srcset}
-                sizes={props.sizes}
-                sizes.@if.isScalable={props.isScalableSource && props.sizes}
-                sizes.@process.join={Type.isArray(value) ? Array.join(value, ', ') : value}
-                loading={props.loading}
-                class={props.class}
-                alt={props.alt || props.imageSource.alt() || ''}
-                title={props.title || props.imageSource.title()}
-                width={props.renderDimensionAttributes ? props.imageSource.width() : null}
-                height={props.renderDimensionAttributes ? props.imageSource.height() : null}
-                {...props.attributes}
-            />
-        `
     }
+
+    renderer = afx`
+        <img
+            src={private.imageSource.src()}
+            srcset={private.imageSource.srcset(props.srcset)}
+            srcset.@if.isScalable={private.isScalableSource && props.srcset}
+            sizes={props.sizes}
+            sizes.@if.isScalable={private.isScalableSource && props.sizes}
+            sizes.@process.join={Type.isArray(value) ? Array.join(value, ', ') : value}
+            loading={props.loading}
+            class={props.class}
+            alt={props.alt || private.imageSource.alt() || ''}
+            title={props.title || private.imageSource.title()}
+            width={props.renderDimensionAttributes ? private.imageSource.width() : null}
+            height={props.renderDimensionAttributes ? private.imageSource.height() : null}
+            {...props.attributes}
+        />
+    `
 }
diff --git a/Resources/Private/Fusion/Prototypes/Picture.fusion b/Resources/Private/Fusion/Prototypes/Picture.fusion
index e62892e..b51f54c 100644
--- a/Resources/Private/Fusion/Prototypes/Picture.fusion
+++ b/Resources/Private/Fusion/Prototypes/Picture.fusion
@@ -78,65 +78,50 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) {
         __format = ${this.format}
     }
 
-    renderer = Neos.Fusion:Component {
-        @if.hasImageSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}
-
+    @private {
         # apply format, width and height to the imageSource
         imageSource = ${props.imageSource}
-        imageSource.@process.applyWidth = ${props.width ? value.setWidth(props.width) : value}
+        imageSource.@if.has = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}        imageSource.@process.applyWidth = ${props.width ? value.setWidth(props.width) : value}
         imageSource.@process.applyHeight = ${props.height ? value.setHeight(props.height) : value}
         imageSource.@process.applyFormat = ${props.format ? value.setFormat(props.format) : value}
+    }
 
-        srcset = ${props.srcset}
-        sizes = ${props.sizes}
-        loading = ${props.loading}
-        sources = ${props.sources}
-        formats = ${props.formats}
-        alt = ${props.alt}
-        title = ${props.title}
-        class = ${props.class}
-        attributes = ${props.attributes}
-        imgAttributes = ${props.imgAttributes}
-        content = ${props.content}
-        renderDimensionAttributes = ${props.renderDimensionAttributes}
-
-        renderer = afx`
-            <picture class={props.class} {...props.attributes}>
-                {props.content}
-                <Neos.Fusion:Loop items={props.sources} itemName="source" @if.has={props.sources}>
-                    <Sitegeist.Kaleidoscope:Source
-                        imageSource={source.imageSource ? source.imageSource : props.imageSource}
-                        type={source.type}
-                        media={source.media}
-                        format={source.format}
-                        width={source.width}
-                        height={source.height}
-                        srcset={source.srcset ? source.srcset : props.srcset}
-                        sizes={source.sizes ? source.sizes : props.sizes}
-                        renderDimensionAttributes={props.renderDimensionAttributes}
-                    />
-                </Neos.Fusion:Loop>
-                <Neos.Fusion:Loop
-                    @if.has={props.imageSource && props.formats}
-                    items={Type.isArray(props.formats) ? props.formats : String.split(props.formats, ',')}
-                    itemName="format"
-                >
-                    <Sitegeist.Kaleidoscope:Source
-                        imageSource={props.imageSource}
-                        format={String.trim(format)}
-                    />
-                </Neos.Fusion:Loop>
-                <Sitegeist.Kaleidoscope:Image
-                    imageSource={props.imageSource}
-                    sizes={props.sizes}
-                    srcset={props.srcset}
-                    loading={props.loading}
-                    alt={props.alt}
-                    title={props.title}
-                    attributes={props.imgAttributes}
+    renderer = afx`
+        <picture class={props.class} {...props.attributes} @if.has={private.imageSource}>
+            {props.content}
+            <Neos.Fusion:Loop items={props.sources} itemName="source" @if.has={props.sources}>
+                <Sitegeist.Kaleidoscope:Source
+                    imageSource={source.imageSource ? source.imageSource : private.imageSource}
+                    type={source.type}
+                    media={source.media}
+                    format={source.format}
+                    width={source.width}
+                    height={source.height}
+                    srcset={source.srcset ? source.srcset : props.srcset}
+                    sizes={source.sizes ? source.sizes : props.sizes}
                     renderDimensionAttributes={props.renderDimensionAttributes}
                 />
-            </picture>
-        `
-    }
+            </Neos.Fusion:Loop>
+            <Neos.Fusion:Loop
+                @if.has={private.imageSource && props.formats}
+                items={Type.isArray(props.formats) ? props.formats : String.split(props.formats, ',')}
+                itemName="format"
+            >
+                <Sitegeist.Kaleidoscope:Source
+                    imageSource={private.imageSource}
+                    format={String.trim(format)}
+                />
+            </Neos.Fusion:Loop>
+            <Sitegeist.Kaleidoscope:Image
+                imageSource={private.imageSource}
+                sizes={props.sizes}
+                srcset={props.srcset}
+                loading={props.loading}
+                alt={props.alt}
+                title={props.title}
+                attributes={props.imgAttributes}
+                renderDimensionAttributes={props.renderDimensionAttributes}
+            />
+        </picture>
+    `
 }
diff --git a/composer.json b/composer.json
index 09c223c..e30ef63 100644
--- a/composer.json
+++ b/composer.json
@@ -4,8 +4,8 @@
     "name": "sitegeist/kaleidoscope",
     "license": "GPL-3.0-or-later",
     "require": {
-        "neos/neos": "^7.0 || ^8.0 || ^9.0 || dev-master",
-        "neos/fusion-afx": "^7.0 || ^8.0 || ^9.0 || dev-master",
+        "neos/neos": "^8.3 || ^9.0 || dev-master",
+        "neos/fusion-afx": "^8.3 || ^9.0 || dev-master",
         "neos/media": "*",
         "neos/imagine": "*"
     },