diff --git a/README.md b/README.md
index fca185b..f1ffe9c 100644
--- a/README.md
+++ b/README.md
@@ -5,16 +5,15 @@
 This package implements responsive-images for Neos for being used via Fusion.
 
 ```
-imageSource = Sitegeist.Kaleidoscope:DummyImageSource {
-    width = 800
-    height = 200
-}
+imageSource = Sitegeist.Kaleidoscope:DummyImageSource
 
 renderer = afx`
     <Sitegeist.Kaleidoscope:Image
         imageSource={props.imageSource}
         srcset="320w, 400w, 600w, 800w, 1000w, 1200w, 1600w"
         sizes="(min-width: 800px) 1000px, (min-width: 480px) 800px, (min-width: 320px) 440px, 100vw"
+        width="400"
+        height="400"
     />
 `
 ```
@@ -62,9 +61,14 @@ Props:
 - `imageSource`: the imageSource to render
 - `srcset`: media descriptors like '1.5x' or '600w' of the default image (string ot array)
 - `sizes`: sizes attribute of the default image (string ot array)
+- `loading`: (optional) loading attribute for the img tag 
+- `format`: (optional) the image-format like `webp` or `png`, will be applied to the `imageSource`
+- `width`: (optional) the base width, will be applied to the `imageSource`    
+- `height`: (optional) the base height, will be applied to the `imageSource`    
 - `alt`: alt-attribute for the img tag
 - `title`: title attribute for the img tag
 - `class`: class attribute for the img tag
+- `renderDimensionAttributes`: render dimension attributes (width/height) when the data is available from the imageSource. Enabled by default
 
 #### Image with srcset in multiple resolutions:
 
@@ -101,47 +105,72 @@ Props:
 - `imageSource`: the imageSource to render
 - `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 or array)
-   - `media`: the media attribute for this source
-   - `type`: the type attribute for this source
+   - `srcset`: (optional) media descriptors like '1.5x' or '600w' (string ot array)
+   - `sizes`: (optional) sizes attribute (string or array)
+   - `media`: (optional) the media attribute for this source
+   - `type`: (optional) the type attribute for this source
+   - `format`: (optional) the image-format for the source like `webp` or `png`, is applied to `imageSource` and `type`
+   - `width`: (optional) the base width, will be applied to the `imageSource`    
+   - `height`: (optional) the base height, will be applied to the `imageSource`   
 - `srcset`: media descriptors like '1.5x' or '600w' of the default image (string ot array)
 - `sizes`: sizes attribute of the default image (string ot array)
-- `alt`: alt-attribute for the picture tag
-- `title`: title attribute for the picture tag
+- `formats`: (optional) image formats that will be rendered as sources of separate type (string or array)
+- `width`: (optional) the base width, will be applied to the `imageSource`
+- `height`: (optional) the base height, will be applied to the `imageSource`   
+- `loading`: (optional) loading attribute for the img tag 
+- `alt`: alt-attribute for the img tag
+- `title`: title attribute for the img tag
 - `class`: class attribute for the picture tag
+- `renderDimensionAttributes`: render dimension attributes (width/height) for the img-tag when the data is available from the imageSource
+  if not specified renderDimensionAttributes will be enabled automatically for pictures that only use the `formats` options.
+
+#### Picture multiple formats:
+
+The following code will render a picture with an img-tag and two additional
+source-tags for the formats webp and png in addition to the default img. 
 
 ```
 imageSource = Sitegeist.Kaleidoscope:DummyImageSource
