素材准备 / 04
发送正确的
图像候选。
在私有、仅浏览器的上下文中审阅基本图像元数据与交付问题。该过程不上传、保留、优化或检查文件(仅限元数据与本地尺寸)。
用途: 用于就图像放置、响应式候选、可访问的替代文本和交付权衡准备讨论。
本地私有文件选择器 / 仅本地读取
检查 起点。
选择一张本地图片以查看浏览器报告的基本元数据与像素尺寸。SIU 不会上传、发送、保留、优化或存储所选文件。
选择本地图片 — 尚未选择图片。未进行上传或存储。
内存读出 / 本标签页
无任何 外发。
所选图片会显示其名称、浏览器报告的 MIME 类型、字节大小、最后修改时间以及本地可解码的像素尺寸。
不会生成预览。仅在本地元数据对审查有用时选择图片。
方法 / 源限定
完成下一步 已知步骤。
- 选择一张本地图片。浏览器仅在内存中读取其名称、MIME 类型、字节大小、最后修改时间戳,以及在可解码时的像素尺寸。
- 将这些像素尺寸与预期的渲染宽度和设备像素密度联系起来;然后决定页面是否需要多个图像候选或艺术导向(art direction)。
- 审查标记上下文:有意义的替代文本、在适当情况下声明的尺寸、响应式源选择以及加载优先级是独立的决策。
- 将原始源资产保留在团队既定的资产与许可流程下。本页不会创建任何派生文件。
验证 / 在依赖之前
使用团队批准的浏览器和性能工具,在预期断点检查渲染页面。
在代码审查中确认图像替代文本和实际的响应式标记。
在断言改进之前,请在真实环境中测量交付效果。
权威 / 审查
来源说明, 而非借来的确定性。
规划依据:web.dev 响应式图像指导与 MDN File API 文档
- web.dev — Responsive images ↗web.dev 解释了图像字节可能很大,并描述了响应式候选、srcset、sizes 和 picture 的适用场景。
- MDN — Using files from web applications ↗MDN 记录了用户选取的 File 对象以及本地可用的 name、type 和 size 元数据。
上下文 / 保持交接连接
作者: SIU Enablement 编辑草案;基于来源的操作性指南。 审查者: 设计、可访问性、性能与权利所有者应在其交付上下文中审查图像。 重新验证: 当放置位置、响应式规则、资产来源或交付提供方发生变化时需重新验证。