图像格式转换指南：基于 compressorjs 的 PNG、JPEG 与 WebP 优化

• 使用 beforeDraw 回调设置背景色
• 根据图像用途调整质量参数
• 产品图片建议质量 0.9，缩略图 0.65 即可

场景二：JPEG 转 WebP 的智能优化

WebP 格式虽然高效，但需要谨慎处理兼容性问题：

// 智能 WebP 转换器
async function smartWebPConvert(file) {
  // 先检查浏览器支持
  const isSupported = await checkWebPSupport();
  if (!isSupported) {
    // 降级到 JPEG
    return convertToJPEG(file, 0.8);
  }
  // 支持 WebP 则进行转换
  return new Compressor(file, {
    mimeType: 'image/webp',
    quality: 0.7
  });
}

场景三：PNG 转 WebP 的透明保留

对于需要保持透明度的 PNG 图像，转换为 WebP 是最佳选择：

// 保留透明度的 PNG 转 WebP
function pngToWebpWithAlpha(file) {
  return new Compressor(file, {
    mimeType: 'image/webp',
    quality: 0.85, // 自动处理透明通道
    strict: true // 确保转换后体积确实减小
  });
}

兼容性处理：解决 iOS 等特殊环境的格式转换问题

在实际应用中，我们经常会遇到各种兼容性挑战：

iOS Safari 的特殊处理

function iosSafeConvert(file) {
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
  if (isIOS) {
    // iOS 设备使用 JPEG 格式确保兼容性
    return new Compressor(file, {
      mimeType: 'image/jpeg',
      quality: 0.85,
      maxWidth: 4096, // 避免 Canvas 尺寸过大
      checkOrientation: true // 修复方向问题
    });
  }
}

性能优化：让你的网站飞起来

通过合理的格式转换策略，你可以显著提升网站性能：

质量与体积的完美平衡

• 高质量需求：产品展示图使用 0.9 质量
• 一般需求：文章配图使用 0.75 质量
• 缩略图：列表页小图 0.6 质量即可

智能决策框架

// 根据设备和网络智能选择格式
class SmartConverter {
  async getOptimalFormat(file) {
    const { webp, network } = await this.detectFeatures();
    if (file.type === 'image/png' && webp.alpha) {
      return 'image/webp'; // 支持透明 WebP
    } else if (file.type === 'image/jpeg' && webp.basic) {
      return 'image/webp';
    } else {
      return 'image/jpeg'; // 通用兼容方案
    }
  }
}

最佳实践总结

经过大量项目实践验证，以下是图像格式转换的核心要点：

1. 格式选择优先级：
   • 透明图像 → WebP > PNG
   • 照片类图像 → WebP > JPEG
   • 兼容性要求高 → JPEG
2. 质量参数配置：
   • JPEG：0.8-0.9
   • WebP：0.6-0.8
   • PNG：质量参数无效
3. 错误处理策略：
   • 始终提供降级方案
   • 监控转换效果，避免体积反而增大
   • 用户友好的错误提示