Resources/Private/Components/Picture/Picture.html

<html
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:fc="http://typo3.org/ns/SMS/FluidComponents/ViewHelpers"
    xmlns:ft="http://typo3.org/ns/Sitegeist/FluidTagbuilder/ViewHelpers"
    data-namespace-typo3-fluid="true"
>

<fc:component>
    <fc:param name="src" type="Sitegeist\MediaComponents\Domain\Model\ImageSource" />
    <fc:param name="sources" type="Sitegeist\MediaComponents\Domain\Model\ImageSource[]" />
    <fc:param name="alt" type="string" optional="1" />
    <fc:param name="title" type="string" optional="1" />

    <f:comment><!-- Scaling --></f:comment>
    <fc:param name="height" type="integer" optional="1" />
    <fc:param name="width" type="integer" optional="1" />
    <fc:param name="maxDimensions" type="boolean" optional="1" />

    <f:comment><!-- Delivery --></f:comment>
    <fc:param name="lazyload" type="boolean" optional="1" />
    <fc:param name="preload" type="boolean" optional="1" />

    <fc:renderer>
        <ft:picture :spaceless="1">
            <f:for each="{sources}" as="source">
                <fc:picture.source
                    src="{f:if(condition: source.originalImage, then: source, else: src)}"
                    format="{f:if(condition: source.format, then: source.format, else: src.format)}"
                    crop="{f:if(condition: source.crop, then: source.crop, else: src.crop)}"
                    srcset="{source.srcset}"
                    sizes="{source.sizes}"
                    media="{source.media}"
                    preload="{preload}"
                />
            </f:for>
            <fc:image
                src="{src}"
                height="{height}"
                width="{width}"
                crop="{src.crop}"
                srcset="{src.srcset}"
                maxDimensions="{maxDimensions}"
                sizes="{src.sizes}"
                format="{src.format}"
                alt="{alt}"
                title="{title}"
                lazyload="{lazyload}"
                preload="{preload}"
                class="{class}"
            />
        </ft:picture>
    </fc:renderer>
</fc:component>

</html>