使用 srcset 和 sizes 的响应式图像

选择正确的模式

分辨率切换（resolution switching）保持构图不变，并提供若干文件宽度，是产品照片、文章图示和卡片的常见模式。当呈现宽度随布局变化时，请使用诸如 480w 或 1200w 的宽度描述符。这个数字表示文件的真实像素宽度，而不是目标手机宽度或 CSS 指令。

密度切换（density switching）用于固定 CSS 槽位，为高密度显示提供更多源像素。其描述符为 1x、1.5x 或 2x，适用于例如始终为 160 CSS 像素宽的徽标或图标。不要在同一个 srcset 中混合宽度（w）和密度（x）描述符。

了解 sizes 如何指导选择

使用宽度描述符时，浏览器在下载图像之前会评估 sizes。每一项将可选的媒体条件与一个长度配对。第一个匹配的条件提供源大小；最后一个无条件的长度作为回退。sizes 是选择提示，而不是 CSS 规则。

浏览器将该源大小与候选图像宽度进行比较以计算有效密度，并可能还会考虑显示密度、缩放和网络条件。浏览器并非必须选择数学上最接近的文件名。请提供真实的候选项和可信的槽位估算；最终选择仍由用户代理（浏览器）决定。

从实际布局推导候选文件

对组件而非页面做清单。Hero、编辑插图、产品画廊、搜索缩略图和页脚徽标通常具有不同的槽位宽度。为每个组件记录窄端和最大呈现宽度、纵横比、裁切行为以及是否出现在首屏。

在组件的有意义槽位范围周围生成宽度，当细节需要高密度渲染时提供更大的选项。几乎相同的文件会增加构建和缓存复杂度；只在极小和极大文件之间存在明显差异时才折衷。实际测试生成的 URL，而不要假设图像转换一定有效。

保留一个有效的 src 备用项以及与所交付比例匹配的 width 和 height 值。它们预留空间，但不会阻止响应式 CSS 更改最终尺寸。

对构图进行艺术导向时使用 picture

艺术导向改变的是构图，而不仅仅是文件大小。宽幅风景照片在窄屏上可能需要更紧的纵向裁切以保持主体可见。picture 元素可为媒体条件提供特定来源选项，最后保留一个 img 作为回退。浏览器会考虑每个 source 的 media、type 和 srcset 信息；img 承载替代文本、尺寸和回退行为。

为每个裁切准备编辑和无障碍审核。移动裁切可能会移除产品细节或替代文本中提到的人物。把 alt 放在 img 上，描述图像传达的信息或功能。仅对真正装饰性的图像使用 alt=""；对于链接或按钮图像，应描述动作而非仅外观。当构图不变时不要引入 picture：普通基于宽度的 srcset 更简单。

避免代价高的加载与标记错误

常见浪费是将 sizes="100vw" 复制到每个图像。这对窄屏全宽图可能合适，但不适用于有限宽度容器或桌面卡片。相反的失败是 redesign 后 sizes 过时。CSS 和 sizes 必须同时更改。

不要对首屏重要图像使用懒加载（lazy-load）。建议对下折叠（below-the-fold）图像使用懒加载，并对可视 Hero 保持 eager。fetch priority 可以提升真正关键图像，但广泛的高优先级或预加载规则会损害性能。不应依赖文件名或缓存结果作为证明。

测试请求、裁切与修复

在布局变更宽度下测试代表性页面，包括网格断点的上方和下方。包含高密度设置、宽桌面和会改变槽位的状态。确认呈现尺寸、裁切、替代文本和视觉清晰度。

在 Chrome DevTools 中，打开 Network（网络）面板，禁用缓存重载或使用 Empty Cache And Hard Reload，过滤图像请求并检查 URL、传输大小、头信息、发起者和时序。使用节流（throttle）来揭示延迟或浪费工作。记录视口、设备像素比、槽位、候选项、传输字节和预期结果。

当模板、断点、CDN 或资源管线更改时，把这当作发布门控。针对性修复：更正 sizes、修正描述符、重新生成裁切、恢复回退或移除不必要的 preload。修复后在空缓存重载下重新测试。

作为 SIU 弹性控制来应用

响应式图像可以减少可避免的传输，但无法保证请求成功。源站错误、不可用的转换、第三方托管和 CDN 故障需要独立的连续性与恢复计划。

对于 SIU，请使用测试记录尽早捕获交付回归，识别负责的模板或转换规则，并在上线前进行最小安全修正。将此与可用性预检和回滚计划配对。