UD5工具箱
图片源设置
支持直接输入图片 URL，或从 picsum.photos、Cloudinary、Imgix 等常用 CDN 快速选择。可配置原始图片的宽度和高度，为后续的尺寸计算提供基准。URL 模板支持 {w} 占位符，自动生成不同宽度的图片链接，无需手动拼接 URL。
预设断点方案
内置五种预设断点方案：Bootstrap 5（xs/sm/md/lg/xl/xxl 六档）、Tailwind CSS（sm/md/lg/xl/2xl 五档）、常见设备分辨率（覆盖主流手机和平板）、极简三档方案，以及完全自定义断点。用户可根据项目使用的框架一键选择合适的方案。
像素密度支持
支持 1x（标准屏幕）、2x（Retina 高清屏）和 3x（超高分辨率屏幕）三种像素密度。选择 Retina 密度后，工具会自动为每个断点生成对应分辨率的图片 URL，确保在高 DPI 设备上也能呈现清晰锐利的图片效果。
sizes 属性配置
提供全宽、两列、三列、侧边栏四种预设布局方案，自动计算 sizes 属性值。同时支持自定义 sizes 表达式，满足复杂的混合布局需求。sizes 属性告诉浏览器在不同视口宽度下图片的实际显示尺寸，帮助浏览器做出更优的加载决策。
实时预览与可视化
工具提供实时预览功能，用户可以在不同视口宽度下查看图片的显示效果。同时，断点分布可视化图表直观展示各断点在视口宽度轴上的位置分布，帮助用户判断断点设置是否合理，避免出现某个宽度区间过大导致图片尺寸跳跃的问题。
多格式代码输出
支持三种代码输出格式：标准 img 标签配合 srcset + sizes 属性、picture 元素（支持多格式回退）、纯图片 URL 列表。每种格式都带有语法高亮和一键复制功能，方便直接粘贴到项目代码中。
批量 URL 生成
根据断点配置和像素密度设置，一次性生成所有尺寸的图片 URL 列表。列表以清晰的表格形式展示，包含视口宽度、像素密度、图片尺寸和完整 URL，方便用户批量下载或配置到 CDN 的图片变换规则中。每个 URL 均经过验证，确保格式正确可直接使用。