imagery

用途：处理界面中的照片与插画，包括宽高比、裁剪、占位符与模糊预览、头像、设备边框和深色模式处理。核心原则：默认不放照片，图片只在图片本身就是内容时使用（用户上传、商品、数据图表、真实产品截图）。主要能力：在字节到达前锁定比例（aspect-ratio 加 width/height）；同一集合只用一个比例；按角色而非时长选择占位符（首屏用 data: URI 模糊预览，网格缩略图用主色，头像用首字母，装饰图不用）；按艺术指导裁剪而非依赖 CSS；每张图加 1px 内描边（浅色黑 10%、深色白 10%）；截图需真实深色捕获而非滤镜；插画遵循图标系统的描边粗细、颜色令牌与光照方向；产品演示用设备边框并支持 1x/0.5x 速度切换。用法：沿用项目已有图片管线（next/image、Astro <Image>、@nuxt/image、图片 CDN 或 <img> 约定），不要手写 srcset 与框架组件并存；无管线时先明确说明再决定是否引入。输出契约要求每张图带 src、srcset、sizes、width、height、alt、decoding，首屏图加 fetchpriority="high"，折叠下方图用 loading="lazy"，装饰图 alt=""。限制：资料未提供具体价格、平台支持范围或效果数据；分类依据其界面图片处理用途归入设计与创作。