{% macro image(sectionName, path, imageSrc, imageMobileSrc, imageAlt) %}
    {% if 'svg' in imageSrc or 'gif' in imageSrc %}
        <img class="lazyload {% if sectionName != '' %}{{sectionName}}__img{% endif %}" src="{{path}}/{{imageSrc}}?format=webp" alt="{{imageAlt}}">
    {% else %}
        <picture>            
            {% if imageMobileSrc != '' %}
                <source type="image/webp" media="(max-width: 767px)" srcset="{{path}}/{{imageMobileSrc}}.webp?format=webp">
            {% endif %}
            <source type="image/webp" {% if imageMobileSrc != '' %}media="(min-width: 768px)"{% endif %} srcset="{{path}}/{{imageSrc}}.webp?format=webp">
            {% if imageMobileSrc != '' %}
                <source type="image" media="(max-width: 767px)" srcset="{{path}}/{{imageMobileSrc}}?format=webp">
            {% endif %}
            <source type="image" {% if imageMobileSrc != '' %}media="(min-width: 768px)"{% endif %} srcset="{{path}}/{{imageSrc}}?format=webp">
            <img class="lazyload {% if sectionName != '' %}{{sectionName}}__img{% endif %}" src="{{path}}/{{imageSrc}}?format=webp" alt="{{imageAlt}}">
        </picture>
    {% endif %}
 {% endmacro %}