Image TypoScript library for adaptive images

setup.ts

lib.responsiveImage = IMAGE
lib.responsiveImage {
    file {
        import.current = 1
        treatIdAsReference = 1
    }

    layoutKey = srcset
    layout {
        default {
            element = <img src="###SRC###" width="###WIDTH###" height="###HEIGHT###" ###PARAMS### ###ALTPARAMS### ###BORDER### ###SELFCLOSINGTAGSLASH###>
            source =
        }

        srcset {
            element = <img src="###SRC###" srcset="###SOURCECOLLECTION###" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###>
            source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
        }

        picture {
            element = <picture>###SOURCECOLLECTION###<img src="###SRC###" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###></picture>
            source = <source src="###SRC###" media="###MEDIAQUERY###" ###SELFCLOSINGTAGSLASH###>
        }

        data {
            element = <img src="###SRC###" ###SOURCECOLLECTION### ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###>
            source.noTrimWrap = | data-###DATAKEY###="###SRC###"|
        }
    }

    sourceCollection {
        # smartphone portrait
        viewportXs {
            srcsetCandidate = 320w
            width = 300
            mediaQuery = (min-device-width: 320px)
            dataKey = xs
        }

        # tablet portrait
        viewportSm {
            srcsetCandidate = 768w
            width = 500
            mediaQuery = (min-device-width: 768px)
            dataKey = sm
        }

        # small desktop, tablet landscape
        viewportMd {
            srcsetCandidate = 1024w
            width = 700
            mediaQuery = (min-device-width: 1024px)
            dataKey = md
        }

        # large desktop
        viewportLg {
            srcsetCandidate = 1025w
            width = 200
            mediaQuery = (min-device-width: 1025px)
            dataKey = lg
        }
   }
}