<picture> 不适合直接做 Logo，因其无语义、不可聚焦、缺乏替代文本机制；Logo 应嵌套在 <a href="/"> 内，<img> 必须有 alt="品牌名"；仅当需深色模式或格式切换时才用 <picture>，且 <img> 仍承担语义与降级职责。
为什么 <picture> 不适合直接做 Logo
直接用 <picture> 包裹 Logo 图片，多数情况下是过度设计，还容易引发可访问性与语义问题。Logo 本质是品牌标识，属于页面关键导航元素，应具备明确的语义、可聚焦性、屏幕阅读器可读性，而 <picture> 本身不带语义，且默认不可聚焦、无内置替代文本机制。
常见错误现象：<picture> 里只放一个 <source> 或仅一个 <img>；<img> 缺少 alt 或写成空字符串；用 <picture> 替代链接容器，导致键盘用户无法 Enter 进入首页。
- 必须确保 Logo 是可点击的——它得是
<a>的子元素，且该链接指向首页（href="/"） -
<img>的alt必须为品牌名称，例如alt="Acme Inc"，不能为""或"logo" - 如果需要响应式多图（如深色模式适配、高 DPR 屏幕优化），
<picture>可以用，但必须嵌套在语义正确的链接结构内
需要适配深色模式时怎么用 <picture> + <source>
现代站点常需在浅色/深色主题下切换 Logo 颜色（比如白底黑字 vs 黑底白字）。这时 <picture> 的 media 属性就派上用场，但要注意：CSS 媒体查询值必须与系统偏好一致，且 fallback <img> 仍要承担语义职责。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<a href="/">
<picture>
<source srcset="logo-dark.svg" media="(prefers-color-scheme: dark)">
<source srcset="logo-light.svg" media="(prefers-color-scheme: light)">
<img src="logo-light.svg" alt="Acme Inc">
</picture>
</a>
-
<source>不支持alt，所有可访问性信息必须由最后的<img>承担 - 两个
<source>的media值必须互斥且覆盖完整（如漏掉未匹配情况，会回退到<img>，这没问题；但若写了dark却没写light，部分系统可能不触发任何<source>） - SVG 格式优先——体积小、缩放无损，且支持 CSS 变量注入（如通过
fill="var(--logo-color)"动态着色，比切多图更灵活）
想支持高清屏（2x/3x）但不用 <picture> 怎么办
单纯适配设备像素比，<img> 自身的 srcset 和 sizes 就够了，没必要上 <picture>。强行套一层反而增加 DOM 复杂度，还可能干扰浏览器的预加载判断。
正确写法（无 <picture>）：
<a href="/">
<img
src="logo-1x.png"
srcset="logo-1x.png 1x, logo-2x.png 2x, logo-3x.png 3x"
alt="Acme Inc">
</a>
-
src是兜底项，必须提供，且应为 1x 版本（否则低 DPR 设备可能加载大图） - 所有
srcset中的图片必须尺寸一致（如都是 200×50px），仅分辨率不同；否则浏览器无法按密度准确选择 - 如果 Logo 是纯色矢量图形，用 SVG + 内联样式或 CSS
image-set()更轻量，且无缩放模糊风险
用 <picture> 时最容易被忽略的细节
真正出问题的地方，往往不在结构是否“正确”，而在于资源加载时机和降级行为是否可控。
-
<source>的type属性（如type="image/webp"）必须与实际文件 MIME 类型严格一致，否则整条<source>被忽略，浏览器继续向下找 - 多个
<source>的顺序很重要：浏览器从上到下匹配第一个满足media和/或type的项，不回溯；把最常用场景（如默认浅色模式）放在前面更稳妥 -
<img>的width和height属性建议保留（即使 CSS 控制尺寸），防止布局偏移（CLS）；尤其当 Logo 在 header 中频繁出现时 - 构建工具或 CMS 输出的
<picture>若自动注入空<source>或无效路径，会导致图片完全不显示且无报错提示——务必在真机+各模式下手动验证
