🖼️ 图片格式转换器

什么是图片格式转换器？

图片格式转换器是一款在线图片格式转换工具，可以将图片在 JPG、PNG、WebP 等常见格式之间互相转换。不同的图片格式有不同的特点和适用场景：JPG 适合照片等色彩丰富的图片，压缩率高但有损；PNG 支持透明背景，适合图标和截图但文件较大；WebP 是 Google 推出的新一代图片格式，在相同质量下文件比 JPG 小 25-35%，已经得到主流浏览器的广泛支持。本工具使用 HTML5 Canvas API 在浏览器本地完成格式转换，图片不会上传到任何服务器，完全保护您的隐私和数据安全。支持批量上传多张图片一次性转换，大大提高工作效率。

功能特点

• 多格式支持：支持 JPG、PNG、WebP 三种主流格式的互相转换，满足绝大多数场景需求。
• 批量转换：一次上传多张图片，批量完成格式转换，支持全部下载，效率更高。
• 质量可调：JPG 和 WebP 格式支持 10%-100% 质量调节，在文件大小和画质之间找到最佳平衡。
• 透明背景处理：PNG/WebP 转 JPG 时可自定义背景色填充透明区域，避免出现黑底。
• 纯前端处理：所有转换在浏览器本地使用 Canvas API 完成，图片不上传服务器，保护隐私安全。

如何使用图片格式转换器

1. 上传图片 — 点击上传区域或拖拽图片文件到虚线框内。支持多张图片批量上传，也可以混合不同格式的图片。
2. 选择输出格式 — 在"输出格式"下拉框中选择目标格式：JPG（适合照片）、PNG（适合需要透明背景或清晰文字的图）、WebP（体积最小，适合网页使用）。
3. 调整参数 — 拖动质量滑块调整输出质量（JPG/WebP有效），质量越高画质越好但文件越大。如果转换为JPG且原图有透明背景，可以设置背景填充色。
4. 转换并下载 — 点击"转换图片"按钮，转换完成后可以单张下载或点击"全部下载"批量获取转换后的图片。

常见使用场景

技术原理

图片格式转换的核心是 HTML5 Canvas API。流程如下：首先使用 FileReader API 读取用户选择的图片文件，创建 Image 对象加载图片数据；然后创建一个 Canvas 元素，将图片绘制到 Canvas 上（这一步完成解码，将图片转为像素矩阵）；最后调用 Canvas 的 toDataURL() 或 toBlob() 方法，指定输出的 MIME 类型（image/jpeg、image/png、image/webp）和质量参数，重新编码为目标格式。对于 PNG/WebP 转 JPG 时的透明背景处理，需要先在 Canvas 上填充指定的背景色，再绘制图片。

// 图片格式转换核心代码
async function convertImage(file, format, quality, bgColor) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function(e) {
      const img = new Image();
      img.onload = function() {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        
        // 如果目标是JPG且原图可能有透明通道，填充背景色
        if (format === 'image/jpeg') {
          ctx.fillStyle = bgColor || '#FFFFFF';
          ctx.fillRect(0, 0, canvas.width, canvas.height);
        }
        
        ctx.drawImage(img, 0, 0);
        
        // 转换为目标格式
        canvas.toBlob(function(blob) {
          resolve({
            blob,
            width: img.width,
            height: img.height,
            originalSize: file.size,
            convertedSize: blob.size
          });
        }, format, quality / 100);
      };
      img.onerror = reject;
      img.src = e.target.result;
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// 用法示例
const result = await convertImage(
  file,           // File 对象
  'image/webp',   // 目标格式
  80,             // 质量
  '#FFFFFF'       // 背景色
);

图片格式对比与选型建议

• JPG (JPEG)：最通用的有损压缩格式，适合照片等色彩丰富的图片。不支持透明背景，文字和纯色区域会有压缩失真。质量 80-85% 通常是最佳平衡点。
• PNG：无损压缩格式，支持透明背景，适合图标、Logo、截图、文字类图片。文件通常比 JPG 大 2-5 倍，不适合照片类图片。
• WebP：Google 开发的现代格式，同时支持有损和无损压缩、支持透明。有损 WebP 比同质量 JPG 小 25-35%，无损 WebP 比 PNG 小 26%。是目前网页图片的最佳选择。
• AVIF：基于 AV1 视频编码的图片格式，压缩率比 WebP 更高，但兼容性稍差（Safari 16+ 支持）。适合追求极致压缩的场景。

常见问题