网站图片尺寸：如何制定阶段性交付物
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /4fccbd9a3d82.html
📄
网站图片尺寸：如何制定阶段性交付物
制定网站图片尺寸的阶段性交付物，核心是把“一次性定尺寸”拆成可验证的三步：先盘点现有图片和展示位置，再按位置确定尺寸规则，最后用抽样检查确认规则能落地。每阶段都要有可交付的文件或清单，而不是只停留在口头约定。
第一阶段：交付图片清单与展示位置表
这一阶段的交付物是一张表，列出每类图片出现在哪些页面、由谁提供、当前实际像素是多少。没有这张表，后面讨论尺寸就是凭感觉。
- 列出图片用途：文章配图、商品主图、列表缩略图、横幅、头像、图标。
- 记录每个用途在页面上的展示宽度，以CSS像素为单位，而不是凭截图目测。
- 记录图片来源：编辑上传、系统生成、外部接口返回。
- 标记哪些图片会被同一页面多次使用，例如列表页和详情页共用一张图。
判断这一阶段是否完成，看两点：任意一张现有图片能否在表中找到对应行；任意一个展示位置能否说出它期望的宽度范围。如果只能说出“大概几百像素”，说明盘点还不够。
第二阶段：交付尺寸规则与命名约定
规则要回答三个问题：每个位置输出几种宽度、用什么格式、文件怎么命名。交付物可以是一份团队内部文档，也可以写成配置说明。
常见的做法是按展示宽度的1倍和2倍各输出一档。假设某列表缩略图展示宽度为300 CSS像素，那么可以准备300像素和600像素两个版本，由页面根据设备像素比选择。这是假设示例，实际档位要看页面布局和图片内容。
命名约定建议包含用途和宽度，例如 article-cover-800.jpg。这样在排查问题时，不需要打开图片就能判断它是否用错了位置。
这一阶段还要写明例外条件：需要保留透明背景的图片用PNG或WebP；照片类图片优先用有损格式；图标和简单图形可以单独处理。规则越具体，后续执行时越少反复。
第三阶段：交付抽样检查结果与问题清单
规则写完不等于落地。第三阶段要抽取若干页面，检查实际输出的图片是否与规则一致。交付物是一份检查结果，包含通过项、不通过项和原因分类。
- 从每个图片用途中各选一个代表性页面。
- 查看页面实际加载的图片文件宽度，与规则中的档位对比。
- 检查是否存在用大图缩小显示的情况，这通常意味着尺寸规则没有被正确应用。
- 记录问题属于哪一类：规则缺失、上传时未按规则处理、页面代码写死了错误尺寸。
原因分类很重要。如果问题集中在“上传时未处理”，需要调整的是内容流程；如果集中在“页面代码写死”，需要调整的是模板或组件。把不同原因混在一起，会导致修改方向错误。
如何比较不同方案的代价
制定阶段性交付物时，常见的分歧是要不要一次覆盖所有图片类型。可以按两个条件比较：图片数量和改动成本。
- 图片类型少、页面模板统一：可以一次定完规则，阶段划分可以粗一些。
- 图片类型多、历史内容量大：先覆盖新增内容，再分批处理存量，避免规则迟迟无法上线。
- 外部接口返回的图片无法控制尺寸：需要在规则中单独标注，并记录当前处理方式。
判断选择是否合理，看它是否让下一阶段有明确的输入。如果第一阶段结束后仍然不知道要检查哪些页面，说明交付物还缺少关键信息。
下一步可以执行的动作
从现有页面中选出三个不同类型的图片位置，按上面的三阶段各产出一份最小交付物：一张位置表、一条尺寸规则、一次抽样检查记录。完成后再决定是否扩大范围。
