用途：当视口尺寸需要不同图片内容或裁剪（而非仅缩放）时，在 Next.js 中实现图片艺术方向。目标是每个视口只渲染一张正确图片，保留 Next.js 图片优化，并避免加载未使用的图片。
主要能力与规则：使用 <picture> 搭配 <source> 和最终 <img>；对每个素材调用 getImageProps()；共享 alt 与 sizes；alt 需对所有变体都准确；source 顺序要让第一个匹配的媒体查询生效；不要使用 preload 或 loading="eager"；LCP 图片必要时用 fetchPriority="high"；不要将 placeholder 与 getImageProps() 一起使用。
使用方式：先确认内容确实变化而非仅尺寸变化，按断点选择素材，定义公共属性，为每个素材生成 srcSet，把 <source> 放在回退 <img> 之前。示例模式：import { getImageProps } from 'next/image'，定义 common = { alt: 'Mountain landscape', sizes: '100vw' }，分别对桌面与移动素材调用 getImageProps 取得 srcSet，再在 <picture> 中用 <source media="(min-width: 768px)" srcSet={desktop} /> 与 <img {...rest} style={{ width: '100%', height: 'auto' }} /> 输出。
流程：确认内容变化、按断点选素材、定义公共属性、生成各素材 srcSet、放置 source 与回退 img、测试桌面/平板/移动、确认只加载匹配图片。
适用场景：需要在不同断点展示不同裁剪或不同图片内容的响应式页面。限制：资料未提供更多平台、收费或效果信息。