How to render responsive images in fluid templates (dce example)

FluidTemplate.html

{namespace dce=ArminVieweg\Dce\ViewHelpers}
<f:layout name="Default" />
<f:section name="main">
	<f:for each="{dce:fal(field:'images', contentObject:contentObject)}" as="image">
		<!-- This is the normal unresponsive way -->
		<f:image image="{image}" />
		
		<!-- Here we referer to typoscript to render the responsive image -->
		<f:cObject typoscriptObjectPath="lib.responsiveImage" data="{image.uid}"></f:cObject>
	</f:for>
</f:section>

setup.ts

lib.responsiveImage = IMAGE
lib.responsiveImage {
	file {
		import.current = 1
		treatIdAsReference = 1
	}
	sourceCollection < tt_content.image.20.1.sourceCollection
	layout < tt_content.image.20.1.layout
	layoutKey = {$styles.content.imgtext.layoutKey}
}

Here you find the possible values for layoutKey:
http://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Image/Index.html#cobj-image-layoutkey

hmm that does not work for me :/ to old? is there a good solution for the current version ?

Thank you, great hint!

Is there a way to apply the same technique for section images?

<f:for each="{item.image -> dce:explode()}" as="imageUid">
    <f:image src="file:{imageUid}"/>                        
</f:for>

I have exactly the same problem:

<f:for each="{item.image -> dce:explode()}" as="imageUid">
<f:image src="file:{imageUid}"/>
</f:for>

Is there any solution for this?