使用picture标签时是否需要在source中重复默认img的src路径？

结论：第二种写法完全合法可用，无需在中重复填写和 src一致的JPG路径，直接依赖原生兜底逻辑即可有效减少代码冗余。

原生兜底逻辑说明 #

<picture> 标签的设计本身就自带两层兜底机制，完全能覆盖所有场景：

• 对支持<picture>的浏览器：会从上到下依次校验每个<source>的匹配条件（格式、媒体查询、像素密度规则等），如果所有<source>都不满足匹配要求，会自动 fallback 到内部<img>标签的src资源，无需额外新增JPG格式的<source>
• 对完全不支持<picture>的老旧浏览器：会直接忽略<picture>和<source>这两个未知标签，直接渲染内部的<img>元素，不会出现图片无法加载的问题

两种写法对比 #

冗余写法（不推荐）

<picture>
  <source srcset="img/myphoto.webp" type="image/webp">
  <source srcset="img/myphoto.jpg" type="image/jpeg"> 
  <img src="img/myphoto.jpg" alt="">
</picture>

这种写法额外新增的JPG格式<source>没有任何实际价值，反而会提高维护成本：后续修改图片路径时需要同时修改<source>和<img>两处，漏改就会出问题。

精简写法（推荐）

<picture>
  <source srcset="img/myphoto.webp" type="image/webp">
  <img src="img/myphoto.jpg" alt="">
</picture>

仅当你针对同格式图片有额外适配需求时，才需要新增对应<source>，比如要根据视口宽度加载不同尺寸的JPG、给高分辨率屏幕加载2x倍率的JPG资源等，普通场景下用精简写法完全足够。

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