-sources = Neos.Fusion:RawArray {
-    large = Neos.Fusion:RawArray {
-        srcset = '1x, 1.5x, 2x'
-        media = 'screen and (min-width: 1600px)'
-    }
 
-    small = Neos.Fusion:RawArray {
-        srcset = '320w, 480w, 800w'
-        sizes = '(max-width: 320px) 280px, (max-width: 480px) 440px, 100vw'
-        media = 'screen and (max-width: 1599px)'
-    }
+renderer = afx`
+    <Sitegeist.Kaleidoscope:Picture
+        imageSource={props.imageSource}
+        srcset="320w, 600w, 800w, 1200w, 1600w"
+        sizes="(min-width: 320px) 440px, 100vw"
+        formats="webp, png'
+        />
+`
+```
 
-    webp = Neos.Fusion:RawArray {
-        imageSource = ${props.imageSource.setFormat('webp')} 
-        srcset = '320w, 480w, 800w'
-        sizes = '(max-width: 320px) 280px, (max-width: 480px) 440px, 100vw'
-        type = 'image/webp'
-    }
+#### Picture with multiple sources:
 
-    print = Neos.Fusion:RawArray {
-        imageSource = Sitegeist.Kaleidoscope:DummyImageSource {
-            text = "im am here for printing"
-        }
-        media = 'print'
-    }
-}
+The properties  `imageSource`. `srcset` and `sizes` are automatically passed from the
+picture to the source if not defined otherwise.
+
+```
+imageSource = Sitegeist.Kaleidoscope:DummyImageSource
 
 renderer = afx`
-    <Sitegeist.Kaleidoscope:Picture imageSource={props.imageSource} sources={props.sources} />
+    <Sitegeist.Kaleidoscope:Picture imageSource={props.imageSource} >
+        <Sitegeist.Kaleidoscope:Source 
+            srcset="1x, 1.5x, 2x" 
+            media="screen and (min-width: 1600px)"
+            />
+        <Sitegeist.Kaleidoscope:Source 
+            srcset="320w, 480w, 800w"
+            sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 100vw"
+            media="screen and (max-width: 1599px)"
+            />
+        <Sitegeist.Kaleidoscope:Source 
+            format="webp"
+            srcset = '320w, 480w, 800w'
+            sizes = '(max-width: 320px) 280px, (max-width: 480px) 440px, 100vw' 
+            />
+        <Sitegeist.Kaleidoscope:Source 
+            imageSource={props.alternatePintImage} 
+            media="print" 
+            />
+    </Sitegeist.Kaleidoscope:Picture>
 `
 ```
 
@@ -151,9 +180,12 @@ Render an `src`-tag with `srcset`, `sizes`, `type` and `media` attributes.
 
 Props:
 
-- `imageSource`: the imageSource to render
-- `srcset`: media descriptors like '1.5x' or '600w' of the default image (string ot array)
-- `sizes`: (optional) sizes attribute (string or array)
+- `imageSource`: the imageSource to render (inherited from picture)
+- `srcset`: media descriptors like '1.5x' or '600w' of the default image (string ot array, inherited from picture)
+- `sizes`: (optional) sizes attribute (string or array, inherited from picture)
+- `format`: (optional) the image-format like `webp` or `png`, will be applied to `imageSource` and `type`
+- `width`: (optional) the base width, will be applied to the `imageSource`    
+- `height`: (optional) the base height, will be applied to the `imageSource`    
 - `type`: (optional) the type attribute for the source like `image/png` or `image/webp`, the actual format is enforced via `imageSource.setFormat()`
 - `media`: (optional) the media query for the given source
 
diff --git a/Resources/Private/Fusion/Prototypes/Image.fusion b/Resources/Private/Fusion/Prototypes/Image.fusion
index 54edb8a..b49f586 100644
--- a/Resources/Private/Fusion/Prototypes/Image.fusion
+++ b/Resources/Private/Fusion/Prototypes/Image.fusion
@@ -45,17 +45,43 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) {
     alt = null
     title = null
     class = null
+    loading = null
+    width = null
+    height = null
+    format = null
+    renderDimensionAttributes = true
 
-    renderer = afx`
-        <img @if.has={props.imageSource}
-            src={props.imageSource}
-            srcset={props.imageSource.srcset(props.srcset)}
-            srcset.@if.has={props.srcset}
-            sizes={props.sizes}
-            sizes.@process.join={Type.isArray(value) ? Array.join(value, ', ') : value}
-            class={props.class}
-            alt={props.alt}
-            title={props.title}
-        />
-    `
+    renderer = Neos.Fusion:Component {
+        @if.hasImageSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\EelHelpers\\ImageSourceHelperInterface')}
+
+        # apply format, width and height to the imageSource
+        imageSource = ${props.imageSource}
+        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}
+        alt =  ${props.alt}
+        title = ${props.title}
+        class = ${props.class}
+        renderDimensionAttributes = ${props.renderDimensionAttributes}
+
+        renderer = afx`
+            <img
+                src={props.imageSource.src()}
+                srcset={props.imageSource.srcset(props.srcset)}
+                srcset.@if.has={props.srcset}
+                sizes={props.sizes}
+                sizes.@process.join={Type.isArray(value) ? Array.join(value, ', ') : value}
+                loading={props.loading}
+                class={props.class}
+                alt={props.alt}
+                title={props.title}
+                width={props.renderDimensionAttributes ? props.imageSource.currentWidth : null}
+                height={props.renderDimensionAttributes ? props.imageSource.currentHeight : null}
+            />
+        `
+    }
 }
diff --git a/Resources/Private/Fusion/Prototypes/Picture.fusion b/Resources/Private/Fusion/Prototypes/Picture.fusion
index d00fe2f..076630f 100644
--- a/Resources/Private/Fusion/Prototypes/Picture.fusion
+++ b/Resources/Private/Fusion/Prototypes/Picture.fusion
@@ -29,34 +29,85 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) {
         }
     }
 
-    imageSource = Sitegeist.Kaleidoscope:DummyImageSource
+    imageSource = null
     srcset = null
     sizes = null
+    loading = null
     sources = null
+    formats = null
+    width = null
+    height = null
     alt = null
     title = null
     class = null
     content = ''
+    renderDimensionAttributes = null
 
-    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}
-                    type={source.type}
-                    media={source.media}
-                    srcset={source.srcset ? source.srcset : props.srcset}
-                    sizes={source.sizes ? source.sizes : props.sizes}
+    #
+    # put the values that shall be applied to sources automatically to the context
+    # to make them available to all props during evaluation
+    #
+    @context {
+        __imageSource = ${this.imageSource}
+        __srcset = ${this.srcset}
+        __sizes = ${this.sizes}
+        __width = ${this.width}
+        __height = ${this.height}
+        __format = ${this.format}
+    }
+
+    renderer = Neos.Fusion:Component {
+        @if.hasImageSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\EelHelpers\\ImageSourceHelperInterface')}
+
+        # apply format, width and height to the imageSource
+        imageSource = ${props.imageSource}
+        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}
+        content = ${props.content}
+        renderDimensionAttributes = ${Type.isBoolean(props.renderDimensionAttributes) ? props.renderDimensionAttributes : (!props.content && !props.sources)}
+
+        renderer = afx`
+            <picture class={props.class}>
+                {props.content}
+                <Neos.Fusion:Collection collection={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}
+                    />
+                </Neos.Fusion:Collection>
+                <Neos.Fusion:Collection
+                    @if.has={props.imageSource && props.formats}
+                    collection={Type.isArray(props.formats) ? props.formats : String.split(props.formats, ',')}
+                    itemName="format"
+                >
+                    <Sitegeist.Kaleidoscope:Source format={String.trim(format)} />
+                </Neos.Fusion:Collection>
+                <Sitegeist.Kaleidoscope:Image
+                    imageSource={props.imageSource}
+                    sizes={props.sizes}
+                    srcset={props.srcset}
+                    loading={props.loading}
+                    alt={props.alt}
+                    title={props.title}
+                    renderDimensionAttributes={props.renderDimensionAttributes}
                 />
-            </Neos.Fusion:Collection>
-            <Sitegeist.Kaleidoscope:Image
-                imageSource={props.imageSource}
-                sizes={props.sizes}
-                srcset={props.srcset}
-                alt={props.alt}
-                title={props.title}
-            />
-        </picture>
-    `
+            </picture>
+        `
+    }
 }
