WebP性能提升依赖预生成+智能加载，JS仅用于检测支持性并选择图片源；需在构建时或CDN预转码，Canvas轻量检测最稳定；HTML用data属性动态切换，CSS背景图用@supports或JS适配；不可运行时转码，须保留fallback。
WebP 格式本身不靠 JavaScript 压缩图片，而是靠提前生成 + 智能加载来提升性能。JS 的核心作用是判断浏览器是否支持 WebP，再决定加载 .webp 还是 .jpg/.png，整个过程必须配合构建阶段或后端的预转码。
WebP 必须提前生成，JS 只负责“选图”
你不能用 JS 把一张 JPG 实时转成 WebP 并塞进 <img src>——Canvas 的 toBlob() 不支持 'image/webp' 输出（多数浏览器会静默 fallback 到 JPEG/PNG）。所以所有 .webp 文件得在项目构建时、CI 流程中或 CDN 上预先批量生成，和原图保持同名同路径（如 hero.jpg 和 hero.webp）。
用 Canvas 轻量检测 WebP 支持性
这是最稳定、无网络请求、兼容性好的方式：
- 创建一个 1×1 的
<canvas> - 绘制一个像素点
- 调用
toBlob(callback, 'image/webp') - 若回调触发且
blob.type === 'image/webp'，说明支持
function supportsWebP() {
return new Promise(resolve => {
const canvas = document.createElement('canvas');
canvas.width = 1;
canvas.height = 1;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 1, 1);
canvas.toBlob(blob => resolve(blob?.type === 'image/webp'), 'image/webp');
});
}HTML 中动态切换图片源（渐进式兼容）
适合已有项目，不改结构也能落地：
- 给
<img>加两个 data 属性：data-src-webp和data-src-jpg - JS 检测完支持性后，把对应地址赋给
src - 配合
loading="lazy"或IntersectionObserver实现懒加载，避免首屏阻塞
<img data-src-webp="/images/banner.webp" data-src-jpg="/images/banner.jpg" alt="首页横幅" loading="lazy" >
CSS 背景图的 WebP 适配方案<picture> 对背景图无效，可用两种方式：
- 使用
@supports (background: image-set())写 CSS 规则（现代浏览器支持） - JS 动态写
element.style.backgroundImage = 'url(...)'，根据支持性拼接 URL
关键提醒
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 别在运行时用 FileReader + Canvas 解码重绘图片：主线程卡顿、体积未必更小、还可能失真
- WebP 不是万能解药：IE 完全不支持，旧版 Safari（<14）也不行，务必保留 fallback
- 真正减体积靠的是构建工具（如 Sharp、cwebp、Webpack 插件）或 CDN 自动转码，不是前端逻辑
不复杂但容易忽略
立即学习“Java免费学习笔记（深入）”；
