用途：在 Next.js 中实现图片艺术指导，即根据视口尺寸展示内容或构图完全不同的图片，而非仅对同一张图做缩放。典型场景包括首页轮播在移动端与桌面端使用不同素材、移动端竖版裁剪与桌面端横版切换、不同断点使用不同焦点或构图。
主要能力：借助 getImageProps()（Next.js 14.1.0 起稳定）生成各版本图片所需的 props，再配合 <picture>、<source> 和 <img> 输出。可分别设置不同源的 src、width/height 和 quality，并共享 alt 与 sizes；使用 media 属性按断点选择匹配的 <source>，浏览器采用首个匹配项，因此需注意 source 顺序（桌面优先或移动优先）。
使用方式：定义 common 属性（如 alt、sizes），为每个断点分别调用 getImageProps() 获取 srcSet，最后用 <picture> 包裹多个 <source>，并在末尾放置一个 <img> 作为必需的回退。若需提升 LCP 图片优先级，使用 fetchPriority="high"。还可将 srcSet 转换为 image-set() 用于 CSS 背景图优化。
限制：不能使用 preload 或 loading="eager"，否则会导致所有图片立即加载，失去艺术指导意义；getImageProps() 不支持 placeholder 属性；alt 文本需同时适用于所有版本；必须确保各断点对应的图片文件真实存在，否则会出现破损图标；若只是同一张图改变尺寸，应使用常规响应式图片而非艺术指导。