diff --git a/Resources/Private/Fusion/Prototypes/Source.fusion b/Resources/Private/Fusion/Prototypes/Source.fusion
index e22df3e..bcb2364 100644
--- a/Resources/Private/Fusion/Prototypes/Source.fusion
+++ b/Resources/Private/Fusion/Prototypes/Source.fusion
@@ -5,19 +5,47 @@ prototype(Sitegeist.Kaleidoscope:Source) < prototype(Neos.Fusion:Component) {
     }
 
     imageSource = null
-    type = null
-    media = null
     srcset = null
     sizes = null
+    width = null
+    height = null
+    format = null
+    type = null
+    media = null
+
+    renderer = Neos.Fusion:Component {
 
-    renderer = afx`
-        <source @if.has={props.imageSource}
-            srcset={props.imageSource.srcset(props.srcset)}
-            srcset.@if.has={props.srcset}
-            sizes={props.sizes}
-            sizes.@process.join={Type.isArray(value) ? Array.join(value, ', ') : value}
-            type={props.type}
-            media={props.media}
-        />
-    `
+        @context {
+            imageSource = ${props.imageSource || __imageSource}
+            format = ${props.format || __format}
+            width = ${props.width || __width}
+            height = ${props.height || __height}
+            srcset = ${props.srcset || __srcset}
+            sizes = ${props.sizes || __sizes}
+        }
+
+        @if.hasImageSource = ${imageSource && Type.instance(imageSource, '\\Sitegeist\\Kaleidoscope\\EelHelpers\\ImageSourceHelperInterface')}
+
+        imageSource = ${imageSource}
+        imageSource.@process.applyWidth = ${width ? value.setWidth(width) : value}
+        imageSource.@process.applyHeight = ${height ? value.setHeight(height) : value}
+        imageSource.@process.applyFormat = ${format ? value.setFormat(format) : value}
+
+        type = ${format ? 'image/' + format : props.type}
+        srcset = ${srcset}
+        sizes = ${srcset}
+        media = ${props.media}
+
+        renderer = afx`
+            <source @if.has={props.imageSource}
+                src={props.imageSource.src()}
+                srcset={props.imageSource.srcset(props.srcset)}
+                srcset.@if.has={props.srcset}
+                sizes={props.sizes}
+                sizes.@process.join={Type.isArray(value) ? Array.join(value, ', ') : value}
+                type={props.type}
+                media={props.media}
+            />
+        `
+    }
 }