picture 标签如何实现 art direction 在不同屏幕尺寸显示不同图片

picture标签通过source元素的media属性实现art direction，即按屏幕尺寸切换不同构图的图片；sizes配合srcset可精确控制响应式图片宽度与分辨率适配；img作为兜底且承载唯一alt文本，确保可访问性。

picture 标签通过 source 元素配合 media 或 srcset + sizes 属性，实现 art direction —— 即根据不同屏幕尺寸、设备特性，**主动选择语义上更合适（不一定是分辨率更高）的图片版本**，比如手机端裁剪特写人脸、桌面端展示全景。

用 media 属性按断点切换不同构图的图片

这是 art direction 的核心用法：为不同视口宽度提供完全不同的图片资源（不同裁剪、不同焦点、甚至不同内容）。

• source 元素放在 picture 内，每个带 media 属性（如 (max-width: 768px)），声明适用条件
• 浏览器从上到下匹配第一个满足条件的 source，加载其 srcset 指定的图片
• 必须在最后放一个 img 标签作为兜底（无匹配时使用，且供不支持 picture 的老浏览器降级）

结合 sizes 精确控制响应式图片宽度

当需要为同一张图提供多分辨率版本（如 1x / 2x），或图片在页面中占据的视口比例随断点变化时，sizes 告诉浏览器“这张图在不同条件下大概占多宽”，再由 srcset 提供对应尺寸的资源。

• sizes 是字符串，包含媒体条件和长度值，例如 sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
• srcset 列出多个资源及其宽度描述符（如 "small.jpg 480w, medium.jpg 960w, large.jpg 1440w"）
• 浏览器根据 sizes 计算出目标显示宽度，再选最接近的 srcset 项加载

      media=”(max-width: 600px)”
    srcset=”hero-crop-sm-480w.jpg 480w,
            hero-crop-sm-960w.jpg 960w”
    sizes=”100vw”
  >
      media=”(max-width: 1200px)”
    srcset=”hero-crop-md-960w.jpg 960w,
            hero-crop-md-1440w.jpg 1440w”
    sizes=”50vw”
  >
      src=”hero-full-1440w.jpg”
    srcset=”hero-full-1440w.jpg 1440w,
            hero-full-2880w.jpg 2880w”
    sizes=”33vw”
    alt=”品牌故事”
  >

注意 fallback 和可访问性

art direction 不是单纯换分辨率，而是换内容表达。因此语义和可访问性不能妥协：

• 每个 source 对应的图片，如果构图差异大（如人脸 vs 全景），alt 文本应统一描述核心信息，而非具体画面细节
• img 的 alt 是唯一被读屏器读取的内容，必须准确传达意图（例如 “春季新品发布现场” 而非 “一张蓝背景人像”）
• 避免仅靠 css 隐藏/显示图片做 art direction —— 这无法阻止多余图片下载，也不具备语义

验证是否生效

打开浏览器开发者工具 → Network 面板，调整窗口宽度并刷新，观察实际加载的是哪个 source 的图片；也可在 Elements 面板中查看 picture 下高亮的生效 source 元素。