{if !empty($image)}
    {assign var=useWebP value=(!empty($webp) && \JTL\Media\Image::hasWebPSupport())}
    {block name="et-breakpoint-image"}
        {assign var="lazy" value=$lazy|default:false}
        {et_getSetting section="breakpoints" assign="et_breakpoints"}
        <picture>
            {if !empty($image.xl.src) || !empty($image.xl.srcWebP)}<source srcset="{if $useWebP && !empty($image.xl.srcWebP)}{$image.xl.srcWebP}{else}{$image.xl.src}{/if}" media="(min-width: {$et_breakpoints.xlMin}px)" {$image.xl.attributes}{if $useWebP && !empty($image.xl.srcWebP)} type="image/webp"{/if}/>{/if}
            {if !empty($image.lg.src) || !empty($image.lg.srcWebP)}<source srcset="{if $useWebP && !empty($image.lg.srcWebP)}{$image.lg.srcWebP}{else}{$image.lg.src}{/if}" media="(min-width: {$et_breakpoints.lgMin}px)" {$image.lg.attributes}{if $useWebP && !empty($image.lg.srcWebP)} type="image/webp"{/if}/>{/if}
            {if !empty($image.md.src) || !empty($image.md.srcWebP)}<source srcset="{if $useWebP && !empty($image.md.srcWebP)}{$image.md.srcWebP}{else}{$image.md.src}{/if}" media="(min-width: {$et_breakpoints.mdMin}px)" {$image.md.attributes}{if $useWebP && !empty($image.md.srcWebP)} type="image/webp"{/if}/>{/if}
            {if !empty($image.sm.src) || !empty($image.sm.srcWebP)}<source srcset="{if $useWebP && !empty($image.sm.srcWebP)}{$image.sm.srcWebP}{else}{$image.sm.src}{/if}" media="(min-width: {$et_breakpoints.smMin}px)" {$image.sm.attributes}{if $useWebP && !empty($image.sm.srcWebP)} type="image/webp"{/if}/>{/if}
            {if !empty($image.xs.src) || !empty($image.xs.srcWebP)}<source srcset="{if $useWebP && !empty($image.xs.srcWebP)}{$image.xs.srcWebP}{else}{$image.xs.src}{/if}" {$image.xs.attributes}{if $useWebP && !empty($image.xs.srcWebP)} type="image/webp"{/if}/>{/if}
            <img src="{if !empty($image.xl.src)}{$image.xl.src}{elseif !empty($image.lg.src)}{$image.lg.src}{elseif !empty($image.md.src)}{$image.md.src}{elseif !empty($image.sm.src)}{$image.sm.src}{elseif !empty($image.xs.src)}{$image.xs.src}{/if}" alt="{if !empty($alt)}{$alt}{else}{$image.xl.alt}{/if}" class="et-breakpoint-image img-responsive{if !empty($class)} {$class}{/if}"{if !empty($id)} id="{$id}"{/if}{if $lazy} loading="lazy"{/if} {$image.xl.attributes}/>
        </picture>
    {/block}
{/if}