lazy-loaded picture for craftcms templates

picture.twig

        {% import '_inc/macros.twig' as macro %}

        {% set imageQr = entry.image %}
        {% if imageQr|length %}
            {% set image = imageQr.one() %}
            <picture class="lazy hero__media" style="display: block; min-height: 1rem" data-iesrc="{{ macro.fit(image, 1200, 'auto', 90)|trim }}" data-alt="{{ image.title }}">
                <source media="(min-width: 764px)" srcset="{{-
                        macro.fit(image, 1000, 'auto', 100)|trim ~ ' 1000w, ' ~
                        macro.fit(image, 1600, 'auto', 100)|trim ~ ' 1600w, ' ~
                        macro.fit(image, 2400, 'auto', 100)|trim ~ ' 2400w' -}}"
                        sizes="62.5rem">
                <source media="(min-width: 300px)" srcset="{{-
                        macro.fit(image, 375, 'auto', 100)|trim ~ ' 375w,' ~
                        macro.fit(image, 750, 'auto', 100)|trim ~ ' 750w,' ~
                        macro.fit(image, 1500, 'auto', 100)|trim ~ ' 1500w' -}}"
                        sizes="100vw">
            </picture>
        {% endif %}
        
        {# macro.crop(image, 10/4, 1600) #}