使用lazysizes实现picture元素多格式响应式图片懒加载的正确方法

你提交的示例代码存在两处可直接导致功能失效的错误：

• 属性拼写错误：source标签使用的data-scrset为错误属性名，正确属性名为data-srcset，拼写遗漏了字符r
• 冗余属性：img标签无需添加type属性，该属性仅用于source标签做媒体资源类型声明

正确实现逻辑 #

按「先匹配媒体查询条件→再匹配浏览器支持的图片格式→最后触发懒加载替换资源」的优先级实现，既满足响应式适配、多格式兼容需求，也符合lazysizes的调用规则，完整代码如下：

<picture>
  <!-- 小屏场景优先加载JPG格式 -->
  <source data-srcset="example.jpg" type="image/jpeg" media="(max-width: 736px)"/>
  <!-- 大屏场景优先加载WebP格式（支持WebP的浏览器会自动选中该资源） -->
  <source data-srcset="example.webp" type="image/webp"/>
  <!-- 兜底回退PNG格式，懒加载标识类只需加在img标签上即可生效 -->
  <img class="lazyload" data-src="example.png" alt="fallback" width="实际图片宽度" height="实际图片高度">
</picture>

可选优化建议 #

• 给img标签加上原生width和height属性，可避免懒加载触发时出现页面布局偏移
• 如果需要适配不同像素密度的屏幕，data-srcset可按规范声明多倍图，比如data-srcset="example@1x.webp 1x, example@2x.webp 2x"
• lazysizes默认会自动识别picture下的data-srcset/data-src属性，无需额外做插件配置即可正常工作

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