响应式图片先看内容焦点，再看容器尺寸：标出主体、标题安全区和不能被切掉的证据；为桌面、平板、手机分别确定比例和裁切；最后把源图、派生图、alt 与卡片消费者一起验收。用界面设计工具做三种画板，比只拖动一张图片更容易发现移动端会丢什么。
先标主体、证据和安全区
客户案例封面常同时包含人物、产品界面和标题。先把人物表情、产品界面中的关键结果和标题留白标为安全区，再决定容器比例；不要让主体在手机裁切后只剩半张脸或一段无法理解的文字。
安全区不是把所有对象都锁在中央。它记录了“这张图必须让读者先看到什么”，并允许次要背景在窄屏被裁掉。正文、卡片和 OG 需要分别检查，不能以宽图通过就推断小卡片也通过。
按容器做三种画板
为桌面宽图、列表卡片和手机首屏分别建画板，保留同一主视觉但调整构图。桌面可以并排展示人物和产品界面，手机则优先保留一个主体和一条关键文字，避免把三列内容缩成不可读的缩略图。
清晰度和比例要同时考虑。大尺寸源图不等于小尺寸一定清楚；文字如果只能在原图放大查看，说明构图或字号需要重做，而不是继续提高文件体积。
把图片作用写进文本
如果图片只是装饰，alt 可以为空；如果图片承载案例结果，alt 写清对象、关系和用途，例如“客户案例封面展示设计团队在产品界面旁查看组件规范”。不要把“响应式图片、网页设计、Pixso”堆进 alt。
正文应提供图片之外的关键信息。读者不看图也要知道案例对象、动作和结果，图片只负责加快理解；这也能避免社交卡片裁切后失去语义。
交付时核对所有消费者
交付表至少列出源图、派生图、文章首图、聚合卡片、相关推荐、OG/Twitter 和移动端截图。每个消费者都记录比例、文件 URL、alt 和最后一次回读时间。
把三种画板放进同一份 Pixso 文件，评审时依次检查焦点、裁切、文字、加载尺寸和链接。替换首图后还要回读列表和分页，确认没有继续引用旧图。
图片文件名和目录也属于交付的一部分。用内容和版本组成可读的 ASCII 名称，保留源图与派生图的关系，不覆盖旧 URL；文章字段、卡片字段和社交图字段分别记录实际文件。若缓存刷新没有权限，至少在发布记录里写明未验证项。
裁切评审要看完整容器而不是只看 img 元素：标题、按钮、圆角、背景和相邻文字会改变图片的视觉焦点。桌面通过后在手机宽度再看一次，确认图片没有把标题推到下一屏，也没有因比例变化造成布局跳动。
响应式资源和图片替代文本的基础，可参考MDN 响应式图片与W3C 图片替代文本决策树；具体文件策略仍由项目约束决定。
