现代图像格式优化核心是“按需选型+智能降级+工具链闭环”，WebP为首选（压缩率高、兼容性好），AVIF用于关键大图并配双fallback，上传时前端Canvas压缩转WebP，辅以Brotli、强缓存和CDN内容协商。
用现代图像格式替代传统格式，是 JavaScript 性能优化中见效快、成本低的关键一环。核心不是“换格式”，而是“按需选型 + 智能降级 + 工具链闭环”，让图片体积平均减少 25%–50%，同时保持视觉质量与兼容性。
优先选用 WebP，兼顾压缩率与支持度
WebP 是当前最实用的现代化格式：有损压缩比 JPEG 小 25–34%，无损压缩比 PNG 小 26% 以上，还支持透明和动画。Chrome、Firefox、Edge、Safari 14+ 均原生支持，覆盖超 95% 的主流用户。
- 服务端批量转换：用 Sharp（Node.js）或 Squoosh（Web 工具）将构建产物中的 JPG/PNG 自动转为 WebP，并保留原始文件作 fallback
- 响应式交付：配合
<picture>标签实现格式协商，浏览器自动选择最优格式 - 示例代码：
<picture> <source srcset="hero.webp" type="image/webp"> <source srcset="hero.jpg" type="image/jpeg"> <img src="hero.jpg" alt="首页横幅"> </picture>
对高质量静态图尝试 AVIF，但需控制使用边界
AVIF 压缩率比 WebP 再高约 50%，特别适合高分辨率产品图、Banner 等静态大图。但它编码慢、Safari 支持有限（仅 macOS/iOS 16.4+）、移动端解码功耗略高。
- 建议只对关键首屏大图启用 AVIF，且必须提供 WebP 和 JPEG 双 fallback
- 用
caniuse-avif或fetch()探测头信息判断支持性，避免资源浪费 - 避免在低端安卓设备或弱网环境下强制加载 AVIF
客户端上传前就地压缩与格式转换
用户上传的原图往往分辨率高、未压缩（如手机直出 4K JPG），直接上传会拖慢交互并增加服务器压力。可在前端用 Canvas API 实时处理：
立即学习“Java免费学习笔记（深入）”；
- 读取 File 对象后，解析 EXIF 方向，确保旋转正确
- 按目标宽度（如 1200px）等比缩放，避免超大尺寸
- 质量设为 0.7–0.8，输出为 WebP（
canvas.toBlob(callback, 'image/webp', 0.75)） - 若浏览器不支持 WebP（如旧版 Safari），回退到 JPEG 并降低质量至 0.6
配套基础设施不能少
单靠格式转换不够，需服务端与缓存策略协同：
- 启用 Brotli 压缩：对 WebP/AVIF 等二进制资源，Brotli 比 Gzip 多压 15–20%
- 设置强缓存：对带哈希名的图片资源（如
logo.a1b2c3.webp），返回Cache-Control: max-age=31536000 - CDN 配置内容协商：开启
Vary: Accept，让 CDN 根据请求头的Accept: image/webp分发不同格式版本
