picture 标签 + srcset + media 实现响应式图片的正确写法

正确使用 标签需按视口条件选择不同图片资源：用 media 定义断点，srcset 提供对应分辨率选项，为必需兜底；media 必须是合法媒体查询，srcset 在 source 中仅处理设备像素比切换，img 的 src 不可省略且需配 alt。

正确使用 标签配合 srcset 和 media，核心是 ** 按视口条件选择不同图片资源，而非让 浏览器 自动缩放同一张图 **。关键在于： 用 media 定义断点规则，srcset 提供该条件下的多分辨率选项， 作为兜底且必须存在。

1. 基础结构不能少：picture + source + img

是容器，内部可有多个 ，但 ** 必须以 结尾 **。浏览器按顺序匹配 media，找到第一个满足的 后，就用它的 srcset（和可选的 sizes）决定加载哪张图；没匹配到则用 的 src 和 srcset。

• 不支持 src，只靠 srcset + media（或 type）生效
• 的 src 是必需属性，即使写了 srcset 也得有 src
• 示例结构：

2. media 属性写的是 CSS 媒体查询，不是像素值

media 的值必须是合法的媒体查询字符串，比如 (max-width: 768px)、(min-width: 48em)、(prefers-reduced-motion: reduce)。它不接受纯数字或自定义关键词。

• 避免写成 media="768px" 或 media="tablet" —— 这些无效，浏览器会忽略该
• 断点建议与 CSS 保持一致，方便维护（如用 48em 对应 768px）
• 多个条件可用 and 组合，例如：media="(min-width: 769px) and (orientation: landscape)"

3. srcset 在 source 中只管“分辨率切换”，不负责“宽度适配”

当 匹配成功后，它的 srcset 仅用于在满足该 media 条件的设备上，根据设备像素比（dpr）选图（如 1x/2x）。它不会根据元素宽度变化选图——那是 sizes 的事。

• 如果只需适配 dpr，用 srcset="a.jpg, b.jpg 2x" 即可
• 如果图片在页面中宽度会变（比如全宽 banner），需配合 sizes 属性告诉浏览器“这张图大概占多宽”，浏览器才能量化选择最合适的 srcset 项
• 正确带 sizes 示例：
  

4. img 标签仍需 src 和 srcset，且不可省略

是 的降级出口，也是无障碍和 SEO 的基础。即使所有 都匹配，浏览器仍会读取 的 src 作为默认图源（尤其在 JS 禁用或解析异常时）。

• src 必须是单张图地址（不能是逗号分隔列表），建议提供中等尺寸、通用兼容的版本
• srcset 可继续提供 dpr 适配，增强高分屏体验
• alt 属性必须写，且描述准确，不可为空或仅用文件名