Atomic Fusion responsive image

Image.fusion

prototype(BeardCoder.Creativeworkspace:Component.Atom.Image) < prototype(PackageFactory.AtomicFusion:Component) {
    @styleguide {
        props {
            src = 'https://dummyimage.com/600x400/000/fff'
            title = 'image title'
            alt = 'image alt'
        }
    }

    alt = ''
    image = ''
    height = ''
    width = ''
    allowCropping = ''
    title = ''
    class = false

    renderer.@context {
        _imageUriDesktop = Neos.Neos:ImageUri {
            asset = ${props.image}
            width = ${props.width}
            allowCropping = ${props.allowCropping}
        }
        _imageUriTablet = Neos.Neos:ImageUri {
            asset = ${props.image}
            width = ${props.width}
            maximumWidth = '768'
            height = ${props.height}
            allowCropping = ${props.allowCropping}
        }
        _defaultImageUri = Neos.Neos:ImageUri {
            asset = ${props.image}
            width = ${props.width}
            maximumWidth = '480'
            height = ${props.height}
            allowCropping = ${props.allowCropping}
        }

        _dummyImage = Neos.Fusion:Value {
            value = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
        }
    }

    renderer = afx`
    <picture>
        <source media="(min-width: 769px)" srcset={_dummyImage} data-srcset={_imageUriDesktop} />
        <source media="(min-width: 480px)" srcset={_dummyImage} data-srcset={_imageUriTablet} />
        <img class="img-fluid lazy" src={_dummyImage} data-src={_defaultImageUri} title={props.title} alt={props.alt} />
    </picture>
    `
}