浏览器断点下图片显示错误：PHP懒加载函数移动端适配异常

• 媒体查询匹配顺序错误：浏览器解析``内的``标签时会从上到下依次匹配media规则，命中第一个符合条件的就停止后续匹配。你当前代码中max-width规则按照从大到小（1024px→768px→500px）排序，所有宽度小于1024px的设备都会直接命中第一条`max-width:1024px`的规则，加载`-bg`后缀的大图，不会向下匹配更小尺寸的断点。
• 懒加载适配问题：部分老旧懒加载库仅支持处理<img>标签的data-src/data-srcset属性，不会解析<picture>下<source>标签的data-srcset属性，会直接回退到<img>标签的data-src属性值也就是-fl后缀的最大图。
• <img>标签的data-srcset缺少宽度描述符：没有标注每个图片对应的宽度参数，浏览器无法根据当前视口尺寸选择最优资源，大概率会默认加载尺寸最大的资源。

1. 调整<source>标签排序，max-width规则从小到大排列，min-width规则放在最后，保证小屏设备优先命中对应小尺寸资源规则
2. 更换支持<picture>元素的标准懒加载库，或直接使用原生懒加载属性loading="lazy"（兼容95%以上的市面浏览器）
3. 给<img>标签的srcset补充宽度描述符，匹配对应断点尺寸，帮助浏览器选择合适资源

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

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

内容的提问来源于stack exchange，提问作者Yunus