R3.07.1per-use image variants设计
尺寸与格式需按使用场景生成
别名: srcset · 响应式图 · 多格式出图 · 使用场景变体
概念解释
一张源图不是一次投递。屏幕上的 CSS 像素、设备像素比、解码器支持的编码，合在一起才决定该送哪一个文件。按使用场景生成尺寸与格式，指的是为每个展示槽产出匹配的宽、高、密度和编码（AVIF / WebP / JPEG 等），再用 srcset、sizes 或等价清单让运行时挑选。用同一份 4000 像素原图去填头像和去填全屏英雄图，浪费的是字节和解码，不是“画质不够高”。
机制
解码按编码像素计费：宽×高×通道，再乘设备像素比。展示只要 80 CSS 像素的头像，却下载 2000 像素边长的图，主线程和 GPU 仍按 2000 解码，然后丢掉多余采样。格式决定压缩效率与是否能硬件解码：同一内容的 AVIF 往往小于 JPEG，但老设备可能解不了。srcset 提供候选，sizes 告诉引擎这个槽在当前布局里有多宽，引擎按 DPR 和槽宽选最接近的候选。没有按槽生成的候选，引擎只能选“仅有的那一张”，无论它对不对。
场景还包括裁切：列表缩略图需要中心裁切的小图，英雄图需要保留构图的大图。只缩不裁，会在小槽里送一张构图错误的缩小全图，既费字节又看不清主体。
边界
用户上传后立刻预览的原图，来不及走完整出图管道，可以先用本地缩小，再在后台生成场景变体。矢量图标、SVG 插画不走栅格 srcset。打印、海报导出要的是物理分辨率，不是屏幕槽宽。仅内网、次数极少的管理页，为每个槽维护变体的成本可能高于那几张原图。直播和实时画布的帧不是预生成文件。
怎么落地
- 为每个展示槽规定 CSS 宽、最大 DPR 和允许的编码，构建时从源图生成对应文件，禁止组件写死一份原图 URL。
- 标记里同时给
srcset与sizes（或客户端等价选择器），让引擎按槽宽而不是按视口瞎猜。 - 缩略图单独出裁切尺寸，不要把英雄图缩小后充当列表图。
- 验证：在 1x 与 3x 设备、窄列表与宽英雄槽上抓实际请求，文件像素边长应落在槽宽×DPR 的邻近档；解码耗时应随档位下降，而不是各槽都解同一张大图。