UD5工具箱
多格式图片转换能力
本工具支持将用户上传的原始图片（包括 PNG、JPEG、BMP 等常见格式）分别转换为 WebP 和 AVIF 两种新一代图片格式。转换过程利用浏览器原生的图片编码 API 实现，无需借助服务器端处理或第三方库。对于 WebP 格式，工具使用 Canvas.toBlob('image/webp', quality) 方法进行编码，其中 quality 参数控制压缩质量。对于 AVIF 格式，工具使用 Canvas.toBlob('image/avif', quality) 方法进行编码。转换完成后，用户可以下载转换后的图片文件，直接用于项目中。工具还支持将转换后的图片数据以 Base64 编码的形式展示，方便嵌入到 CSS 或 HTML 中使用。
多质量级别批量测试
工具内置了质量梯度批量测试功能，用户可以指定需要测试的质量级别列表（如 20、40、60、80、95），工具会自动将原始图片分别以这些质量级别转换为 WebP 和 AVIF 格式，并汇总展示所有结果。质量级别以百分比表示，100 代表最高质量（最小压缩），较低的值代表更大的压缩率但可能引入更多的视觉损失。批量测试结果以表格或卡片形式展示，每个结果项包含质量级别、文件大小、压缩率和缩略图预览。这种批量对比方式使用户能够快速找到在目标文件大小和视觉质量之间的最佳平衡点。
并排图片预览与对比
工具提供直观的并排图片预览功能，用户可以将 WebP 和 AVIF 格式的转换结果在同一屏幕上并排查看。预览区域支持同步缩放和滚动，用户可以放大图片到像素级别进行精细的质量对比。在预览过程中，工具会在图片下方标注对应的格式类型和质量级别，方便用户区分和记录。此外，工具还提供了差异高亮功能，通过将两种格式的图片进行像素级对比，用颜色标记出差异区域，帮助用户发现肉眼难以察觉的细微质量差异。这种可视化的对比方式极大提升了格式选择的决策效率。
文件大小与压缩率统计
在转换和测试完成后，工具会提供详细的文件大小统计信息。统计内容包括原始图片的文件大小、每种格式在各质量级别下的文件大小、以及相对于原始文件的压缩率百分比。统计信息以清晰的表格和可视化图表形式展示，用户可以一目了然地比较不同格式和质量设置下的体积差异。工具还会自动计算并标注最优压缩率点（即在视觉质量可接受的范围内的最大压缩率），为用户的格式选择提供数据参考。所有统计信息均可导出为文本格式，方便用户在技术文档或性能报告中引用。
格式兼容性检测
在执行转换之前，工具会自动检测当前浏览器对 WebP 和 AVIF 格式的编码支持情况。如果浏览器不支持某种格式的编码，工具会给出明确的提示信息，并建议用户使用支持该格式的浏览器版本进行测试。这一功能避免了用户在不兼容的环境中进行无意义的等待，提升了工具的使用效率。工具还会显示当前浏览器的详细信息，包括浏览器名称、版本号和支持的图片格式列表，帮助用户了解测试环境的能力边界。
原始图片元数据展示
工具在加载用户上传的图片后，会自动提取并展示图片的基本元数据信息。这些信息包括图片的原始格式、像素尺寸（宽和高）、文件大小、色彩空间以及是否包含透明通道等。元数据信息对于格式选择决策非常重要，例如包含透明通道的图片需要使用支持透明度的 WebP 或 AVIF 编码参数，而原始尺寸较大的图片可能更适合高压缩率的格式。工具将这些关键信息以结构化的方式展示，帮助用户在转换前全面了解原始图片的特征，从而做出更有针对性的格式选择。