UD5工具箱
配置图片源
在「图片源设置」区域，输入图片的原始 URL 地址。如果不确定 URL，可以从预设的 CDN 选项中选择一个示例图片（如 picsum.photos）。然后设置图片的原始宽度和高度（像素值），这些数值将作为尺寸计算的基准。如果使用带 {w} 占位符的 URL 模板，工具会自动将占位符替换为各断点对应的宽度值。
选择断点方案
在「响应式断点配置」区域，根据项目使用的前端框架选择合适的预设方案。如果你的项目基于 Bootstrap 5，选择「Bootstrap 5」预设；基于 Tailwind CSS 则选择「Tailwind CSS」。如果框架不在预设列表中，选择「自定义」并手动输入断点值（以逗号分隔的像素值，如 480,768,1024,1280）。
设置像素密度
在「像素密度」选项中，选择需要支持的屏幕密度。选择「1x」仅生成标准分辨率的图片；选择「2x (Retina)」会为每个断点额外生成 2 倍分辨率的图片 URL，适合面向现代移动设备的网站；选择「3x」则覆盖超高分辨率屏幕，但会显著增加生成的 URL 数量。
配置 sizes 属性
sizes 属性告诉浏览器图片在不同视口宽度下的实际显示尺寸。根据页面布局选择预设方案：「全宽」表示图片始终占满容器宽度；「两列」和「三列」分别对应图片占容器 50% 和 33% 宽度的场景；「侧边栏」适合内容区域加侧边栏的布局。如果布局更复杂，选择「自定义」并输入 CSS media query 格式的 sizes 表达式。
查看实时预览
配置完成后，工具会自动在预览区域展示不同视口宽度下的图片表现。拖动滑块或直接输入宽度值，可以查看任意宽度下的图片加载情况。同时查看断点分布可视化图表，确认各断点之间的间距是否均匀合理，避免出现某个宽度区间过大导致图片尺寸跳跃过大的问题。
复制生成代码
在「生成代码」区域，根据需求选择输出格式。「srcset + sizes」是最常用的格式，适用于大多数场景；「picture 元素」适合需要在不同视口下加载不同格式图片（如 WebP 回退 JPEG）的场景；「URL 列表」则提供纯文本的图片地址列表，方便批量操作。点击复制按钮将代码粘贴到你的 HTML 文件中即可。
验证与调试
生成代码后，建议在浏览器开发者工具的 Network 面板中验证图片加载行为。调整浏览器窗口宽度，观察浏览器是否根据当前视口选择了正确的图片尺寸。也可以使用 Chrome 的 Device Mode 模拟不同设备，确认在各断点处图片平滑过渡，没有明显的尺寸跳跃或模糊现象。