浏览器端图像格式转换实战：PNG 转 WebP 与 JPEG 优化

WebP 虽好，但需先检测浏览器支持情况，否则回退到 JPEG。

async function smartWebPConvert(file) {
  // 简单的特性检测示例
  const isSupported = await new Promise(resolve => {
    const img = new Image();
    img.src = 'data:image/webp;base64,UklGRlYAAABXRUJQVlA4IEoAAAAwAQCdASoBAAEAAUAmJaQAA3AA/v3AgAA=';
    img.onload = () => resolve(true);
    img.onerror = () => resolve(false);
  });

  if (!isSupported) {
    return convertToJPEG(file, 0.8);
  }
  
  return new Compressor(file, {
    mimeType: 'image/webp',
    quality: 0.7
  });
}

3. PNG 转 WebP：保留透明度

这是最推荐的组合，既保留了透明效果，又大幅减小了体积。

function pngToWebpWithAlpha(file) {
  return new Compressor(file, {
    mimeType: 'image/webp',
    quality: 0.85,
    strict: true // 确保转换后体积确实减小
  });
}

特殊环境处理：iOS Safari

iOS 设备在处理 Canvas 时有时会忽略图片的 EXIF 方向信息，导致旋转错误。务必开启 checkOrientation。

function iosSafeConvert(file) {
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
  if (isIOS) {
    return new Compressor(file, {
      mimeType: 'image/jpeg',
      quality: 0.85,
      maxWidth: 4096,
      checkOrientation: true // 修复方向问题
    });
  }
}

性能优化建议

合理的参数配置能显著提升网站性能，以下是经过验证的经验值：

• 高质量需求（产品展示）：质量 0.9
• 一般需求（文章配图）：质量 0.75
• 缩略图（列表页）：质量 0.6

对于智能决策，可以根据网络状况和设备能力动态选择输出格式。例如，检测到支持 WebP 且需要透明背景时，优先输出 WebP；否则回退到 JPEG。

快速上手

安装库非常简单，直接使用 npm 即可：

npm install compressorjs

基础用法如下：

import Compressor from 'compressorjs';

new Compressor(file, {
  quality: 0.8,
  success(result) {
    console.log('转换成功，结果 URL:', result.url);
  },
  error(err) {
    console.error('转换失败:', err.message);
  }
});

总结

图像格式转换没有绝对的标准答案，关键在于匹配用户场景。通过 CompressorJS，我们可以灵活地在 PNG、JPEG 和 WebP 之间切换，同时处理好透明度和兼容性细节。记住，最好的格式是那个能让用户在当前设备上获得最佳体验的格式。