用途：在 Next.js 中实现图片的艺术指导（Art Direction），即针对不同视口展示内容或构图完全不同的图片，而非对同一张图做响应式缩放。典型场景包括首页轮播在移动端与桌面端使用不同素材、移动端竖版裁切与桌面端横版、不同屏幕尺寸采用不同焦点或构图、按断点调整内容层级、以及为各视口提供分别优化的图片资源。
主要能力：通过 next/image 的 getImageProps()（自 Next.js 14.1.0 起稳定）生成图片属性，无需调用 React useState()。可分别为桌面、平板、移动端版本设置 src、width、height、quality 等差异属性；共享 alt、sizes 等公共属性。使用 <picture> 包裹多个带 media 属性的 <source> 元素，并以 <img> 作为必需的兜底元素。也可将 srcSet 转换为 CSS image-set() 用于背景图优化。
使用方式：定义 common 公共属性，分别调用 getImageProps() 获取各断点的 srcSet，在 <picture> 中按顺序放置 <source media="..." srcSet={...} />，最后放 <img {...rest} />。<source> 顺序很重要，浏览器采用第一个匹配项，可按桌面优先（从大到小）或移动优先（从小到大）排列。需要优先加载 LCP 图片时使用 fetchPriority="high"。
限制与注意：getImageProps() 不支持 preload 与 loading="eager"，否则会导致所有版本图片立即加载；也不支持 placeholder 属性，需自行处理加载状态。alt 文本需同时适用于所有版本。必须确保各断点对应的图片文件存在，否则会出现破图。若仅是同一张图改变尺寸，应使用 sizes 与 srcset 的常规响应式方案，而非艺术指导。
适用场景：需要按视口改变图片内容、构图或焦点的 Next.js 项目。资源未提供的具体版本兼容细节与更多用法暂未提供。