Wrong image is displayed on browser breakpoints

I wrote a PHP image display function. There is no problem with the function. But I have a problem with breakpoints. On mobile it shows the big picture. I couldn’t understand how to solve the problem.

function imglazy($filen,$altn,$classn) {
    global $imagepath;
    global $cdnsource;
echo '<picture>
<source media="(min-width: 1025px)"
    data-srcset="'.$cdnsource.$imagepath.$filen.'-fl.webp"
    type="image/webp">
<source media="(max-width: 1024px)"
    data-srcset="'.$cdnsource.$imagepath.$filen.'-bg.webp"
    type="image/webp">
<source media="(max-width: 768px)"
    data-srcset="'.$cdnsource.$imagepath.$filen.'-md.webp"
    type="image/webp">
<source media="(max-width: 500px)"
    data-srcset="'.$cdnsource.$imagepath.$filen.'-sm.webp"
    type="image/webp">

<source media="(min-width: 1025px)"
    data-srcset="'.$cdnsource.$imagepath.$filen.'-fl.jpg"
    type="image/jpeg">
<source media="(max-width: 1024px)"
    data-srcset="'.$cdnsource.$imagepath.$filen.'-bg.jpg"
    type="image/jpeg">
<source media="(max-width: 768px)"
    data-srcset="'.$cdnsource.$imagepath.$filen.'-md.jpg"
    type="image/jpeg">
<source media="(max-width: 500px)"
    data-srcset="'.$cdnsource.$imagepath.$filen.'-sm.jpg"
    type="image/jpeg">
<img
    data-srcset="'.$cdnsource.$imagepath.$filen.'-bg.jpg,
        '.$cdnsource.$imagepath.$filen.'-md.jpg,
        '.$cdnsource.$imagepath.$filen.'-sm.jpg"
    data-src="'.$cdnsource.$imagepath.$filen.'-fl.jpg"
    alt="'.$altn.'"
    class="lazyload '.$classn.'">
</picture>';
}