前端图片压缩通过Canvas和File API在浏览器端实现，利用toBlob设置质量参数减小体积，结合URL.createObjectURL预览，使用Web Worker避免阻塞，推荐CompressorJS等库处理兼容性问题，优先采用WebP格式并控制压缩阈值，平衡画质与性能。
前端图片压缩与处理是提升网页性能的关键环节，尤其在用户上传图片或加载大量图像资源时，合理的处理策略能显著减少带宽消耗、加快页面响应速度。JavaScript 提供了多种方式在浏览器端实现图片压缩和优化，无需依赖服务器即可完成初步处理。
使用 Canvas 进行图片压缩
Canvas 是前端压缩图片最常用的技术之一。通过将图片绘制到 canvas 上，再调用 toDataURL 或 toBlob 方法输出指定质量的图片数据，可以有效减小文件体积。
- 加载图片后创建临时 canvas 元素
- 根据目标尺寸调整图像分辨率
- 使用 ctx.drawImage() 将原图绘制到 canvas
- 导出时设置压缩质量（如 JPEG 质量设为 0.8）
例如：
const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');
canvas.width = targetWidth;
canvas.height = targetHeight;
ctx.drawImage(image, 0, 0, targetWidth, targetHeight);
canvas.toBlob(blob => { /* 压缩后的 Blob */ }, 'image/jpeg', 0.8);
利用 File API 和 URL.createObjectURL
在用户选择本地图片后，可通过 FileReader 或直接使用 URL.createObjectURL 快速预览并处理文件。结合 input[type=file] 获取原始文件，判断大小和类型后决定是否进行压缩。
- 检查文件 size，超过阈值自动触发压缩
- 读取图片元信息（如 EXIF），避免方向错误
- 处理完成后释放内存：revokeObjectURL
第三方库推荐与选型建议
虽然原生方法足够灵活，但实际项目中可借助成熟库提高开发效率。
- compressorjs：轻量级，支持自动旋转、质量控制、格式转换
- browser-image-compression：专为上传场景设计，内置大小估算与降级策略
-
sharp（Node.js）：服务端更高效，适合前后端协同处理
sharp（Node.js）：服务端更高效，适合前后端协同处理这些库封装了常见问题（如 iOS 图像旋转异常），减少兼容性工作量。
性能优化关键点
图片处理本身消耗 CPU 和内存，不当使用可能阻塞主线程。以下是关键优化建议：
- 避免一次性处理多张大图，采用队列机制分批执行
- 压缩操作放入 Web Worker 可防止界面卡顿
- 合理设定压缩阈值，平衡画质与体积
- 优先使用现代格式（如 WebP），条件允许时动态检测支持情况
同时注意移动端 canvas 内存限制，过大的图片需先缩略再处理。
基本上就这些。前端图片压缩不只是“变小”，更是用户体验与性能之间的权衡。合理运用 JavaScript 的能力，能在不增加服务器负担的前提下大幅提升应用响应速度。
