浏览器端图像格式转换实战：PNG 转 WebP 与 JPEG 优化
网页加载速度直接影响用户体验，而图片往往是性能瓶颈。PNG 透明图体积大，JPEG 压缩后画质受损，WebP 虽高效但兼容性参差不齐。利用 CompressorJS 在浏览器端完成转换，既能减轻服务器压力，又能根据设备特性动态优化。
为什么选择客户端转换？
传统方案依赖服务端处理，增加了负载和延迟。手动兼容各种格式更是耗时。CompressorJS 基于 Canvas API，允许我们在前端直接操作，实现以下场景的无缝切换：
- PNG 图标：设计稿中的 Logo 往往体积过大，需转为通用格式。
- 用户上传照片：避免上传原图导致带宽浪费。
- 老旧浏览器适配：自动降级到兼容性更好的格式。
主流格式特性对比
PNG：无损与透明的王者
- 优势：完美支持 Alpha 通道，适合 UI 元素。
- 劣势：文件体积通常较大。
- 建议：保留透明度时使用，或转 WebP。
JPEG：照片处理的基准
- 优势：广泛兼容，压缩效率适中。
- 劣势：不支持透明，过度压缩会出现噪点。
- 建议：纯照片类内容首选。
WebP：未来的方向
- 优势：比 JPEG 小 25%-35%，且支持透明。
- 劣势：部分旧版浏览器不支持。
- 建议：优先使用，配合降级策略。
核心配置实战
1. PNG 转 JPEG：处理透明背景
将透明 PNG 转为 JPEG 时，透明区域默认会变黑。需要在绘制前填充白色背景。
new Compressor(file, {
mimeType: 'image/jpeg',
quality: 0.85,
beforeDraw(context, canvas) {
// 填充白色背景，防止透明变黑
context.fillStyle = '#ffffff';
context.fillRect(0, 0, canvas.width, canvas.height);
}
});
注意：产品图建议质量设为 0.9，缩略图 0.65 即可，平衡清晰度与体积。
2. JPEG 转 WebP：智能降级
WebP 虽好，但需先检测浏览器支持情况，否则回退到 JPEG。
() {
isSupported = ( {
img = ();
img. = ;
img. = ();
img. = ();
});
(!isSupported) {
(file, );
}
(file, {
: ,
:
});
}
