UD5工具箱
第一步：准备与打开工具
在使用本工具之前，请确保您使用的是支持 WebP 和 AVIF 编码的现代浏览器。推荐使用 Chrome 90 以上版本或 Firefox 93 以上版本，这两个浏览器对两种格式都提供了良好的编码支持。打开浏览器后，访问本工具的网址即可进入操作界面。首次加载时，工具会自动检测浏览器的格式支持情况，并在界面上显示检测结果。如果您的浏览器不支持某种格式的编码，工具会提供相应的升级建议。整个界面采用简洁的卡片式布局，核心操作区域位于页面中央，方便用户快速上手。
第二步：上传待对比的原始图片
点击上传区域或直接将图片文件拖拽到上传区域中即可开始上传。工具支持 PNG、JPEG、BMP、GIF 等常见图片格式作为输入源。建议使用 PNG 或高质量 JPEG 格式的原始图片，以确保对比测试的基准质量足够高。上传完成后，工具会在预览区域显示原始图片的视觉效果，并在信息面板中展示图片的元数据（格式、尺寸、文件大小等）。您可以上传不同尺寸和内容类型的图片分别进行测试，但每次只能处理一张图片。如果需要对比多张图片的效果，建议分别进行测试。
第三步：配置质量测试参数
在参数配置区域中，设置您需要测试的质量级别。工具默认提供了几个常用的质量级别供快速测试，您也可以自定义输入需要测试的具体数值。质量级别范围为 1 到 100，数值越高代表压缩后的图片质量越好（体积也越大）。对于大多数 Web 应用场景，建议测试 40、60、75、85、95 这几个质量级别，它们覆盖了从高压缩到高质量的典型应用范围。如果您希望进行更精细的对比，可以增加测试级别的数量。配置完成后，点击开始转换按钮启动格式转换流程。
第四步：查看转换结果并进行对比
转换过程通常在几秒钟内完成，具体时间取决于图片的尺寸和测试级别的数量。转换完成后，结果区域会以表格或卡片网格的形式展示所有测试结果。每个结果项包含格式名称、质量级别、文件大小、压缩率和缩略图预览。您可以点击任意结果项查看大图预览，也可以使用并排对比功能同时查看 WebP 和 AVIF 在同一质量级别下的视觉差异。通过仔细对比不同格式和质量级别的渲染效果，结合文件大小数据，您可以确定最适合项目需求的格式和质量配置。
第五步：下载优化后的图片
确定了最佳的格式和质量设置后，点击对应结果项的下载按钮即可获取转换后的图片文件。下载的文件以相应的格式扩展名保存（.webp 或 .avif），可以直接在项目中使用。如果您需要将图片嵌入到 CSS 中作为背景图使用，可以点击复制按钮获取 Base64 编码的数据 URI。对于批量使用场景，建议将选定的格式和质量设置作为标准配置，应用到项目中所有类似类型的图片上。同时，建议在项目文档中记录格式选择的依据和测试结果，方便团队成员理解和遵循统一的图片优化策略。